@pisell/materials 1.8.23 → 1.8.25

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InputProps } from 'antd';
 import { PisellContextType } from '../pisell-config-provider/context';
 declare const PisellInput: {

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

@@ -0,0 +1,14 @@
+import type { LayoutProps } from 'antd';
+import { Layout } from 'antd';
+import React from 'react';
+export interface PisellLayoutProps extends LayoutProps {
+    children?: React.ReactNode;
+}
+export interface CompoundedComponent extends React.FC<PisellLayoutProps> {
+    Header: typeof Layout.Header;
+    Content: typeof Layout.Content;
+    Footer: typeof Layout.Footer;
+    Sider: typeof Layout.Sider;
+}
+declare const PisellLayout: CompoundedComponent;
+export default PisellLayout;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SpinProps } from 'antd';
 import './index.less';
 declare type MaskType = {

package/es/components/pisellLongText/PisellLongText.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import type { PisellLongTextProps } from './types';
+import './PisellLongText.less';
+/**
+ * PisellLongText 长文本/多行文本组件
+ *
+ * 多行文本输入/展示组件，支持只读、编辑、禁用三种状态。
+ * 基于 Ant Design TextArea 组件开发，提供展开/折叠功能和完整的校验框架。
+ *
+ * @param props 组件 Props
+ *
+ * @example
+ * // 编辑态
+ * <PisellLongText
+ *   placeholder="请输入内容"
+ *   rows={3}
+ *   maxLength={500}
+ *   showCount
+ * />
+ *
+ * @example
+ * // 只读态（展开折叠）
+ * <PisellLongText
+ *   mode="read"
+ *   value={longText}
+ *   maxLines={3}
+ *   enableExpand
+ * />
+ *
+ * @example
+ * // 自动高度
+ * <PisellLongText
+ *   autoSize={{ minRows: 3, maxRows: 10 }}
+ *   placeholder="自动调整高度"
+ * />
+ */
+export declare const PisellLongText: React.FC<PisellLongTextProps>;
+declare const _default: React.NamedExoticComponent<PisellLongTextProps>;
+export default _default;

package/es/components/pisellLongText/PisellLongText.stories.d.ts

@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellLongText } from './PisellLongText';
+/**
+ * PisellLongText 是一个多行文本输入/展示组件。
+ *
+ * ## 功能特性
+ * - 支持三种状态：只读、编辑、禁用
+ * - 展开/折叠功能（只读态）
+ * - 自动高度调整
+ * - 完整的校验框架
+ * - 字数统计
+ */
+declare const meta: Meta<typeof PisellLongText>;
+export default meta;
+declare type Story = StoryObj<typeof PisellLongText>;
+/**
+ * 基础编辑态示例
+ */
+export declare const Basic: Story;
+/**
+ * 只读态示例 - 短文本
+ */
+export declare const ReadMode: Story;
+/**
+ * 只读态 - 展开/折叠功能（核心）
+ */
+export declare const ReadModeExpandCollapse: Story;
+/**
+ * 只读态 - 自定义展开/收起文案
+ */
+export declare const ReadModeCustomExpandText: Story;
+/**
+ * 只读态 - 禁用展开功能
+ */
+export declare const ReadModeDisableExpand: Story;
+/**
+ * 只读态 - 字数统计
+ */
+export declare const ReadModeWithWordCount: Story;
+/**
+ * 只读态 - 展开 + 字数统计
+ */
+export declare const ReadModeExpandAndWordCount: Story;
+/**
+ * 禁用态示例
+ */
+export declare const Disabled: Story;
+/**
+ * 编辑态 - 默认行数
+ */
+export declare const EditModeCustomRows: Story;
+/**
+ * 编辑态 - 自动高度（boolean）
+ */
+export declare const EditModeAutoSize: Story;
+/**
+ * 编辑态 - 自动高度（范围限定）
+ */
+export declare const EditModeAutoSizeRange: Story;
+/**
+ * 编辑态 - minRows 和 maxRows
+ */
+export declare const EditModeMinMaxRows: Story;
+/**
+ * 编辑态 - 字数统计
+ */
+export declare const EditModeWithCount: Story;
+/**
+ * 编辑态 - 清空按钮
+ */
+export declare const EditModeWithClear: Story;
+/**
+ * 必填校验
+ */
+export declare const Required: Story;
+/**
+ * 长度校验
+ */
+export declare const LengthValidation: Story;
+/**
+ * 自定义校验 - 段落数量限制
+ */
+export declare const CustomValidatorParagraphs: Story;
+/**
+ * 组合校验
+ */
+export declare const CombinedValidation: Story;
+/**
+ * 自动高度 + 字数统计
+ */
+export declare const AutoSizeWithCount: Story;
+/**
+ * 保留换行和空格
+ */
+export declare const PreserveWhitespace: Story;
+/**
+ * 自定义样式（只读态）
+ */
+export declare const CustomStyle: Story;
+/**
+ * 完整功能示例
+ */
+export declare const FullFeatures: Story;
+/**
+ * 所有展开/折叠场景对比
+ */
+export declare const AllExpandScenarios: Story;
+/**
+ * 所有自动高度场景对比
+ */
+export declare const AllAutoSizeScenarios: Story;
+/**
+ * 校验场景对比
+ */
+export declare const ValidationScenarios: Story;
+/**
+ * 边界情况测试
+ */
+export declare const EdgeCases: Story;
+/**
+ * 完整功能演示
+ */
+export declare const CompleteExample: Story;

