import { CSSProperties, ReactNode } from 'react'; import type { PisellBasicGridProps } from '../PisellBasicGrid/types'; import type { PisellScrollViewProps } from '../PisellScrollView/types'; import type { PisellBasicCardProps } from '../PisellCards/types'; /** * useTabsState Hook 参数 */ export interface UseTabsStateParams { isControlled: boolean; /** * 当前激活的 Tab key(受控) */ value?: string; /** * 默认激活的 Tab key(非受控) */ defaultValue?: string; /** * Tab 切换时的回调 */ onChange?: (key: string, item: T) => void; } /** * useTabsState Hook 返回值 */ export interface UseTabsStateReturn { /** * 当前激活的 Tab key */ activeKey: string | undefined; /** * 切换 Tab 的方法 */ handleTabChange: (key: string, item: T) => void; } export interface RenderItemProps extends PisellBasicCardProps { index: number; tabsState: UseTabsStateReturn; tabsProps: PisellSuperTabsProps; } /** * PisellSuperTabs 组件 Props * @template T - 数据源项的类型 * @description 通用导航框架封装的全能型 Tab 组件 */ export interface PisellSuperTabsProps { isControlled?: boolean; /** * 自定义类名 * @description 添加到最外层容器的类名 */ className?: string; tabItemClassName?: string; tabItemStyle?: CSSProperties; /** * 自定义样式 * @description 添加到最外层容器的样式 */ style?: CSSProperties; /** * 唯一标识 * @description 必填,用于区分不同的 TabItem */ id?: string; /** * 数据源 * @description 支持多级嵌套,递归字段为 children * @example * [ * { key: 'home', label: '首页' }, * { key: 'products', label: '产品', children: [...] } * ] */ dataSource?: T[]; /** * 数据项的唯一标识字段 * @default 'key' * @description 可以是字符串(字段名)或函数(自定义获取逻辑) * @example * // 字符串形式 * rowKey="id" * * // 函数形式 * rowKey={(record, index) => `${record.type}-${index}`} */ rowKey?: string | ((record: T, index: number) => string); /** * 当前激活的 Tab key * @description 受控模式,需配合 onChange 使用 */ value?: string; /** * 默认激活的 Tab key * @description 非受控模式,仅初始化时生效 */ defaultValue?: string; /** * Tab 切换时的回调 * @param key - 切换到的 Tab key * @param item - 切换到的数据项 */ onChange?: (key: string, item: T) => void; /** * 自定义 TabItem 渲染 * @description 支持两种模式: * 1. 函数模式:(item, index, active) => ReactNode * 2. 插槽模式:直接传入 ReactNode * @example * // 函数模式 * renderItem={(item, index, active) => ( * * )} * * // 插槽模式 * renderItem={} */ renderItem?: ((props: RenderItemProps) => ReactNode) | ReactNode; /** * PisellBasicGrid 组件的配置 * @description 透传给 PisellBasicGrid 组件的所有 Props * @see PisellBasicGridProps * @example * gridProps={{ * direction: 'horizontal', * gap: 16, * wrap: 'wrap', * columns: 4, * }} */ gridProps?: Omit, 'dataSource' | 'renderItem' | 'rowKey' | 'children'>; /** * PisellScrollView 组件的配置 * @description 透传给 PisellScrollView 组件的所有 Props * @see PisellScrollViewProps * @example * scrollViewProps={{ * overflow: 'x', * scrollbarStyle: 'thin', * scrollActionsConfig: { show: true, type: 'lrArrows' }, * }} */ scrollViewProps?: Omit; children?: ReactNode; /** * 左侧插槽 */ slotLeft?: ReactNode; slotLeftClassName?: string; slotLeftStyle?: CSSProperties; /** * 右侧插槽 */ slotRight?: ReactNode; slotRightClassName?: string; slotRightStyle?: CSSProperties; /** * 顶部插槽 */ slotTop?: ReactNode; slotTopClassName?: string; slotTopStyle?: CSSProperties; /** * 底部插槽 */ slotBottom?: ReactNode; slotBottomClassName?: string; slotBottomStyle?: CSSProperties; __designMode?: boolean; } /** * 数据项基础类型 * @description 建议数据源中的每一项都包含这些字段 */ export interface TabDataItem { /** * 唯一标识 * @description 必填,用于区分不同的 TabItem */ key: string; /** * 标签文本 */ label?: string; /** * 图标 */ icon?: ReactNode; /** * 徽章配置 */ badge?: { count?: number; dot?: boolean; text?: string; }; /** * 子级数据(多级嵌套) * @description 用于多级导航场景,具体渲染逻辑由 Card 组件实现 */ children?: TabDataItem[]; /** * 是否禁用 */ disabled?: boolean; /** * 其他自定义字段 */ [key: string]: any; }