雨霖铃
de7da9f1db
- 在 tailwind.config.js 中启用 darkMode: 'class' 并扩展语义化颜色变量 - 将全项目硬编码颜色（bg-white、text-gray-*、border-gray-* 等）替换为语义化类名 - 修复 popup/index.html 硬编码浅色背景色 - 同步更新相关单元测试中的类名断言
54 lines
1.8 KiB
TypeScript
54 lines
1.8 KiB
TypeScript
import { Download, Copy } from 'lucide-react';
|
|
import { useLazyTranslation } from '@/utils/useLazyTranslation';
|
|
|
|
interface QrCodePreviewProps {
|
|
/** 二维码 Data URL */
|
|
qrCodeDataUrl: string;
|
|
/** 下载回调 */
|
|
onDownload: () => void;
|
|
/** 复制回调 */
|
|
onCopy: () => void;
|
|
}
|
|
|
|
const QrCodePreview = ({ qrCodeDataUrl, onDownload, onCopy }: QrCodePreviewProps) => {
|
|
const { t } = useLazyTranslation('qrCode');
|
|
|
|
if (!qrCodeDataUrl) {
|
|
return (
|
|
<div className="flex flex-col justify-center items-center min-h-[200px] border-2 border-dashed border-input rounded-xl p-4 bg-muted">
|
|
<span className="text-sm text-muted-foreground text-center">
|
|
{t('qrCode:qrCodeWillShow')}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col justify-center items-center min-h-[200px] border-2 border-dashed border-input rounded-xl p-4 bg-muted">
|
|
<div className="flex flex-col items-center w-full">
|
|
<img src={qrCodeDataUrl} alt="QR Code" className="w-[250px] h-[250px] block" />
|
|
<div className="flex gap-2 mt-4">
|
|
<button
|
|
type="button"
|
|
onClick={onDownload}
|
|
className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-green-600 bg-background border border-green-600 rounded-lg hover:bg-green-500/10 transition-colors"
|
|
>
|
|
<Download className="w-4 h-4" />
|
|
{t('qrCode:downloadButton')}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={onCopy}
|
|
className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-lg hover:bg-green-700 transition-colors"
|
|
>
|
|
<Copy className="w-4 h-4" />
|
|
{t('qrCode:copyQrButton')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default QrCodePreview;
|