refactor(qrcode): 优化文本转二维码为两步操作模式

- 将实时预览改为显式触发生成,用户体验更清晰
- 新增输入态(input)和预览态(preview)两种状态
- 输入态:显示输入框和生成按钮,右侧显示占位提示
- 预览态:显示只读文本预览和编辑按钮,右侧显示二维码
- 保存上次输入内容,返回编辑态时自动回填
- 添加空输入校验和错误提示
- 更新国际化文案
- 完善单元测试覆盖新功能
This commit is contained in:
雨霖铃
2026-05-30 20:23:05 +08:00
parent afd57bb5b2
commit 6dca673a5a
7 changed files with 320 additions and 81 deletions
+6 -1
View File
@@ -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>
);
}