@pisell/materials 6.12.26 → 6.12.27

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

@@ -0,0 +1,248 @@
+import type React from 'react';
+import type { CSSProperties } from 'react';
+export declare type PisellHierarchicalSummaryListKey = React.Key;
+export interface PisellHierarchicalSummaryListItem {
+    /**
+     * 行标题。最小字段（必填）
+     */
+    label: React.ReactNode;
+    /**
+     * 行数值。允许 ReactNode（string/number/组合展示）。
+     * 若不传且开启聚合，可能由 children 聚合得到。
+     */
+    value?: React.ReactNode;
+    /**
+     * 子级数据（无限层级递归）
+     */
+    children?: PisellHierarchicalSummaryListItem[];
+    /**
+     * 可选：稳定 key（推荐传入以保证展开态稳定）。
+     * 不传时组件会基于层级路径生成 key。
+     */
+    key?: PisellHierarchicalSummaryListKey;
+    /**
+     * 可选：是否隐藏该项
+     */
+    hidden?: boolean;
+    /**
+     * 可选：排序权重，值越小越靠前
+     */
+    order?: number;
+    /**
+     * 可选：条目数提示（如 "N items" / "N 条"），允许 ReactNode
+     */
+    itemsCount?: React.ReactNode;
+    /**
+     * 可选：信息提示 tooltip 内容（hover 触达）
+     */
+    infoTooltip?: React.ReactNode;
+    /**
+     * 可选：右侧 value 后附加轻量操作（tag/pill/button 等）
+     */
+    extra?: React.ReactNode;
+    /**
+     * 可选：覆盖当前行样式
+     */
+    rowStyle?: CSSProperties;
+    /**
+     * 可选：覆盖当前行类名
+     */
+    rowClassName?: string;
+    /**
+     * 可选：自定义展开内容。若设置，行可展开且展开后渲染此内容（不再渲染 children 列表）。
+     * 用于在列表中嵌入 Collapse 等自定义区块。
+     */
+    expandedContent?: React.ReactNode;
+}
+export interface PisellHierarchicalSummaryListLevelTextStyle {
+    fontSize?: number | string;
+    fontWeight?: number | string;
+    color?: string;
+    /** 行高，如 24 或 '24px' */
+    lineHeight?: number | string;
+}
+export interface PisellHierarchicalSummaryListIconStyle {
+    /** 图标尺寸（px），用于 fontSize 或宽高一致时的边长） */
+    size?: number;
+    color?: string;
+    /** 图标容器宽（px），不传则用 size */
+    width?: number;
+    /** 图标容器高（px），不传则用 size */
+    height?: number;
+}
+export interface PisellHierarchicalSummaryListDividerStyle {
+    show?: boolean;
+    color?: string;
+    style?: 'solid' | 'dashed' | 'dotted';
+}
+export interface PisellHierarchicalSummaryListLevelConfig {
+    /**
+     * 层级缩进（px）。不传则继承全局 indent 规则。
+     */
+    indent?: number;
+    /**
+     * 是否显示 "·" 分隔符（标题区元信息前的点）
+     */
+    showDotSeparator?: boolean;
+    /**
+     * 层级内分割线
+     */
+    divider?: PisellHierarchicalSummaryListDividerStyle;
+    /**
+     * 行容器样式（背景/边框/padding/圆角/阴影等）
+     */
+    rowStyle?: CSSProperties;
+    /**
+     * 行容器类名
+     */
+    rowClassName?: string;
+    /**
+     * 标题文本样式
+     */
+    labelTextStyle?: PisellHierarchicalSummaryListLevelTextStyle;
+    /**
+     * 数值文本样式
+     */
+    valueTextStyle?: PisellHierarchicalSummaryListLevelTextStyle;
+    /**
+     * info icon 样式（size/color）
+     */
+    infoIconStyle?: PisellHierarchicalSummaryListIconStyle;
+    /**
+     * 展开/收起箭头 icon 样式（size/color）
+     */
+    expandIconStyle?: PisellHierarchicalSummaryListIconStyle;
+    /**
+     * 行内元信息样式（如 "·"、N items、info icon 的文案颜色/字号等）
+     */
+    metaTextStyle?: PisellHierarchicalSummaryListLevelTextStyle;
+}
+export declare type PisellHierarchicalSummaryListAggregateMode = 'none' | 'sum';
+export interface PisellHierarchicalSummaryListAggregateConfig {
+    /**
+     * 聚合模式
+     * - none: 不聚合
+     * - sum: 对子级 number 值求和（或使用 getNumberValue 提取）
+     * @default 'none'
+     */
+    mode?: PisellHierarchicalSummaryListAggregateMode;
+    /**
+     * 从条目提取 number 值，用于 sum 聚合。
+     * 默认：若 item.value 是 number，则使用该值；否则忽略。
+     */
+    getNumberValue?: (item: PisellHierarchicalSummaryListItem) => number | null | undefined;
+    /**
+     * 聚合结果格式化（sum 输出到 value 区）
+     */
+    format?: (sum: number, ctx: {
+        item: PisellHierarchicalSummaryListItem;
+        level: number;
+    }) => React.ReactNode;
+}
+export interface PisellHierarchicalSummaryListRenderContext {
+    level: number;
+    pathKeys: PisellHierarchicalSummaryListKey[];
+    expanded: boolean;
+    hasChildren: boolean;
+    aggregatedValue?: React.ReactNode;
+}
+export interface PisellHierarchicalSummaryListProps {
+    /**
+     * 数据源
+     */
+    items: PisellHierarchicalSummaryListItem[];
+    /**
+     * 展开项 keys（受控）
+     */
+    expandedKeys?: PisellHierarchicalSummaryListKey[];
+    /**
+     * 默认展开项 keys（非受控）
+     */
+    defaultExpandedKeys?: PisellHierarchicalSummaryListKey[];
+    /**
+     * 默认展开层级（非受控初始化）。0 表示只展示 L1（不默认展开子级）。
+     * @default 0
+     */
+    defaultExpandedLevel?: number;
+    /**
+     * 展开项变化回调
+     */
+    onExpandedKeysChange?: (keys: PisellHierarchicalSummaryListKey[]) => void;
+    /**
+     * 手风琴模式：同一层级下仅允许一个子项展开
+     * @default false
+     */
+    accordion?: boolean;
+    /**
+     * 最大渲染层级（从 1 开始）。超过层级仍保留行，但不再渲染 children。
+     */
+    maxRenderLevel?: number;
+    /**
+     * 最大可展开层级（从 1 开始）。超过层级不显示展开箭头。
+     */
+    maxExpandLevel?: number;
+    /**
+     * 全局缩进（px），作用于 L2+；也可通过 levelConfig 覆盖。
+     * @default 16
+     */
+    indent?: number;
+    /**
+     * 行间距（px）
+     * @default 8
+     */
+    rowGap?: number;
+    /**
+     * 容器内边距（px 或 CSS 值），不传则使用 less 默认 20px
+     */
+    padding?: number | string;
+    /**
+     * 行内间距（px），用于 1:1 复刻设计稿
+     * - row: 行内左右两栏间距
+     * - rowLeft: 左侧 label 与 meta（· / N items）间距
+     * - meta: meta 内 dot / items-count / info 间距
+     * - rowRight: 右侧 value 与 extra / 展开图标间距
+     */
+    gaps?: {
+        row?: number;
+        rowLeft?: number;
+        meta?: number;
+        rowRight?: number;
+    };
+    /**
+     * 按层级配置样式与功能开关（key 为 level，从 1 开始）
+     */
+    levelConfig?: Record<number, PisellHierarchicalSummaryListLevelConfig>;
+    /**
+     * 自定义渲染 label
+     */
+    renderLabel?: (item: PisellHierarchicalSummaryListItem, ctx: PisellHierarchicalSummaryListRenderContext) => React.ReactNode;
+    /**
+     * 自定义渲染 value
+     */
+    renderValue?: (item: PisellHierarchicalSummaryListItem, ctx: PisellHierarchicalSummaryListRenderContext) => React.ReactNode;
+    /**
+     * 自定义 key 生成（当 item.key 不存在时使用）
+     */
+    getKey?: (item: PisellHierarchicalSummaryListItem, ctx: {
+        level: number;
+        index: number;
+        parentPathKeys: PisellHierarchicalSummaryListKey[];
+    }) => PisellHierarchicalSummaryListKey;
+    /**
+     * 聚合配置：支持内置或外部传入
+     */
+    aggregate?: PisellHierarchicalSummaryListAggregateConfig;
+    /**
+     * 根节点类名
+     */
+    className?: string;
+    /**
+     * 根节点样式
+     */
+    style?: CSSProperties;
+    /**
+     * 是否渲染根节点 div。为 false 时只渲染内部内容（用于外层用同一 DOM 包裹列表与其它区块）。
+     * @default true
+     */
+    renderRoot?: boolean;
+}

