@pisell/materials 3.3.82 → 3.3.84

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

@@ -0,0 +1,1012 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useState, useRef } from 'react';
+import { PisellLookup } from "./PisellLookup";
+import { SearchOutlined } from '@ant-design/icons';
+import { Card, Space, List, Tag, Button } from 'antd';
+
+/**
+ * PisellLookup 组件 Storybook
+ * 搜索交互协议组件，提供统一的搜索入口、状态管理和结果承载能力
+ */
+var meta = {
+  title: 'Pro Components/PisellLookup',
+  component: 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: '输入框尺寸'
+    }
+  }
+};
+export 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 = function getMockSuggestions(keyword) {
+  if (!keyword) return [];
+  return mockProducts.filter(function (p) {
+    return p.name.toLowerCase().includes(keyword.toLowerCase());
+  }).map(function (p) {
+    return p.name;
+  }).slice(0, 5);
+};
+
+/**
+ * 搜索结果渲染组件
+ */
+var SearchResults = function SearchResults(_ref) {
+  var keyword = _ref.keyword;
+  var results = mockProducts.filter(function (p) {
+    return p.name.toLowerCase().includes(keyword.toLowerCase());
+  });
+  if (results.length === 0) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: 20,
+        textAlign: 'center'
+      }
+    }, "\u672A\u627E\u5230\u76F8\u5173\u5546\u54C1");
+  }
+  return /*#__PURE__*/React.createElement(List, {
+    dataSource: results,
+    renderItem: function renderItem(item) {
+      return /*#__PURE__*/React.createElement(List.Item, null, /*#__PURE__*/React.createElement(List.Item.Meta, {
+        title: item.name,
+        description: /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Tag, {
+          color: "blue"
+        }, item.category), /*#__PURE__*/React.createElement("span", {
+          style: {
+            color: '#ff4d4f',
+            fontWeight: 'bold'
+          }
+        }, "\xA5", item.price))
+      }));
+    }
+  });
+};
+
+/**
+ * 基础示例 - Input 触发器 + Inline 展示
+ */
+export var Basic = {
+  args: {
+    placeholder: '搜索商品',
+    triggerType: 'input',
+    displayType: 'inline',
+    onSearch: function onSearch(keyword) {
+      console.log('搜索:', keyword);
+    },
+    resultRender: function resultRender(keyword) {
+      return /*#__PURE__*/React.createElement(SearchResults, {
+        keyword: keyword
+      });
+    }
+  }
+};
+
+/**
+ * Input 触发器 - 默认尺寸（Middle）
+ */
+export var InputTriggerMiddle = {
+  args: {
+    triggerType: 'input',
+    size: 'middle',
+    placeholder: '请输入搜索内容',
+    showPrefixIcon: true,
+    showClear: true,
+    showConfirmButton: true,
+    confirmButtonText: 'Lookup',
+    showScan: true,
+    displayType: 'inline',
+    onSearch: function onSearch(keyword) {
+      return console.log('搜索:', keyword);
+    },
+    resultRender: function resultRender(keyword) {
+      return /*#__PURE__*/React.createElement(SearchResults, {
+        keyword: keyword
+      });
+    }
+  }
+};
+
+/**
+ * Input 触发器 - 大号尺寸
+ */
+export var InputTriggerLarge = {
+  args: {
+    triggerType: 'input',
+    size: 'large',
+    placeholder: '请输入搜索内容',
+    showPrefixIcon: true,
+    showClear: true,
+    showConfirmButton: true,
+    confirmButtonText: 'Lookup',
+    displayType: 'inline',
+    onSearch: function onSearch(keyword) {
+      return console.log('搜索:', keyword);
+    },
+    resultRender: function resultRender(keyword) {
+      return /*#__PURE__*/React.createElement(SearchResults, {
+        keyword: keyword
+      });
+    }
+  }
+};
+
+/**
+ * Button 触发器 + Modal 展示
+ */
+export var ButtonTrigger = {
+  args: {
+    triggerType: 'button',
+    buttonText: '搜索商品',
+    displayType: 'modal',
+    modalWidth: 834,
+    onSearch: function onSearch(keyword) {
+      return console.log('搜索:', keyword);
+    },
+    resultRender: function resultRender(keyword) {
+      return /*#__PURE__*/React.createElement(SearchResults, {
+        keyword: keyword
+      });
+    }
+  }
+};
+
+/**
+ * Icon 触发器 + Modal 展示
+ */
+export var IconTrigger = {
+  args: {
+    triggerType: 'icon',
+    triggerIcon: /*#__PURE__*/React.createElement(SearchOutlined, {
+      style: {
+        fontSize: 24
+      }
+    }),
+    displayType: 'modal',
+    onSearch: function onSearch(keyword) {
+      return console.log('搜索:', keyword);
+    },
+    resultRender: function resultRender(keyword) {
+      return /*#__PURE__*/React.createElement(SearchResults, {
+        keyword: keyword
+      });
+    }
+  }
+};
+
+/**
+ * Text 触发器 + Modal 展示
+ */
+export var TextTrigger = {
+  args: {
+    triggerType: 'text',
+    triggerText: '点击搜索',
+    displayType: 'modal',
+    onSearch: function onSearch(keyword) {
+      return console.log('搜索:', keyword);
+    },
+    resultRender: function resultRender(keyword) {
+      return /*#__PURE__*/React.createElement(SearchResults, {
+        keyword: keyword
+      });
+    }
+  }
+};
+
+/**
+ * 自定义触发器 + Modal 展示
+ */
+export var CustomTrigger = {
+  args: {
+    trigger: /*#__PURE__*/React.createElement(Card, {
+      hoverable: true,
+      style: {
+        width: 200
+      }
+    }, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(SearchOutlined, null), /*#__PURE__*/React.createElement("span", null, "\u9AD8\u7EA7\u641C\u7D22"))),
+    displayType: 'modal',
+    onSearch: function onSearch(keyword) {
+      return console.log('搜索:', keyword);
+    },
+    resultRender: function resultRender(keyword) {
+      return /*#__PURE__*/React.createElement(SearchResults, {
+        keyword: keyword
+      });
+    }
+  }
+};
+
+/**
+ * Drawer 展示模式
+ */
+export var DrawerDisplay = {
+  args: {
+    triggerType: 'button',
+    buttonText: '打开搜索',
+    displayType: 'drawer',
+    drawerWidth: 500,
+    drawerPlacement: 'right',
+    onSearch: function onSearch(keyword) {
+      return console.log('搜索:', keyword);
+    },
+    resultRender: function resultRender(keyword) {
+      return /*#__PURE__*/React.createElement(SearchResults, {
+        keyword: keyword
+      });
+    }
+  }
+};
+
+/**
+ * 搜索历史功能
+ */
+export var WithSearchHistory = {
+  args: {
+    triggerType: 'input',
+    placeholder: '搜索商品（带历史记录）',
+    displayType: 'inline',
+    showHistory: true,
+    historyKey: 'demo_search_history',
+    maxHistoryCount: 10,
+    onSearch: function onSearch(keyword) {
+      return console.log('搜索:', keyword);
+    },
+    resultRender: function resultRender(keyword) {
+      return /*#__PURE__*/React.createElement(SearchResults, {
+        keyword: keyword
+      });
+    }
+  }
+};
+
+/**
+ * 联想词功能
+ */
+export var WithSuggestions = {
+  args: {
+    triggerType: 'input',
+    placeholder: '输入内容查看联想词',
+    displayType: 'inline',
+    showSuggestions: true,
+    onLoadSuggestions: function onLoadSuggestions(keyword) {
+      return getMockSuggestions(keyword);
+    },
+    onSearch: function onSearch(keyword) {
+      return console.log('搜索:', keyword);
+    },
+    resultRender: function resultRender(keyword) {
+      return /*#__PURE__*/React.createElement(SearchResults, {
+        keyword: keyword
+      });
+    }
+  }
+};
+
+/**
+ * 热门搜索功能
+ */
+export var WithHotWords = {
+  args: {
+    triggerType: 'input',
+    placeholder: '查看热门搜索',
+    displayType: 'inline',
+    showHotWords: true,
+    onLoadHotWords: function onLoadHotWords() {
+      return mockHotWords;
+    },
+    onSearch: function onSearch(keyword) {
+      return console.log('搜索:', keyword);
+    },
+    resultRender: function resultRender(keyword) {
+      return /*#__PURE__*/React.createElement(SearchResults, {
+        keyword: keyword
+      });
+    }
+  }
+};
+
+/**
+ * 完整功能 - 历史 + 联想词 + 热门搜索
+ */
+export var FullFeatures = {
+  args: {
+    triggerType: 'input',
+    placeholder: '搜索商品（完整功能）',
+    displayType: 'inline',
+    showHistory: true,
+    historyKey: 'demo_full_history',
+    maxHistoryCount: 10,
+    showSuggestions: true,
+    onLoadSuggestions: function onLoadSuggestions(keyword) {
+      return getMockSuggestions(keyword);
+    },
+    showHotWords: true,
+    onLoadHotWords: function onLoadHotWords() {
+      return mockHotWords;
+    },
+    onSearch: function onSearch(keyword) {
+      return console.log('搜索:', keyword);
+    },
+    resultRender: function resultRender(keyword) {
+      return /*#__PURE__*/React.createElement(SearchResults, {
+        keyword: keyword
+      });
+    }
+  }
+};
+
+/**
+ * 实时搜索模式
+ */
+export var RealtimeSearch = {
+  args: {
+    triggerType: 'input',
+    placeholder: '输入即搜索（300ms 防抖）',
+    displayType: 'inline',
+    searchMode: 'realtime',
+    debounceTime: 300,
+    onSearch: function onSearch(keyword) {
+      return console.log('实时搜索:', keyword);
+    },
+    resultRender: function resultRender(keyword) {
+      return /*#__PURE__*/React.createElement(SearchResults, {
+        keyword: keyword
+      });
+    }
+  }
+};
+
+/**
+ * 确认触发模式
+ */
+export var ConfirmSearch = {
+  args: {
+    triggerType: 'input',
+    placeholder: '点击按钮或按 Enter 搜索',
+    displayType: 'inline',
+    searchMode: 'confirm',
+    showConfirmButton: true,
+    confirmButtonText: 'Search',
+    onSearch: function onSearch(keyword) {
+      return console.log('确认搜索:', keyword);
+    },
+    resultRender: function resultRender(keyword) {
+      return /*#__PURE__*/React.createElement(SearchResults, {
+        keyword: keyword
+      });
+    }
+  }
+};
+
+/**
+ * 受控模式示例
+ */
+export var Controlled = {
+  render: function render() {
+    var _useState = useState('iPhone'),
+      _useState2 = _slicedToArray(_useState, 2),
+      keyword = _useState2[0],
+      setKeyword = _useState2[1];
+    var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      visible = _useState4[0],
+      setVisible = _useState4[1];
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Space, {
+      direction: "vertical",
+      style: {
+        width: '100%'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "\u5916\u90E8\u63A7\u5236\uFF1A"), /*#__PURE__*/React.createElement("button", {
+      onClick: function onClick() {
+        return setKeyword('MacBook');
+      }
+    }, "\u8BBE\u7F6E\u4E3A MacBook"), /*#__PURE__*/React.createElement("button", {
+      onClick: function onClick() {
+        return setKeyword('');
+      },
+      style: {
+        marginLeft: 8
+      }
+    }, "\u6E05\u7A7A"), /*#__PURE__*/React.createElement("button", {
+      onClick: function onClick() {
+        return setVisible(!visible);
+      },
+      style: {
+        marginLeft: 8
+      }
+    }, visible ? '关闭' : '打开')), /*#__PURE__*/React.createElement(PisellLookup, {
+      value: keyword,
+      onChange: setKeyword,
+      visible: visible,
+      onVisibleChange: setVisible,
+      triggerType: "input",
+      placeholder: "\u53D7\u63A7\u6A21\u5F0F",
+      displayType: "inline",
+      onSearch: function onSearch(kw) {
+        return console.log('搜索:', kw);
+      },
+      resultRender: function resultRender(kw) {
+        return /*#__PURE__*/React.createElement(SearchResults, {
+          keyword: kw
+        });
+      }
+    })));
+  }
+};
+
+/**
+ * 加载状态
+ */
+export var Loading = {
+  args: {
+    triggerType: 'input',
+    placeholder: '加载中...',
+    displayType: 'inline',
+    defaultVisible: true,
+    loading: true
+  }
+};
+
+/**
+ * 禁用状态
+ */
+export var Disabled = {
+  args: {
+    triggerType: 'input',
+    placeholder: '禁用状态',
+    disabled: true,
+    displayType: 'inline'
+  }
+};
+
+/**
+ * Modal 自定义宽度
+ */
+export var ModalCustomWidth = {
+  args: {
+    triggerType: 'button',
+    buttonText: '打开宽屏搜索',
+    displayType: 'modal',
+    modalWidth: 1200,
+    onSearch: function onSearch(keyword) {
+      return console.log('搜索:', keyword);
+    },
+    resultRender: function resultRender(keyword) {
+      return /*#__PURE__*/React.createElement(SearchResults, {
+        keyword: keyword
+      });
+    }
+  }
+};
+
+/**
+ * Modal 显示遮罩层
+ */
+export var ModalWithMask = {
+  args: {
+    triggerType: 'button',
+    buttonText: '搜索（带遮罩）',
+    displayType: 'modal',
+    mask: true,
+    onSearch: function onSearch(keyword) {
+      return console.log('搜索:', keyword);
+    },
+    resultRender: function resultRender(keyword) {
+      return /*#__PURE__*/React.createElement(SearchResults, {
+        keyword: keyword
+      });
+    }
+  }
+};
+
+/**
+ * Modal 挂载到容器并使用 100% 宽度
+ */
+export var ModalFullWidth = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      id: "custom-modal-container",
+      style: {
+        width: 600,
+        height: 400,
+        border: '2px solid #ccc',
+        position: 'relative',
+        // 必须设置定位
+        overflow: 'hidden'
+      }
+    }, /*#__PURE__*/React.createElement("p", {
+      style: {
+        padding: 20
+      }
+    }, "\u8FD9\u662F\u81EA\u5B9A\u4E49\u5BB9\u5668\u533A\u57DF\uFF08600px \u5BBD\uFF09"), /*#__PURE__*/React.createElement("p", {
+      style: {
+        padding: '0 20px',
+        color: '#999'
+      }
+    }, "Modal \u4F1A\u586B\u6EE1\u6B64\u5BB9\u5668\uFF08100% \u5BBD\u5EA6\uFF09")), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginTop: 20
+      }
+    }, /*#__PURE__*/React.createElement(PisellLookup, {
+      triggerType: "button",
+      buttonText: "\u6253\u5F00\u641C\u7D22\uFF08100% \u5BBD\u5EA6\uFF09",
+      displayType: "modal",
+      getContainer: function getContainer() {
+        return document.getElementById('custom-modal-container');
+      },
+      modalWidth: "100%",
+      onSearch: function onSearch(keyword) {
+        return console.log('搜索:', keyword);
+      },
+      resultRender: function resultRender(keyword) {
+        return /*#__PURE__*/React.createElement(SearchResults, {
+          keyword: keyword
+        });
+      }
+    })));
+  }
+};
+
+/**
+ * Drawer 不同方向
+ */
+export var DrawerPlacements = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(PisellLookup, {
+      triggerType: "button",
+      buttonText: "\u53F3\u4FA7 Drawer",
+      displayType: "drawer",
+      drawerPlacement: "right",
+      onSearch: function onSearch(kw) {
+        return console.log('搜索:', kw);
+      },
+      resultRender: function resultRender(kw) {
+        return /*#__PURE__*/React.createElement(SearchResults, {
+          keyword: kw
+        });
+      }
+    }), /*#__PURE__*/React.createElement(PisellLookup, {
+      triggerType: "button",
+      buttonText: "\u5DE6\u4FA7 Drawer",
+      displayType: "drawer",
+      drawerPlacement: "left",
+      onSearch: function onSearch(kw) {
+        return console.log('搜索:', kw);
+      },
+      resultRender: function resultRender(kw) {
+        return /*#__PURE__*/React.createElement(SearchResults, {
+          keyword: kw
+        });
+      }
+    }), /*#__PURE__*/React.createElement(PisellLookup, {
+      triggerType: "button",
+      buttonText: "\u9876\u90E8 Drawer",
+      displayType: "drawer",
+      drawerPlacement: "top",
+      onSearch: function onSearch(kw) {
+        return console.log('搜索:', kw);
+      },
+      resultRender: function resultRender(kw) {
+        return /*#__PURE__*/React.createElement(SearchResults, {
+          keyword: kw
+        });
+      }
+    }), /*#__PURE__*/React.createElement(PisellLookup, {
+      triggerType: "button",
+      buttonText: "\u5E95\u90E8 Drawer",
+      displayType: "drawer",
+      drawerPlacement: "bottom",
+      onSearch: function onSearch(kw) {
+        return console.log('搜索:', kw);
+      },
+      resultRender: function resultRender(kw) {
+        return /*#__PURE__*/React.createElement(SearchResults, {
+          keyword: kw
+        });
+      }
+    }));
+  }
+};
+
+/**
+ * 自定义空状态
+ */
+export var CustomEmpty = {
+  args: {
+    triggerType: 'input',
+    placeholder: '搜索商品',
+    displayType: 'inline',
+    defaultVisible: true,
+    emptyRender: function emptyRender() {
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          padding: 40,
+          textAlign: 'center'
+        }
+      }, /*#__PURE__*/React.createElement(SearchOutlined, {
+        style: {
+          fontSize: 48,
+          color: '#ccc'
+        }
+      }), /*#__PURE__*/React.createElement("div", {
+        style: {
+          marginTop: 16,
+          color: '#999'
+        }
+      }, "\u8BF7\u8F93\u5165\u641C\u7D22\u5185\u5BB9"));
+    }
+  }
+};
+
+/**
+ * 移动端场景
+ */
+export var MobileScenario = {
+  args: {
+    triggerType: 'button',
+    buttonText: '搜索',
+    size: 'large',
+    displayType: 'drawer',
+    drawerWidth: '100%',
+    drawerPlacement: 'bottom',
+    showHistory: true,
+    showHotWords: true,
+    onLoadHotWords: function onLoadHotWords() {
+      return mockHotWords;
+    },
+    onSearch: function onSearch(keyword) {
+      return console.log('搜索:', keyword);
+    },
+    resultRender: function resultRender(keyword) {
+      return /*#__PURE__*/React.createElement(SearchResults, {
+        keyword: keyword
+      });
+    }
+  },
+  parameters: {
+    viewport: {
+      defaultViewport: 'mobile1'
+    }
+  }
+};
+
+/**
+ * 保留搜索内容（默认行为）
+ */
+export var PreserveKeyword = {
+  args: {
+    triggerType: 'button',
+    buttonText: '搜索（默认保留内容）',
+    displayType: 'modal',
+    clearOnClose: false,
+    onSearch: function onSearch(keyword) {
+      return console.log('搜索:', keyword);
+    },
+    resultRender: function resultRender(keyword) {
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          padding: 20
+        }
+      }, /*#__PURE__*/React.createElement("p", null, "\u641C\u7D22\u5173\u952E\u8BCD: ", keyword), /*#__PURE__*/React.createElement("p", {
+        style: {
+          color: '#999',
+          marginTop: 8
+        }
+      }, "\u63D0\u793A\uFF1A\u9ED8\u8BA4\u884C\u4E3A\uFF0C\u5173\u95ED\u540E\u4F1A\u4FDD\u7559\u641C\u7D22\u5185\u5BB9\uFF0C\u518D\u6B21\u6253\u5F00\u65F6\u81EA\u52A8\u9009\u4E2D\u6587\u5B57"));
+    }
+  }
+};
+
+/**
+ * 关闭时清空内容
+ */
+export var ClearOnClose = {
+  args: {
+    triggerType: 'button',
+    buttonText: '搜索（关闭时清空）',
+    displayType: 'modal',
+    clearOnClose: true,
+    onSearch: function onSearch(keyword) {
+      return console.log('搜索:', keyword);
+    },
+    resultRender: function resultRender(keyword) {
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          padding: 20
+        }
+      }, /*#__PURE__*/React.createElement("p", null, "\u641C\u7D22\u5173\u952E\u8BCD: ", keyword), /*#__PURE__*/React.createElement("p", {
+        style: {
+          color: '#999',
+          marginTop: 8
+        }
+      }, "\u63D0\u793A\uFF1A\u8BBE\u7F6E clearOnClose=true\uFF0C\u5173\u95ED\u540E\u4F1A\u6E05\u7A7A\u641C\u7D22\u5185\u5BB9"));
+    }
+  }
+};
+
+/**
+ * 隐藏 Lookup 按钮（输入即搜索）
+ */
+export var NoConfirmButton = {
+  args: {
+    triggerType: 'input',
+    placeholder: '输入即搜索（无按钮）',
+    displayType: 'inline',
+    showConfirmButton: false,
+    debounceTime: 300,
+    onSearch: function onSearch(keyword) {
+      return console.log('实时搜索:', keyword);
+    },
+    resultRender: function resultRender(keyword) {
+      return /*#__PURE__*/React.createElement(SearchResults, {
+        keyword: keyword
+      });
+    }
+  }
+};
+
+/**
+ * 监听打开和关闭事件
+ */
+export var WithOpenCloseEvents = {
+  render: function render() {
+    var _useState5 = useState([]),
+      _useState6 = _slicedToArray(_useState5, 2),
+      log = _useState6[0],
+      setLog = _useState6[1];
+    var addLog = function addLog(message) {
+      setLog(function (prev) {
+        return [].concat(_toConsumableArray(prev), ["".concat(new Date().toLocaleTimeString(), ": ").concat(message)]);
+      });
+    };
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PisellLookup, {
+      triggerType: "button",
+      buttonText: "\u641C\u7D22\uFF08\u67E5\u770B\u4E8B\u4EF6\u65E5\u5FD7\uFF09",
+      displayType: "modal",
+      onOpen: function onOpen() {
+        return addLog('✅ Modal 已打开');
+      },
+      onClose: function onClose() {
+        return addLog('❌ Modal 已关闭');
+      },
+      onSearch: function onSearch(keyword) {
+        return addLog("\uD83D\uDD0D \u641C\u7D22: ".concat(keyword));
+      },
+      resultRender: function resultRender(keyword) {
+        return /*#__PURE__*/React.createElement(SearchResults, {
+          keyword: keyword
+        });
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginTop: 20,
+        padding: 16,
+        background: '#f5f5f5',
+        borderRadius: 8
+      }
+    }, /*#__PURE__*/React.createElement("h4", null, "\u4E8B\u4EF6\u65E5\u5FD7\uFF1A"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        maxHeight: 200,
+        overflow: 'auto'
+      }
+    }, log.map(function (item, index) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: index,
+        style: {
+          padding: '4px 0',
+          fontSize: 12
+        }
+      }, item);
+    })), /*#__PURE__*/React.createElement(Button, {
+      size: "small",
+      onClick: function onClick() {
+        return setLog([]);
+      },
+      style: {
+        marginTop: 8
+      }
+    }, "\u6E05\u7A7A\u65E5\u5FD7")));
+  }
+};
+
+/**
+ * 使用 Ref 控制
+ */
+export var WithRef = {
+  render: function render() {
+    var lookupRef = useRef(null);
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Space, {
+      style: {
+        marginBottom: 16
+      }
+    }, /*#__PURE__*/React.createElement(Button, {
+      onClick: function onClick() {
+        var _lookupRef$current;
+        return (_lookupRef$current = lookupRef.current) === null || _lookupRef$current === void 0 ? void 0 : _lookupRef$current.open();
+      }
+    }, "\u6253\u5F00\u641C\u7D22"), /*#__PURE__*/React.createElement(Button, {
+      onClick: function onClick() {
+        var _lookupRef$current2;
+        return (_lookupRef$current2 = lookupRef.current) === null || _lookupRef$current2 === void 0 ? void 0 : _lookupRef$current2.close();
+      }
+    }, "\u5173\u95ED\u641C\u7D22"), /*#__PURE__*/React.createElement(Button, {
+      onClick: function onClick() {
+        var _lookupRef$current3;
+        return (_lookupRef$current3 = lookupRef.current) === null || _lookupRef$current3 === void 0 ? void 0 : _lookupRef$current3.setKeyword('iPhone');
+      }
+    }, "\u8BBE\u7F6E\u4E3A iPhone"), /*#__PURE__*/React.createElement(Button, {
+      onClick: function onClick() {
+        var _lookupRef$current4;
+        var keyword = (_lookupRef$current4 = lookupRef.current) === null || _lookupRef$current4 === void 0 ? void 0 : _lookupRef$current4.getKeyword();
+        alert("\u5F53\u524D\u5173\u952E\u8BCD: ".concat(keyword));
+      }
+    }, "\u83B7\u53D6\u5173\u952E\u8BCD")), /*#__PURE__*/React.createElement(PisellLookup, {
+      ref: lookupRef,
+      triggerType: "button",
+      buttonText: "\u641C\u7D22",
+      displayType: "modal",
+      onSearch: function onSearch(kw) {
+        return console.log('搜索:', kw);
+      },
+      resultRender: function resultRender(kw) {
+        return /*#__PURE__*/React.createElement(SearchResults, {
+          keyword: kw
+        });
+      }
+    }));
+  }
+};
+
+/**
+ * 仅触发搜索（不展示结果）
+ */
+export var OnlyTriggerSearch = {
+  render: function render() {
+    var _useState7 = useState([]),
+      _useState8 = _slicedToArray(_useState7, 2),
+      results = _useState8[0],
+      setResults = _useState8[1];
+    var _useState9 = useState(''),
+      _useState10 = _slicedToArray(_useState9, 2),
+      keyword = _useState10[0],
+      setKeyword = _useState10[1];
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PisellLookup, {
+      triggerType: "input",
+      placeholder: "\u641C\u7D22\u5546\u54C1\uFF08\u7ED3\u679C\u5C55\u793A\u5728\u4E0B\u65B9\uFF09",
+      showConfirmButton: false,
+      onSearch: function onSearch(kw) {
+        setKeyword(kw);
+        var filtered = mockProducts.filter(function (p) {
+          return p.name.toLowerCase().includes(kw.toLowerCase());
+        });
+        setResults(filtered);
+      }
+    }), keyword && /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginTop: 20,
+        padding: 16,
+        background: '#f5f5f5',
+        borderRadius: 8
+      }
+    }, /*#__PURE__*/React.createElement("h4", null, "\u641C\u7D22\u7ED3\u679C\uFF08", results.length, " \u4E2A\uFF09"), /*#__PURE__*/React.createElement(List, {
+      dataSource: results,
+      renderItem: function renderItem(item) {
+        return /*#__PURE__*/React.createElement(List.Item, null, /*#__PURE__*/React.createElement(List.Item.Meta, {
+          title: item.name,
+          description: "\xA5".concat(item.price)
+        }));
+      }
+    })));
+  }
+};
+
+/**
+ * Playground - 自由配置
+ */
+export 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: function onSearch(keyword) {
+      return console.log('搜索:', keyword);
+    },
+    onLoadSuggestions: function onLoadSuggestions(keyword) {
+      return getMockSuggestions(keyword);
+    },
+    onLoadHotWords: function onLoadHotWords() {
+      return mockHotWords;
+    },
+    resultRender: function resultRender(keyword) {
+      return /*#__PURE__*/React.createElement(SearchResults, {
+        keyword: keyword
+      });
+    }
+  }
+};