template-10550/types/components.d.ts

/**
 * 组件相关类型定义
 */

import { ReactNode, CSSProperties } from 'react';

// 基础组件Props类型
declare namespace ComponentProps {
  /** 基础Props */
  interface Base {
    className?: string;
    style?: CSSProperties;
    children?: ReactNode;
  }
  
  /** 可点击组件Props */
  interface Clickable extends Base {
    onClick?: (event?: any) => void;
    disabled?: boolean;
  }
  
  /** 表单组件基础Props */
  interface FormItem extends Base {
    label?: string;
    required?: boolean;
    error?: string;
    help?: string;
  }
  
  /** 输入组件Props */
  interface Input extends FormItem {
    value?: string;
    defaultValue?: string;
    placeholder?: string;
    disabled?: boolean;
    readonly?: boolean;
    maxLength?: number;
    onChange?: (value: string, event?: any) => void;
    onFocus?: (event?: any) => void;
    onBlur?: (event?: any) => void;
  }
  
  /** 选择器组件Props */
  interface Selector<T = any> extends FormItem {
    value?: T;
    defaultValue?: T;
    options: Option<T>[];
    placeholder?: string;
    disabled?: boolean;
    multiple?: boolean;
    onChange?: (value: T, option?: Option<T>) => void;
  }
  
  /** 分页组件Props */
  interface Pagination extends Base {
    current: number;
    total: number;
    pageSize?: number;
    showSizeChanger?: boolean;
    showQuickJumper?: boolean;
    showTotal?: boolean;
    onChange?: (page: number, pageSize?: number) => void;
  }
  
  /** 表格列定义 */
  interface TableColumn<T = any> {
    key: string;
    title: string;
    dataIndex?: string;
    width?: number | string;
    align?: 'left' | 'center' | 'right';
    fixed?: 'left' | 'right';
    sortable?: boolean;
    filterable?: boolean;
    render?: (value: any, record: T, index: number) => ReactNode;
  }
  
  /** 表格组件Props */
  interface Table<T = any> extends Base {
    columns: TableColumn<T>[];
    dataSource: T[];
    rowKey?: string | ((record: T) => string);
    loading?: boolean;
    pagination?: false | Pagination;
    scroll?: { x?: number; y?: number };
    onRow?: (record: T, index: number) => any;
    onChange?: (pagination: any, filters: any, sorter: any) => void;
  }
  
  /** 模态框组件Props */
  interface Modal extends Base {
    visible: boolean;
    title?: string;
    width?: number | string;
    closable?: boolean;
    maskClosable?: boolean;
    keyboard?: boolean;
    centered?: boolean;
    destroyOnClose?: boolean;
    footer?: ReactNode | null;
    onOk?: () => void | Promise<void>;
    onCancel?: () => void;
    afterClose?: () => void;
  }
  
  /** 抽屉组件Props */
  interface Drawer extends Base {
    visible: boolean;
    title?: string;
    width?: number | string;
    placement?: 'left' | 'right' | 'top' | 'bottom';
    closable?: boolean;
    maskClosable?: boolean;
    keyboard?: boolean;
    destroyOnClose?: boolean;
    onClose?: () => void;
    afterVisibleChange?: (visible: boolean) => void;
  }
  
  /** 上传组件Props */
  interface Upload extends Base {
    action?: string;
    accept?: string;
    multiple?: boolean;
    maxCount?: number;
    maxSize?: number;
    fileList?: UploadFile[];
    beforeUpload?: (file: File) => boolean | Promise<boolean>;
    onChange?: (fileList: UploadFile[]) => void;
    onPreview?: (file: UploadFile) => void;
    onRemove?: (file: UploadFile) => boolean | Promise<boolean>;
  }
  
  /** 图片预览组件Props */
  interface ImagePreview extends Base {
    visible: boolean;
    images: string[];
    current?: number;
    onClose?: () => void;
    onChange?: (current: number) => void;
  }
  
  /** 搜索组件Props */
  interface Search extends Base {
    value?: string;
    placeholder?: string;
    disabled?: boolean;
    loading?: boolean;
    onSearch?: (value: string) => void;
    onChange?: (value: string) => void;
    onClear?: () => void;
  }
  