package/lib/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/lib/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/lib/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/lib/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/lib/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/lib/components/pisellLookup/hooks/index.d.ts

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

package/lib/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/lib/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/lib/components/pisellLookup/utils/storage.d.ts

@@ -0,0 +1,42 @@
+/**
+ * localStorage 工具函数
+ * 用于管理搜索历史的存储
+ */
+/**
+ * 从 localStorage 加载历史记录
+ * @param key 存储的 key
+ * @returns 历史记录数组
+ */
+export declare const loadHistory: (key: string) => string[];
+/**
+ * 保存历史记录到 localStorage
+ * @param key 存储的 key
+ * @param history 历史记录数组
+ * @param maxCount 最大数量限制
+ */
+export declare const saveHistory: (key: string, history: string[], maxCount: number) => void;
+/**
+ * 清除历史记录
+ * @param key 存储的 key
+ */
+export declare const clearHistory: (key: string) => void;
+/**
+ * 添加历史记录项
+ * @param key 存储的 key
+ * @param item 新的历史记录项
+ * @param maxCount 最大数量限制
+ * @returns 更新后的历史记录数组
+ */
+export declare const addHistoryItem: (key: string, item: string, maxCount: number) => string[];
+/**
+ * 删除历史记录项
+ * @param key 存储的 key
+ * @param item 要删除的历史记录项
+ * @returns 更新后的历史记录数组
+ */
+export declare const removeHistoryItem: (key: string, item: string) => string[];
+/**
+ * 检查 localStorage 是否可用
+ * @returns 是否可用
+ */
+export declare const isLocalStorageAvailable: () => boolean;