package/es/components/pisellLongText/components/DisabledView.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { PisellLongTextProps } from '../types';
+/**
+ * PisellLongText 禁用态视图组件
+ *
+ * 负责渲染禁用态视图，基于原始 mode 渲染对应的视图，并添加禁用样式
+ *
+ * 设计规则：
+ * - 基于编辑态或只读态的视觉
+ * - 透明度 40%
+ * - 禁止所有交互行为
+ *
+ * @param props 组件 Props
+ */
+declare const DisabledView: React.FC<PisellLongTextProps>;
+export default DisabledView;

package/es/components/pisellLongText/components/EditView.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { PisellLongTextProps } from '../types';
+/**
+ * PisellLongText 编辑态视图组件
+ *
+ * 负责渲染编辑态的多行输入框，基于 Ant Design TextArea 组件
+ *
+ * 功能：
+ * - 多行文本输入
+ * - 自动高度调整（autoSize）
+ * - 实时或失焦校验
+ * - 错误提示展示
+ * - 字数统计
+ * - 清空按钮
+ *
+ * @param props 组件 Props
+ */
+declare const EditView: React.FC<PisellLongTextProps>;
+export default EditView;

package/es/components/pisellLongText/components/ReadOnlyView.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { PisellLongTextProps } from '../types';
+/**
+ * PisellLongText 只读态视图组件
+ *
+ * 负责渲染只读态的多行文本展示，支持展开/折叠功能
+ *
+ * 功能：
+ * - 多行文本展示
+ * - 根据 maxLines 截断内容
+ * - 展开/收起按钮（超出行数时显示）
+ * - 字数统计（可选）
+ * - 保留换行和空格（whiteSpace: 'pre-wrap'）
+ *
+ * @param props 组件 Props
+ */
+declare const ReadOnlyView: React.FC<PisellLongTextProps>;
+export default ReadOnlyView;

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

@@ -0,0 +1,7 @@
+/**
+ * PisellLongText 组件导出
+ */
+import PisellLongText from './PisellLongText';
+export { PisellLongText };
+export type { PisellLongTextProps } from './types';
+export type { DisplayState, ValidationResult, TextInputState } from './types';

package/es/components/pisellLongText/types.d.ts

@@ -0,0 +1,147 @@
+import type { CSSProperties, KeyboardEvent } from 'react';
+import type { BaseTextInputProps } from '@pisell/utils';
+/**
+ * PisellLongText 组件 Props 类型定义
+ *
+ * 继承 BaseTextInputProps，添加长文本特有的配置
+ */
+export interface PisellLongTextProps extends BaseTextInputProps {
+    /**
+     * 状态模式
+     * @default 'edit'
+     */
+    mode?: 'read' | 'edit';
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 编辑态默认显示行数
+     * @default 3
+     */
+    rows?: number;
+    /**
+     * 编辑态最小行数
+     */
+    minRows?: number;
+    /**
+     * 编辑态最大行数
+     */
+    maxRows?: number;
+    /**
+     * 自动高度调整
+     * @default false
+     * @example
+     * autoSize={true} // 自动调整
+     * autoSize={{ minRows: 3, maxRows: 10 }} // 指定范围
+     */
+    autoSize?: boolean | {
+        minRows?: number;
+        maxRows?: number;
+    };
+    /**
+     * 只读态最大显示行数（超出显示展开按钮）
+     * @default 3
+     */
+    maxLines?: number;
+    /**
+     * 是否启用展开功能（只读态）
+     * @default true
+     */
+    enableExpand?: boolean;
+    /**
+     * 展开按钮文案
+     * @default '展开'
+     */
+    expandText?: string;
+    /**
+     * 收起按钮文案
+     * @default '收起'
+     */
+    collapseText?: string;
+    /**
+     * 展开按钮位置
+     * @default 'bottom'
+     */
+    expandButtonPosition?: 'bottom' | 'inline';
+    /**
+     * 只读态是否显示字数统计
+     * @default false
+     */
+    showWordCount?: boolean;
+    /**
+     * 字号
+     * @example '14px' 或 14
+     * @default 16
+     */
+    fontSize?: string | number;
+    /**
+     * 字重
+     * @example 'bold' 或 600
+     * @default 500
+     */
+    fontWeight?: string | number;
+    /**
+     * 文本颜色
+     * @example '#000000'
+     * @default '#101828'
+     */
+    color?: string;
+    /**
+     * 行高
+     * @example '1.5' 或 1.5
+     * @default 1.5
+     */
+    lineHeight?: string | number;
+    /**
+     * 占位文本
+     */
+    placeholder?: string;
+    /**
+     * 最大长度（字符数）
+     */
+    maxLength?: number;
+    /**
+     * 是否显示字数统计（编辑态）
+     * @default false
+     */
+    showCount?: boolean;
+    /**
+     * 是否显示清空按钮
+     * @default false
+     */
+    allowClear?: boolean;
+    /**
+     * 是否自动聚焦
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * 回车键回调（传递事件对象，支持判断 Ctrl+Enter）
+     * @param e 键盘事件对象
+     */
+    onPressEnter?: (e: KeyboardEvent<HTMLTextAreaElement>) => void;
+    /**
+     * 展开/收起回调
+     * @param expanded 是否已展开
+     */
+    onExpand?: (expanded: boolean) => void;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     */
+    style?: CSSProperties;
+    /**
+     * ARIA 标签
+     */
+    'aria-label'?: string;
+    /**
+     * ARIA 描述
+     */
+    'aria-describedby'?: string;
+}
+export type { DisplayState, ValidationResult, TextInputState } from '@pisell/utils';

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { PisellLookupProps, PisellLookupRef } from './types';
+import './PisellLookup.less';
+export declare const PisellLookup: React.ForwardRefExoticComponent<PisellLookupProps & React.RefAttributes<PisellLookupRef>>;

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/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;