@pisell/materials 6.3.26 → 6.3.28

package/es/components/pisellLookup/PisellLookup.less

@@ -132,8 +132,11 @@
 
   // ============ Input 样式覆盖 ============
 
-  // 覆盖 Ant Design Input 默认样式（适用于所有尺寸）
-  &-trigger-input.pisell-lowcode-input-affix-wrapper {
+  // 覆盖 Ant Design Input 默认样式（适用于所有尺寸）；默认高度 50px
+  // 同时匹配 ant- / pisell-lowcode- 前缀，确保有无 prefixCls 都能生效
+  &-trigger-input.pisell-lowcode-input-affix-wrapper,
+  &-trigger-input.ant-input-affix-wrapper {
+    min-height: 50px;
     border: 1px solid #d0d5dd;
     border-radius: 8px;
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
@@ -145,13 +148,15 @@
     }
 
     &:focus,
-    &.pisell-lowcode-input-affix-wrapper-focused {
+    &.pisell-lowcode-input-affix-wrapper-focused,
+    &.ant-input-affix-wrapper-focused {
       border-color: #7f56d9;
       box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0 0 0 2px rgba(127, 86, 217, 0.1);
     }
 
-    // Input 文本样式
-    .pisell-lowcode-input {
+    // Input 文本样式（antd 内部 input 类名可能为 .ant-input 或 .pisell-lowcode-input）
+    .pisell-lowcode-input,
+    .ant-input {
       color: #000000;
       font-size: 16px;
       line-height: 24px;
@@ -164,8 +169,9 @@
     }
   }
 
-  // 小号输入框
-  &-trigger-input.pisell-lowcode-input-affix-wrapper-sm {
+  // 小号输入框（同时匹配 ant- / pisell-lowcode-）
+  &-trigger-input.pisell-lowcode-input-affix-wrapper-sm,
+  &-trigger-input.ant-input-affix-wrapper-sm {
     padding: 2px 2px 2px 12px;
 
     .pisell-lookup-input-clear {
@@ -192,8 +198,10 @@
     }
   }
 
-  // 大号输入框
-  &-trigger-input.pisell-lowcode-input-affix-wrapper-lg {
+  // 大号输入框，高度 58px（同时匹配 ant- / pisell-lowcode-）
+  &-trigger-input.pisell-lowcode-input-affix-wrapper-lg,
+  &-trigger-input.ant-input-affix-wrapper-lg {
+    min-height: 58px;
     padding: 6px 6px 6px 16px;
 
     .pisell-lookup-input-clear {
@@ -210,6 +218,23 @@
 
     .pisell-lookup-input-confirm {
       padding: 10px;
+      line-height: 24px;
+    }
+  }
+
+  // 无 Lookup 按钮时：class 在包裹层 .pisell-lookup-trigger-input-no-confirm 上，对子元素 affix-wrapper 设左右对称 padding
+  &-trigger-input-no-confirm {
+    > .ant-input-affix-wrapper,
+    > .pisell-lowcode-input-affix-wrapper {
+      padding: 4px 16px;
+    }
+    > .ant-input-affix-wrapper-sm,
+    > .pisell-lowcode-input-affix-wrapper-sm {
+      padding: 2px 12px;
+    }
+    > .ant-input-affix-wrapper-lg,
+    > .pisell-lowcode-input-affix-wrapper-lg {
+      padding: 6px 16px;
     }
   }
 
@@ -270,8 +295,8 @@
     }
 
     &-confirm {
+      border: none;
       background-color: #7f56d9;
-      border-color: #7f56d9;
       border-radius: 8px;
       box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
       padding: 10px;
@@ -279,39 +304,37 @@
       min-width: auto;
       font-size: 16px;
       font-weight: 600;
-      line-height: 22px;
+      line-height: 20px;
       color: #ffffff;
 
       &:hover {
         background-color: #6941c6 !important;
-        border-color: #6941c6 !important;
         color: #ffffff !important;
       }
 
       &:active {
         background-color: #53389e !important;
-        border-color: #53389e !important;
         color: #ffffff !important;
       }
 
       span {
         font-size: 16px;
         font-weight: 600;
-        line-height: 22px;
+        line-height: 20px;
       }
 
       &.pisell-lowcode-btn-sm {
         padding: 10px;
         height: auto;
         font-size: 16px;
-        line-height: 22px;
+        line-height: 20px;
       }
 
       &.pisell-lowcode-btn-middle {
         padding: 10px;
         height: auto;
         font-size: 16px;
-        line-height: 22px;
+        line-height: 20px;
       }
     }
   }

package/es/components/pisellLookup/PisellLookup.stories.d.ts

@@ -0,0 +1,129 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellLookup } from './PisellLookup';
+/**
+ * PisellLookup 组件 Storybook
+ * 搜索交互协议组件，提供统一的搜索入口、状态管理和结果承载能力
+ */
+declare const meta: Meta<typeof PisellLookup>;
+export default meta;
+declare type Story = StoryObj<typeof PisellLookup>;
+/**
+ * 基础示例 - Input 触发器 + Inline 展示
+ */
+export declare const Basic: Story;
+/**
+ * Input 触发器 - 默认尺寸（Middle）
+ */
+export declare const InputTriggerMiddle: Story;
+/**
+ * Input 触发器 - 大号尺寸
+ */
+export declare const InputTriggerLarge: Story;
+/**
+ * Button 触发器 + Modal 展示
+ */
+export declare const ButtonTrigger: Story;
+/**
+ * Icon 触发器 + Modal 展示
+ */
+export declare const IconTrigger: Story;
+/**
+ * Text 触发器 + Modal 展示
+ */
+export declare const TextTrigger: Story;
+/**
+ * 自定义触发器 + Modal 展示
+ */
+export declare const CustomTrigger: Story;
+/**
+ * Drawer 展示模式
+ */
+export declare const DrawerDisplay: Story;
+/**
+ * 搜索历史功能
+ */
+export declare const WithSearchHistory: Story;
+/**
+ * 联想词功能
+ */
+export declare const WithSuggestions: Story;
+/**
+ * 热门搜索功能
+ */
+export declare const WithHotWords: Story;
+/**
+ * 完整功能 - 历史 + 联想词 + 热门搜索
+ */
+export declare const FullFeatures: Story;
+/**
+ * 实时搜索模式
+ */
+export declare const RealtimeSearch: Story;
+/**
+ * 确认触发模式
+ */
+export declare const ConfirmSearch: Story;
+/**
+ * 受控模式示例
+ */
+export declare const Controlled: Story;
+/**
+ * 加载状态
+ */
+export declare const Loading: Story;
+/**
+ * 禁用状态
+ */
+export declare const Disabled: Story;
+/**
+ * Modal 自定义宽度
+ */
+export declare const ModalCustomWidth: Story;
+/**
+ * Modal 显示遮罩层
+ */
+export declare const ModalWithMask: Story;
+/**
+ * Modal 挂载到容器并使用 100% 宽度
+ */
+export declare const ModalFullWidth: Story;
+/**
+ * Drawer 不同方向
+ */
+export declare const DrawerPlacements: Story;
+/**
+ * 自定义空状态
+ */
+export declare const CustomEmpty: Story;
+/**
+ * 移动端场景
+ */
+export declare const MobileScenario: Story;
+/**
+ * 保留搜索内容（默认行为）
+ */
+export declare const PreserveKeyword: Story;
+/**
+ * 关闭时清空内容
+ */
+export declare const ClearOnClose: Story;
+/**
+ * 隐藏 Lookup 按钮（输入即搜索）
+ */
+export declare const NoConfirmButton: Story;
+/**
+ * 监听打开和关闭事件
+ */
+export declare const WithOpenCloseEvents: Story;
+/**
+ * 使用 Ref 控制
+ */
+export declare const WithRef: Story;
+/**
+ * 仅触发搜索（不展示结果）
+ */
+export declare const OnlyTriggerSearch: Story;
+/**
+ * Playground - 自由配置
+ */
+export declare const Playground: Story;

package/es/components/pisellLookup/components/HotWords.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { HotWordsProps } from '../types';
+/**
+ * HotWords 组件
+ * 展示热门搜索
+ */
+export declare const HotWords: React.FC<HotWordsProps>;

package/es/components/pisellLookup/components/LookupAuxiliary.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { LookupAuxiliaryProps } from '../types';
+/**
+ * LookupAuxiliary 组件
+ * 辅助信息层：搜索历史、联想词、热门搜索
+ */
+export declare const LookupAuxiliary: React.FC<LookupAuxiliaryProps>;

package/es/components/pisellLookup/components/LookupResultHost.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { LookupResultHostProps } from '../types';
+/**
+ * LookupResultHost 组件
+ * 结果承载层：根据展示类型渲染不同的容器
+ */
+export declare const LookupResultHost: React.FC<LookupResultHostProps>;

package/es/components/pisellLookup/components/LookupTrigger.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { LookupTriggerProps, LookupTriggerRef } from '../types';
+export declare const LookupTrigger: React.ForwardRefExoticComponent<LookupTriggerProps & React.RefAttributes<LookupTriggerRef>>;

package/es/components/pisellLookup/components/LookupTrigger.js

@@ -195,11 +195,13 @@ var LookupTriggerComponent = /*#__PURE__*/forwardRef(function (props, ref) {
   };
 
   /**
-   * 处理按 Enter 键
+   * 处理按 Enter 键：传入当前输入值，避免受控模式下 state 未更新导致历史未保存
    */
   var handleKeyPress = function handleKeyPress(e) {
     if (e.key === 'Enter') {
-      onConfirm === null || onConfirm === void 0 || onConfirm();
+      var _ref2, _e$currentTarget$valu, _e$currentTarget;
+      var currentValue = (_ref2 = (_e$currentTarget$valu = (_e$currentTarget = e.currentTarget) === null || _e$currentTarget === void 0 ? void 0 : _e$currentTarget.value) !== null && _e$currentTarget$valu !== void 0 ? _e$currentTarget$valu : value) !== null && _ref2 !== void 0 ? _ref2 : '';
+      onConfirm === null || onConfirm === void 0 || onConfirm(currentValue);
     }
   };
 
@@ -230,7 +232,7 @@ var LookupTriggerComponent = /*#__PURE__*/forwardRef(function (props, ref) {
       onClick: handleConfirm,
       className: "pisell-lookup-input-confirm"
     }, confirmButtonText));
-    return /*#__PURE__*/React.createElement(Input, {
+    var inputEl = /*#__PURE__*/React.createElement(Input, {
       ref: inputRef,
       value: value,
       onChange: handleChange,
@@ -243,9 +245,17 @@ var LookupTriggerComponent = /*#__PURE__*/forwardRef(function (props, ref) {
       prefix: prefix,
       suffix: suffix,
       autoFocus: autoFocus,
-      className: "pisell-lookup-trigger-input ".concat(className || ''),
+      className: "pisell-lookup-trigger-input ".concat(className || '').trim(),
       style: style
     });
+
+    // 无 Lookup 按钮时用带 class 的包裹层，确保 DOM 上一定有 pisell-lookup-trigger-input-no-confirm；同时保留 pisell-lookup-trigger-input 以便 modal 下 .pisell-lookup-search-area-with-close .pisell-lookup-trigger-input { flex: 1 } 能命中
+    if (!showConfirmButton) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "pisell-lookup-trigger-input pisell-lookup-trigger-input-no-confirm"
+      }, inputEl);
+    }
+    return inputEl;
   };
 
   /**

package/es/components/pisellLookup/components/SearchHistory.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { SearchHistoryProps } from '../types';
+/**
+ * SearchHistory 组件
+ * 展示搜索历史记录
+ */
+export declare const SearchHistory: React.FC<SearchHistoryProps>;

package/es/components/pisellLookup/components/SuggestWords.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { SuggestWordsProps } from '../types';
+/**
+ * SuggestWords 组件
+ * 展示搜索联想词
+ */
+export declare const SuggestWords: React.FC<SuggestWordsProps>;

package/es/components/pisellLookup/components/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 子组件统一导出
+ */
+export { SearchHistory } from './SearchHistory';
+export { SuggestWords } from './SuggestWords';
+export { HotWords } from './HotWords';
+export { LookupAuxiliary } from './LookupAuxiliary';
+export { LookupTrigger } from './LookupTrigger';
+export { LookupResultHost } from './LookupResultHost';

package/es/components/pisellLookup/hooks/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 自定义 Hooks 统一导出
+ */
+export * from './useSearchState';
+export * from './useSearchHistory';
+export * from './useDebounceSearch';

package/es/components/pisellLookup/hooks/useDebounceSearch.d.ts

@@ -0,0 +1,40 @@
+/**
+ * 防抖搜索 Hook
+ */
+export interface UseDebounceSearchOptions {
+    /**
+     * 关键词
+     */
+    keyword: string;
+    /**
+     * 防抖时间（毫秒）
+     */
+    debounceTime: number;
+    /**
+     * 搜索触发回调
+     */
+    onSearch?: (keyword: string) => void;
+    /**
+     * 是否启用防抖
+     */
+    enabled?: boolean;
+    /**
+     * 上次搜索的关键词（用于去重）
+     */
+    lastSearchKeyword?: string;
+    /**
+     * 是否跳过防抖触发（用于手动选择场景）
+     */
+    skipDebounce?: boolean;
+}
+export interface UseDebounceSearchResult {
+    /**
+     * 防抖后的关键词
+     */
+    debouncedKeyword: string;
+}
+/**
+ * 防抖搜索 Hook
+ * 用于实时搜索模式的防抖处理
+ */
+export declare const useDebounceSearch: (options: UseDebounceSearchOptions) => UseDebounceSearchResult;

package/es/components/pisellLookup/hooks/useSearchHistory.d.ts

@@ -0,0 +1,48 @@
+/**
+ * 搜索历史管理 Hook
+ */
+export interface UseSearchHistoryOptions {
+    /**
+     * 存储 key
+     */
+    historyKey: string;
+    /**
+     * 最大历史记录数量
+     */
+    maxHistoryCount: number;
+    /**
+     * 自定义加载历史记录函数
+     */
+    onLoadHistory?: () => string[];
+    /**
+     * 自定义保存历史记录函数
+     */
+    onSaveHistory?: (history: string[]) => void;
+}
+export interface UseSearchHistoryResult {
+    /**
+     * 历史记录数组
+     */
+    history: string[];
+    /**
+     * 添加历史记录
+     */
+    addHistory: (keyword: string) => void;
+    /**
+     * 删除历史记录
+     */
+    removeHistory: (keyword: string) => void;
+    /**
+     * 清除全部历史记录
+     */
+    clearAllHistory: () => void;
+    /**
+     * 重新加载历史记录
+     */
+    reloadHistory: () => void;
+}
+/**
+ * 搜索历史管理 Hook
+ * 支持自定义存储逻辑
+ */
+export declare const useSearchHistory: (options: UseSearchHistoryOptions) => UseSearchHistoryResult;

package/es/components/pisellLookup/hooks/useSearchState.d.ts

@@ -0,0 +1,80 @@
+/**
+ * 搜索状态管理 Hook
+ */
+export interface UseSearchStateOptions {
+    /**
+     * 受控的关键词
+     */
+    value?: string;
+    /**
+     * 默认关键词
+     */
+    defaultValue?: string;
+    /**
+     * 受控的可见性
+     */
+    visible?: boolean;
+    /**
+     * 默认可见性
+     */
+    defaultVisible?: boolean;
+    /**
+     * 关键词变化回调
+     */
+    onChange?: (value: string) => void;
+    /**
+     * 可见性变化回调
+     */
+    onVisibleChange?: (visible: boolean) => void;
+    /**
+     * 打开回调
+     */
+    onOpen?: () => void;
+    /**
+     * 关闭回调
+     */
+    onClose?: () => void;
+}
+export interface UseSearchStateResult {
+    /**
+     * 当前关键词
+     */
+    keyword: string;
+    /**
+     * 设置关键词
+     */
+    setKeyword: (value: string) => void;
+    /**
+     * 是否可见
+     */
+    visible: boolean;
+    /**
+     * 设置可见性
+     */
+    setVisible: (visible: boolean) => void;
+    /**
+     * 打开
+     */
+    open: () => void;
+    /**
+     * 关闭
+     */
+    close: () => void;
+    /**
+     * 切换可见性
+     */
+    toggle: () => void;
+    /**
+     * 是否为受控的关键词
+     */
+    isControlledKeyword: boolean;
+    /**
+     * 是否为受控的可见性
+     */
+    isControlledVisible: boolean;
+}
+/**
+ * 搜索状态管理 Hook
+ * 支持受控和非受控模式
+ */
+export declare const useSearchState: (options: UseSearchStateOptions) => UseSearchStateResult;

package/es/components/pisellLookup/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * PisellLookup 组件导出
+ */
+export { PisellLookup } from './PisellLookup';
+export type { PisellLookupRef } from './types';
+export type * from './types';