@pisell/materials 3.3.82 → 3.3.84

package/lib/components/pisellLookup/PisellLookup.stories.js

@@ -0,0 +1,631 @@
+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/pisellLookup/PisellLookup.stories.tsx
+var PisellLookup_stories_exports = {};
+__export(PisellLookup_stories_exports, {
+  Basic: () => Basic,
+  ButtonTrigger: () => ButtonTrigger,
+  ClearOnClose: () => ClearOnClose,
+  ConfirmSearch: () => ConfirmSearch,
+  Controlled: () => Controlled,
+  CustomEmpty: () => CustomEmpty,
+  CustomTrigger: () => CustomTrigger,
+  Disabled: () => Disabled,
+  DrawerDisplay: () => DrawerDisplay,
+  DrawerPlacements: () => DrawerPlacements,
+  FullFeatures: () => FullFeatures,
+  IconTrigger: () => IconTrigger,
+  InputTriggerLarge: () => InputTriggerLarge,
+  InputTriggerMiddle: () => InputTriggerMiddle,
+  Loading: () => Loading,
+  MobileScenario: () => MobileScenario,
+  ModalCustomWidth: () => ModalCustomWidth,
+  ModalFullWidth: () => ModalFullWidth,
+  ModalWithMask: () => ModalWithMask,
+  NoConfirmButton: () => NoConfirmButton,
+  OnlyTriggerSearch: () => OnlyTriggerSearch,
+  Playground: () => Playground,
+  PreserveKeyword: () => PreserveKeyword,
+  RealtimeSearch: () => RealtimeSearch,
+  TextTrigger: () => TextTrigger,
+  WithHotWords: () => WithHotWords,
+  WithOpenCloseEvents: () => WithOpenCloseEvents,
+  WithRef: () => WithRef,
+  WithSearchHistory: () => WithSearchHistory,
+  WithSuggestions: () => WithSuggestions,
+  default: () => PisellLookup_stories_default
+});
+module.exports = __toCommonJS(PisellLookup_stories_exports);
+var import_react = __toESM(require("react"));
+var import_PisellLookup = require("./PisellLookup");
+var import_icons = require("@ant-design/icons");
+var import_antd = require("antd");
+var meta = {
+  title: "Pro Components/PisellLookup",
+  component: import_PisellLookup.PisellLookup,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: "搜索交互协议组件，支持多种触发器类型和展示方式。"
+      }
+    }
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    triggerType: {
+      control: "radio",
+      options: ["input", "button", "icon", "text"],
+      description: "触发器类型"
+    },
+    searchMode: {
+      control: "radio",
+      options: ["realtime", "confirm"],
+      description: "搜索模式"
+    },
+    displayType: {
+      control: "select",
+      options: ["inline", "popup", "modal", "drawer", "detached"],
+      description: "展示类型"
+    },
+    size: {
+      control: "radio",
+      options: ["large", "middle", "small"],
+      description: "输入框尺寸"
+    }
+  }
+};
+var PisellLookup_stories_default = meta;
+var mockProducts = [
+  { id: 1, name: "iPhone 15 Pro", price: 7999, category: "手机" },
+  { id: 2, name: "MacBook Pro", price: 12999, category: "电脑" },
+  { id: 3, name: "iPad Air", price: 4799, category: "平板" },
+  { id: 4, name: "AirPods Pro", price: 1899, category: "耳机" },
+  { id: 5, name: "Apple Watch", price: 2999, category: "手表" }
+];
+var mockHotWords = ["iPhone", "MacBook", "iPad", "AirPods", "Apple Watch"];
+var getMockSuggestions = (keyword) => {
+  if (!keyword) return [];
+  return mockProducts.filter((p) => p.name.toLowerCase().includes(keyword.toLowerCase())).map((p) => p.name).slice(0, 5);
+};
+var SearchResults = ({ keyword }) => {
+  const results = mockProducts.filter(
+    (p) => p.name.toLowerCase().includes(keyword.toLowerCase())
+  );
+  if (results.length === 0) {
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: 20, textAlign: "center" } }, "未找到相关商品");
+  }
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_antd.List,
+    {
+      dataSource: results,
+      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))
+        }
+      ))
+    }
+  );
+};
+var Basic = {
+  args: {
+    placeholder: "搜索商品",
+    triggerType: "input",
+    displayType: "inline",
+    onSearch: (keyword) => {
+      console.log("搜索:", keyword);
+    },
+    resultRender: (keyword) => /* @__PURE__ */ import_react.default.createElement(SearchResults, { keyword })
+  }
+};
+var InputTriggerMiddle = {
+  args: {
+    triggerType: "input",
+    size: "middle",
+    placeholder: "请输入搜索内容",
+    showPrefixIcon: true,
+    showClear: true,
+    showConfirmButton: true,
+    confirmButtonText: "Lookup",
+    showScan: true,
+    displayType: "inline",
+    onSearch: (keyword) => console.log("搜索:", keyword),
+    resultRender: (keyword) => /* @__PURE__ */ import_react.default.createElement(SearchResults, { keyword })
+  }
+};
+var InputTriggerLarge = {
+  args: {
+    triggerType: "input",
+    size: "large",
+    placeholder: "请输入搜索内容",
+    showPrefixIcon: true,
+    showClear: true,
+    showConfirmButton: true,
+    confirmButtonText: "Lookup",
+    displayType: "inline",
+    onSearch: (keyword) => console.log("搜索:", keyword),
+    resultRender: (keyword) => /* @__PURE__ */ import_react.default.createElement(SearchResults, { keyword })
+  }
+};
+var ButtonTrigger = {
+  args: {
+    triggerType: "button",
+    buttonText: "搜索商品",
+    displayType: "modal",
+    modalWidth: 834,
+    onSearch: (keyword) => console.log("搜索:", keyword),
+    resultRender: (keyword) => /* @__PURE__ */ import_react.default.createElement(SearchResults, { keyword })
+  }
+};
+var IconTrigger = {
+  args: {
+    triggerType: "icon",
+    triggerIcon: /* @__PURE__ */ import_react.default.createElement(import_icons.SearchOutlined, { style: { fontSize: 24 } }),
+    displayType: "modal",
+    onSearch: (keyword) => console.log("搜索:", keyword),
+    resultRender: (keyword) => /* @__PURE__ */ import_react.default.createElement(SearchResults, { keyword })
+  }
+};
+var TextTrigger = {
+  args: {
+    triggerType: "text",
+    triggerText: "点击搜索",
+    displayType: "modal",
+    onSearch: (keyword) => console.log("搜索:", keyword),
+    resultRender: (keyword) => /* @__PURE__ */ import_react.default.createElement(SearchResults, { keyword })
+  }
+};
+var CustomTrigger = {
+  args: {
+    trigger: /* @__PURE__ */ import_react.default.createElement(import_antd.Card, { hoverable: true, style: { width: 200 } }, /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(import_icons.SearchOutlined, null), /* @__PURE__ */ import_react.default.createElement("span", null, "高级搜索"))),
+    displayType: "modal",
+    onSearch: (keyword) => console.log("搜索:", keyword),
+    resultRender: (keyword) => /* @__PURE__ */ import_react.default.createElement(SearchResults, { keyword })
+  }
+};
+var DrawerDisplay = {
+  args: {
+    triggerType: "button",
+    buttonText: "打开搜索",
+    displayType: "drawer",
+    drawerWidth: 500,
+    drawerPlacement: "right",
+    onSearch: (keyword) => console.log("搜索:", keyword),
+    resultRender: (keyword) => /* @__PURE__ */ import_react.default.createElement(SearchResults, { keyword })
+  }
+};
+var WithSearchHistory = {
+  args: {
+    triggerType: "input",
+    placeholder: "搜索商品（带历史记录）",
+    displayType: "inline",
+    showHistory: true,
+    historyKey: "demo_search_history",
+    maxHistoryCount: 10,
+    onSearch: (keyword) => console.log("搜索:", keyword),
+    resultRender: (keyword) => /* @__PURE__ */ import_react.default.createElement(SearchResults, { keyword })
+  }
+};
+var WithSuggestions = {
+  args: {
+    triggerType: "input",
+    placeholder: "输入内容查看联想词",
+    displayType: "inline",
+    showSuggestions: true,
+    onLoadSuggestions: (keyword) => {
+      return getMockSuggestions(keyword);
+    },
+    onSearch: (keyword) => console.log("搜索:", keyword),
+    resultRender: (keyword) => /* @__PURE__ */ import_react.default.createElement(SearchResults, { keyword })
+  }
+};
+var WithHotWords = {
+  args: {
+    triggerType: "input",
+    placeholder: "查看热门搜索",
+    displayType: "inline",
+    showHotWords: true,
+    onLoadHotWords: () => {
+      return mockHotWords;
+    },
+    onSearch: (keyword) => console.log("搜索:", keyword),
+    resultRender: (keyword) => /* @__PURE__ */ import_react.default.createElement(SearchResults, { keyword })
+  }
+};
+var FullFeatures = {
+  args: {
+    triggerType: "input",
+    placeholder: "搜索商品（完整功能）",
+    displayType: "inline",
+    showHistory: true,
+    historyKey: "demo_full_history",
+    maxHistoryCount: 10,
+    showSuggestions: true,
+    onLoadSuggestions: (keyword) => getMockSuggestions(keyword),
+    showHotWords: true,
+    onLoadHotWords: () => mockHotWords,
+    onSearch: (keyword) => console.log("搜索:", keyword),
+    resultRender: (keyword) => /* @__PURE__ */ import_react.default.createElement(SearchResults, { keyword })
+  }
+};
+var RealtimeSearch = {
+  args: {
+    triggerType: "input",
+    placeholder: "输入即搜索（300ms 防抖）",
+    displayType: "inline",
+    searchMode: "realtime",
+    debounceTime: 300,
+    onSearch: (keyword) => console.log("实时搜索:", keyword),
+    resultRender: (keyword) => /* @__PURE__ */ import_react.default.createElement(SearchResults, { keyword })
+  }
+};
+var ConfirmSearch = {
+  args: {
+    triggerType: "input",
+    placeholder: "点击按钮或按 Enter 搜索",
+    displayType: "inline",
+    searchMode: "confirm",
+    showConfirmButton: true,
+    confirmButtonText: "Search",
+    onSearch: (keyword) => console.log("确认搜索:", keyword),
+    resultRender: (keyword) => /* @__PURE__ */ import_react.default.createElement(SearchResults, { keyword })
+  }
+};
+var Controlled = {
+  render: () => {
+    const [keyword, setKeyword] = (0, import_react.useState)("iPhone");
+    const [visible, setVisible] = (0, import_react.useState)(false);
+    return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { direction: "vertical", style: { width: "100%" } }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("strong", null, "外部控制："), /* @__PURE__ */ import_react.default.createElement("button", { onClick: () => setKeyword("MacBook") }, "设置为 MacBook"), /* @__PURE__ */ import_react.default.createElement("button", { onClick: () => setKeyword(""), style: { marginLeft: 8 } }, "清空"), /* @__PURE__ */ import_react.default.createElement("button", { onClick: () => setVisible(!visible), style: { marginLeft: 8 } }, visible ? "关闭" : "打开")), /* @__PURE__ */ import_react.default.createElement(
+      import_PisellLookup.PisellLookup,
+      {
+        value: keyword,
+        onChange: setKeyword,
+        visible,
+        onVisibleChange: setVisible,
+        triggerType: "input",
+        placeholder: "受控模式",
+        displayType: "inline",
+        onSearch: (kw) => console.log("搜索:", kw),
+        resultRender: (kw) => /* @__PURE__ */ import_react.default.createElement(SearchResults, { keyword: kw })
+      }
+    )));
+  }
+};
+var Loading = {
+  args: {
+    triggerType: "input",
+    placeholder: "加载中...",
+    displayType: "inline",
+    defaultVisible: true,
+    loading: true
+  }
+};
+var Disabled = {
+  args: {
+    triggerType: "input",
+    placeholder: "禁用状态",
+    disabled: true,
+    displayType: "inline"
+  }
+};
+var ModalCustomWidth = {
+  args: {
+    triggerType: "button",
+    buttonText: "打开宽屏搜索",
+    displayType: "modal",
+    modalWidth: 1200,
+    onSearch: (keyword) => console.log("搜索:", keyword),
+    resultRender: (keyword) => /* @__PURE__ */ import_react.default.createElement(SearchResults, { keyword })
+  }
+};
+var ModalWithMask = {
+  args: {
+    triggerType: "button",
+    buttonText: "搜索（带遮罩）",
+    displayType: "modal",
+    mask: true,
+    onSearch: (keyword) => console.log("搜索:", keyword),
+    resultRender: (keyword) => /* @__PURE__ */ import_react.default.createElement(SearchResults, { keyword })
+  }
+};
+var ModalFullWidth = {
+  render: () => /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      id: "custom-modal-container",
+      style: {
+        width: 600,
+        height: 400,
+        border: "2px solid #ccc",
+        position: "relative",
+        // 必须设置定位
+        overflow: "hidden"
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement("p", { style: { padding: 20 } }, "这是自定义容器区域（600px 宽）"),
+    /* @__PURE__ */ import_react.default.createElement("p", { style: { padding: "0 20px", color: "#999" } }, "Modal 会填满此容器（100% 宽度）")
+  ), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginTop: 20 } }, /* @__PURE__ */ import_react.default.createElement(
+    import_PisellLookup.PisellLookup,
+    {
+      triggerType: "button",
+      buttonText: "打开搜索（100% 宽度）",
+      displayType: "modal",
+      getContainer: () => document.getElementById("custom-modal-container"),
+      modalWidth: "100%",
+      onSearch: (keyword) => console.log("搜索:", keyword),
+      resultRender: (keyword) => /* @__PURE__ */ import_react.default.createElement(SearchResults, { keyword })
+    }
+  )))
+};
+var DrawerPlacements = {
+  render: () => /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(
+    import_PisellLookup.PisellLookup,
+    {
+      triggerType: "button",
+      buttonText: "右侧 Drawer",
+      displayType: "drawer",
+      drawerPlacement: "right",
+      onSearch: (kw) => console.log("搜索:", kw),
+      resultRender: (kw) => /* @__PURE__ */ import_react.default.createElement(SearchResults, { keyword: kw })
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellLookup.PisellLookup,
+    {
+      triggerType: "button",
+      buttonText: "左侧 Drawer",
+      displayType: "drawer",
+      drawerPlacement: "left",
+      onSearch: (kw) => console.log("搜索:", kw),
+      resultRender: (kw) => /* @__PURE__ */ import_react.default.createElement(SearchResults, { keyword: kw })
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellLookup.PisellLookup,
+    {
+      triggerType: "button",
+      buttonText: "顶部 Drawer",
+      displayType: "drawer",
+      drawerPlacement: "top",
+      onSearch: (kw) => console.log("搜索:", kw),
+      resultRender: (kw) => /* @__PURE__ */ import_react.default.createElement(SearchResults, { keyword: kw })
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellLookup.PisellLookup,
+    {
+      triggerType: "button",
+      buttonText: "底部 Drawer",
+      displayType: "drawer",
+      drawerPlacement: "bottom",
+      onSearch: (kw) => console.log("搜索:", kw),
+      resultRender: (kw) => /* @__PURE__ */ import_react.default.createElement(SearchResults, { keyword: kw })
+    }
+  ))
+};
+var CustomEmpty = {
+  args: {
+    triggerType: "input",
+    placeholder: "搜索商品",
+    displayType: "inline",
+    defaultVisible: true,
+    emptyRender: () => /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: 40, textAlign: "center" } }, /* @__PURE__ */ import_react.default.createElement(import_icons.SearchOutlined, { style: { fontSize: 48, color: "#ccc" } }), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginTop: 16, color: "#999" } }, "请输入搜索内容"))
+  }
+};
+var MobileScenario = {
+  args: {
+    triggerType: "button",
+    buttonText: "搜索",
+    size: "large",
+    displayType: "drawer",
+    drawerWidth: "100%",
+    drawerPlacement: "bottom",
+    showHistory: true,
+    showHotWords: true,
+    onLoadHotWords: () => mockHotWords,
+    onSearch: (keyword) => console.log("搜索:", keyword),
+    resultRender: (keyword) => /* @__PURE__ */ import_react.default.createElement(SearchResults, { keyword })
+  },
+  parameters: {
+    viewport: {
+      defaultViewport: "mobile1"
+    }
+  }
+};
+var PreserveKeyword = {
+  args: {
+    triggerType: "button",
+    buttonText: "搜索（默认保留内容）",
+    displayType: "modal",
+    clearOnClose: false,
+    onSearch: (keyword) => console.log("搜索:", keyword),
+    resultRender: (keyword) => /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: 20 } }, /* @__PURE__ */ import_react.default.createElement("p", null, "搜索关键词: ", keyword), /* @__PURE__ */ import_react.default.createElement("p", { style: { color: "#999", marginTop: 8 } }, "提示：默认行为，关闭后会保留搜索内容，再次打开时自动选中文字"))
+  }
+};
+var ClearOnClose = {
+  args: {
+    triggerType: "button",
+    buttonText: "搜索（关闭时清空）",
+    displayType: "modal",
+    clearOnClose: true,
+    onSearch: (keyword) => console.log("搜索:", keyword),
+    resultRender: (keyword) => /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: 20 } }, /* @__PURE__ */ import_react.default.createElement("p", null, "搜索关键词: ", keyword), /* @__PURE__ */ import_react.default.createElement("p", { style: { color: "#999", marginTop: 8 } }, "提示：设置 clearOnClose=true，关闭后会清空搜索内容"))
+  }
+};
+var NoConfirmButton = {
+  args: {
+    triggerType: "input",
+    placeholder: "输入即搜索（无按钮）",
+    displayType: "inline",
+    showConfirmButton: false,
+    debounceTime: 300,
+    onSearch: (keyword) => console.log("实时搜索:", keyword),
+    resultRender: (keyword) => /* @__PURE__ */ import_react.default.createElement(SearchResults, { keyword })
+  }
+};
+var WithOpenCloseEvents = {
+  render: () => {
+    const [log, setLog] = (0, import_react.useState)([]);
+    const addLog = (message) => {
+      setLog((prev) => [...prev, `${(/* @__PURE__ */ new Date()).toLocaleTimeString()}: ${message}`]);
+    };
+    return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+      import_PisellLookup.PisellLookup,
+      {
+        triggerType: "button",
+        buttonText: "搜索（查看事件日志）",
+        displayType: "modal",
+        onOpen: () => addLog("✅ Modal 已打开"),
+        onClose: () => addLog("❌ Modal 已关闭"),
+        onSearch: (keyword) => addLog(`🔍 搜索: ${keyword}`),
+        resultRender: (keyword) => /* @__PURE__ */ import_react.default.createElement(SearchResults, { keyword })
+      }
+    ), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginTop: 20, padding: 16, background: "#f5f5f5", borderRadius: 8 } }, /* @__PURE__ */ import_react.default.createElement("h4", null, "事件日志："), /* @__PURE__ */ import_react.default.createElement("div", { style: { maxHeight: 200, overflow: "auto" } }, log.map((item, index) => /* @__PURE__ */ import_react.default.createElement("div", { key: index, style: { padding: "4px 0", fontSize: 12 } }, item))), /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { size: "small", onClick: () => setLog([]), style: { marginTop: 8 } }, "清空日志")));
+  }
+};
+var WithRef = {
+  render: () => {
+    const lookupRef = (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 = lookupRef.current) == null ? void 0 : _a.open();
+    } }, "打开搜索"), /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { onClick: () => {
+      var _a;
+      return (_a = lookupRef.current) == null ? void 0 : _a.close();
+    } }, "关闭搜索"), /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { onClick: () => {
+      var _a;
+      return (_a = lookupRef.current) == null ? void 0 : _a.setKeyword("iPhone");
+    } }, "设置为 iPhone"), /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { onClick: () => {
+      var _a;
+      const keyword = (_a = lookupRef.current) == null ? void 0 : _a.getKeyword();
+      alert(`当前关键词: ${keyword}`);
+    } }, "获取关键词")), /* @__PURE__ */ import_react.default.createElement(
+      import_PisellLookup.PisellLookup,
+      {
+        ref: lookupRef,
+        triggerType: "button",
+        buttonText: "搜索",
+        displayType: "modal",
+        onSearch: (kw) => console.log("搜索:", kw),
+        resultRender: (kw) => /* @__PURE__ */ import_react.default.createElement(SearchResults, { keyword: kw })
+      }
+    ));
+  }
+};
+var OnlyTriggerSearch = {
+  render: () => {
+    const [results, setResults] = (0, import_react.useState)([]);
+    const [keyword, setKeyword] = (0, import_react.useState)("");
+    return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+      import_PisellLookup.PisellLookup,
+      {
+        triggerType: "input",
+        placeholder: "搜索商品（结果展示在下方）",
+        showConfirmButton: false,
+        onSearch: (kw) => {
+          setKeyword(kw);
+          const filtered = mockProducts.filter(
+            (p) => p.name.toLowerCase().includes(kw.toLowerCase())
+          );
+          setResults(filtered);
+        }
+      }
+    ), keyword && /* @__PURE__ */ import_react.default.createElement("div", { style: { marginTop: 20, padding: 16, background: "#f5f5f5", borderRadius: 8 } }, /* @__PURE__ */ import_react.default.createElement("h4", null, "搜索结果（", results.length, " 个）"), /* @__PURE__ */ import_react.default.createElement(
+      import_antd.List,
+      {
+        dataSource: results,
+        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 = {
+  args: {
+    triggerType: "input",
+    placeholder: "请输入搜索内容",
+    size: "middle",
+    displayType: "inline",
+    searchMode: "realtime",
+    debounceTime: 300,
+    showPrefixIcon: false,
+    showClear: true,
+    showConfirmButton: true,
+    confirmButtonText: "Lookup",
+    showScan: true,
+    showHistory: true,
+    maxHistoryCount: 10,
+    showSuggestions: true,
+    showHotWords: true,
+    disabled: false,
+    loading: false,
+    maskClosable: true,
+    onSearch: (keyword) => console.log("搜索:", keyword),
+    onLoadSuggestions: (keyword) => getMockSuggestions(keyword),
+    onLoadHotWords: () => mockHotWords,
+    resultRender: (keyword) => /* @__PURE__ */ import_react.default.createElement(SearchResults, { keyword })
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Basic,
+  ButtonTrigger,
+  ClearOnClose,
+  ConfirmSearch,
+  Controlled,
+  CustomEmpty,
+  CustomTrigger,
+  Disabled,
+  DrawerDisplay,
+  DrawerPlacements,
+  FullFeatures,
+  IconTrigger,
+  InputTriggerLarge,
+  InputTriggerMiddle,
+  Loading,
+  MobileScenario,
+  ModalCustomWidth,
+  ModalFullWidth,
+  ModalWithMask,
+  NoConfirmButton,
+  OnlyTriggerSearch,
+  Playground,
+  PreserveKeyword,
+  RealtimeSearch,
+  TextTrigger,
+  WithHotWords,
+  WithOpenCloseEvents,
+  WithRef,
+  WithSearchHistory,
+  WithSuggestions
+});

package/lib/components/pisellLookup/components/HotWords.js

@@ -0,0 +1,63 @@
+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/pisellLookup/components/HotWords.tsx
+var HotWords_exports = {};
+__export(HotWords_exports, {
+  HotWords: () => HotWords
+});
+module.exports = __toCommonJS(HotWords_exports);
+var import_react = __toESM(require("react"));
+var import_locales = require("../../../locales");
+var HotWords = (props) => {
+  const { hotWords, onSelect, render, className, style } = props;
+  if (!hotWords || hotWords.length === 0) {
+    return null;
+  }
+  if (render) {
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, render(hotWords, onSelect));
+  }
+  const handleClick = (keyword) => {
+    onSelect(keyword);
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: `pisell-lookup-hotwords ${className || ""}`, style }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lookup-hotwords-title" }, (0, import_locales.getText)("pisell-lookup-popular-search")), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lookup-hotwords-list" }, hotWords.map((item, index) => /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      key: `${item}-${index}`,
+      className: "pisell-lookup-hotwords-item",
+      onClick: () => handleClick(item),
+      title: item
+    },
+    item
+  ))));
+};
+HotWords.displayName = "HotWords";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  HotWords
+});