  /** 筛选器组件Props */
  interface Filter extends Base {
    filters: Array<{
      key: string;
      label: string;
      type: 'input' | 'select' | 'date' | 'dateRange';
      options?: Option[];
      placeholder?: string;
    }>;
    values?: Record<string, any>;
    onChange?: (values: Record<string, any>) => void;
    onReset?: () => void;
  }
  
  /** 商品列表组件Props */
  interface GoodsList extends Base {
    goods: Product.Info[];
    loading?: boolean;
    layout?: 'grid' | 'list';
    columns?: number;
    showPrice?: boolean;
    showStock?: boolean;
    showSales?: boolean;
    onItemClick?: (goods: Product.Info) => void;
    onAddToCart?: (goods: Product.Info, sku?: Product.SKU) => void;
  }
  
  /** 商品卡片组件Props */
  interface GoodsCard extends Base {
    goods: Product.Info;
    layout?: 'vertical' | 'horizontal';
    showPrice?: boolean;
    showStock?: boolean;
    showSales?: boolean;
    onClick?: () => void;
    onAddToCart?: (sku?: Product.SKU) => void;
  }
  
  /** 规格选择器组件Props */
  interface SpecSelector extends Base {
    specs: Product.Spec[];
    skus: Product.SKU[];
    selectedSku?: Product.SKU;
    onChange?: (sku: Product.SKU) => void;
  }
  
  /** 数量选择器组件Props */
  interface QuantitySelector extends Base {
    value: number;
    min?: number;
    max?: number;
    step?: number;
    disabled?: boolean;
    onChange?: (value: number) => void;
  }
  
  /** 购物车商品项组件Props */
  interface CartItem extends Base {
    item: Cart.Item;
    editable?: boolean;
    onSelect?: (selected: boolean) => void;
    onQuantityChange?: (quantity: number) => void;
    onRemove?: () => void;
  }
  
  /** 订单列表组件Props */
  interface OrderList extends Base {
    orders: Order.Info[];
    loading?: boolean;
    showActions?: boolean;
    onItemClick?: (order: Order.Info) => void;
    onPay?: (order: Order.Info) => void;
    onCancel?: (order: Order.Info) => void;
    onConfirm?: (order: Order.Info) => void;
    onRefresh?: () => void;
  }
  
  /** 订单卡片组件Props */
  interface OrderCard extends Base {
    order: Order.Info;
    showActions?: boolean;
    onClick?: () => void;
    onPay?: () => void;
    onCancel?: () => void;
    onConfirm?: () => void;
  }
  
  /** 地址选择器组件Props */
  interface AddressSelector extends Base {
    value?: Order.Address;
    addresses?: Order.Address[];
    onSelect?: (address: Order.Address) => void;
    onAdd?: () => void;
    onEdit?: (address: Order.Address) => void;
    onDelete?: (address: Order.Address) => void;
  }
  
  /** 支付方式选择器组件Props */
  interface PaymentSelector extends Base {
    value?: Order.PaymentType;
    methods: Array<{
      type: Order.PaymentType;
      name: string;
      icon?: string;
      disabled?: boolean;
    }>;
    onChange?: (type: Order.PaymentType) => void;
  }
  
  /** 用户头像组件Props */
  interface UserAvatar extends Base {
    user?: User.BaseInfo;
    size?: 'small' | 'medium' | 'large' | number;
    shape?: 'circle' | 'square';
    showName?: boolean;
    onClick?: () => void;
  }
  
  /** 错误边界组件Props */
  interface ErrorBoundary extends Base {
    fallback?: ReactNode;
    onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
  }
  
  /** 加载状态组件Props */
  interface Loading extends Base {
    loading: boolean;
    tip?: string;
    size?: 'small' | 'medium' | 'large';
    overlay?: boolean;
  }
  
  /** 空状态组件Props */
  interface Empty extends Base {
    image?: string;
    description?: string;
    action?: ReactNode;
  }
  
  /** 骨架屏组件Props */
  interface Skeleton extends Base {
    loading: boolean;
    rows?: number;
    avatar?: boolean;
    title?: boolean;
    active?: boolean;
  }
}