package/lib/components/pisellMetricCard/PisellMetricCard.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { PisellMetricCardProps } from './types';
+import './PisellMetricCard.less';
+/**
+ * PisellMetricCard 指标卡片组件
+ *
+ * 用于展示单一核心指标的专业卡片组件
+ * 支持标题、数值、环比、趋势箭头、标签等信息展示
+ *
+ * @example 基础用法
+ * ```tsx
+ * <PisellMetricCard
+ *   title="Total Sales"
+ *   value={1580}
+ * />
+ * ```
+ *
+ * @example 使用对象配置
+ * ```tsx
+ * <PisellMetricCard
+ *   title="Revenue"
+ *   value={1580}
+ *   format={{
+ *     showCurrencySymbol: true,
+ *     currencySymbol: '$',
+ *     useGrouping: true
+ *   }}
+ *   comparison={{
+ *     value: 120
+ *   }}
+ * />
+ * ```
+ */
+declare const PisellMetricCard: React.FC<PisellMetricCardProps>;
+export default PisellMetricCard;

package/lib/components/pisellMetricCard/PisellMetricCard.stories.d.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import PisellMetricCard from './PisellMetricCard';
+declare const meta: Meta<typeof PisellMetricCard>;
+export default meta;
+declare type Story = StoryObj<typeof PisellMetricCard>;
+export declare const Basic: Story;
+export declare const WithCurrency: Story;
+export declare const PositiveTrend: Story;
+export declare const NegativeTrend: Story;
+export declare const WithGrouping: Story;
+export declare const WithPrecision: Story;
+export declare const Complete: Story;
+export declare const WithTag: Story;
+export declare const CustomStyle: Story;
+export declare const Loading: Story;
+export declare const EmptyValue: Story;
+export declare const MultipleCards: Story;

package/lib/components/pisellMetricCard/components/MetricComparison.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { MetricComparisonProps } from '../types';
+/**
+ * MetricComparison 环比信息组件
+ *
+ * 负责渲染环比数值和趋势箭头
+ * - 自动根据正负值显示不同颜色
+ * - 支持格式化环比数值
+ * - 集成趋势箭头组件
+ *
+ * @param props 组件属性
+ */
+declare const MetricComparison: React.FC<MetricComparisonProps>;
+export default MetricComparison;

package/lib/components/pisellMetricCard/components/MetricTitle.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { MetricTitleProps } from '../types';
+/**
+ * MetricTitle 标题组件
+ *
+ * 负责渲染标题、副标题和提示信息
+ * 支持自定义字号、字重、颜色等样式
+ *
+ * @param props 组件属性
+ */
+declare const MetricTitle: React.FC<MetricTitleProps>;
+export default MetricTitle;

package/lib/components/pisellMetricCard/components/MetricValue.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { MetricValueProps } from '../types';
+/**
+ * MetricValue 数值展示组件
+ *
+ * 负责渲染格式化后的主数值
+ * 支持自定义字号、字重、颜色等样式
+ *
+ * @param props 组件属性
+ */
+declare const MetricValue: React.FC<MetricValueProps>;
+export default MetricValue;