import React, { FC } from 'react'; import './index.scss'; /** * PntImage 文案集合 * @description 所有内部展示文案均可通过 texts prop 自定义,用于多语言场景 */ export interface PntImageTexts { /** 上传中占位文案(仅上传预览模式生效) */ uploading?: string; /** 图片加载中占位文案(纯预览模式生效,透传给 tdesign Image loading) */ loading?: string; /** 图片加载失败占位文案(纯预览模式生效,透传给 tdesign Image error) */ loadFailed?: string; } export interface PntImageProps { /** * 图片地址 * @description 图片的完整 URL 地址;为空则展示 defaultImg 或内置 uploadImg */ src: string | undefined; /** * alt 文本 * @description 图片加载失败时的替代文本,纯预览模式必传以提升可访问性 */ alt?: string; /** * 默认图片 * @description src 为空时展示的占位图;不传则使用内置的 uploadImg */ defaultImg?: string; /** * 快捷尺寸(正方形) * @description 预设尺寸:`small`=36px、`medium`=60px、`large`=136px;默认 `large` * 若 `style` 中显式指定了 width/height,则以 style 为准;非正方形场景请使用 `style` */ size?: 'small' | 'medium' | 'large'; /** * 自定义样式 * @description 一般用于控制图片宽高;其中 width/height 优先级高于 size */ style?: React.CSSProperties; /** * 上传中状态 * @description 当为 true 时显示上传中 loading 占位,阻止其他操作;仅在上传预览模式(传入 onRemove)生效 */ loading?: boolean; /** * 删除回调 * @description 传入即启用「上传预览模式」,mask 含预览 + 删除按钮;不传则为「纯预览模式」 * @param e - 事件对象 */ onRemove?: (e: any) => void; /** * attach 容器 * @description 弹窗场景下需要透传给 tdesign ImageViewer 的 attach,避免预览浮层被父容器裁剪 */ container?: HTMLElement | (() => HTMLElement); /** * 多语言文案 * @description 传入即覆盖默认中文文案;仅对应字段会覆盖,未传字段仍用默认值 */ texts?: PntImageTexts; } /** * PntImage 业务图片组件 * @description 统一覆盖「上传图片预览」和「纯图片预览」两种业务场景,避免业务侧维护两套组件 * * 模式判定:传入 `onRemove` 即为上传预览模式,否则为纯预览模式 * * @example * ```tsx * // 上传预览模式 * * * // 纯预览模式 * * ``` * * @returns {ReactElement} 业务图片组件 */ declare const PntImage: FC; export default PntImage;