refactor(qrcode): 优化文本转二维码为两步操作模式
- 将实时预览改为显式触发生成,用户体验更清晰 - 新增输入态(input)和预览态(preview)两种状态 - 输入态:显示输入框和生成按钮,右侧显示占位提示 - 预览态:显示只读文本预览和编辑按钮,右侧显示二维码 - 保存上次输入内容,返回编辑态时自动回填 - 添加空输入校验和错误提示 - 更新国际化文案 - 完善单元测试覆盖新功能
This commit is contained in:
@@ -12,12 +12,15 @@ interface QrCodePreviewProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
onDownload: () => void;
|
||||
/** 复制回调 */
|
||||
onCopy: () => void;
|
||||
/** 自定义占位文本,用于空状态提示 */
|
||||
placeholderText?: string;
|
||||
}
|
||||
|
||||
const QrCodePreview = ({
|
||||
qrCodeDataUrl,
|
||||
onDownload,
|
||||
onCopy,
|
||||
placeholderText,
|
||||
className,
|
||||
...props
|
||||
}: QrCodePreviewProps) => {
|
||||
@@ -33,7 +36,9 @@ const QrCodePreview = ({
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<p className="text-sm text-muted-foreground text-center">{t('qrCode:qrCodeWillShow')}</p>
|
||||
<p className="text-sm text-muted-foreground text-center">
|
||||
{placeholderText || t('qrCode:qrCodeWillShow')}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user