refactor: 重构 QrCodePreview 组件,继承 HTMLDiv 属性并统一 shadcn 样式
- 组件改为继承 `React.HTMLAttributes<HTMLDivElement>`,支持外部传入 className 和事件 - 使用 `cn()` 函数合并外部类名 - 空白状态改用 `border border-dashed` 和更浅的 `bg-muted/40` 背景 - 正常状态改为纯白背景柔边圆角容器包裹二维码,确保暗黑模式下黑白对比度 - 下载/复制按钮完全对齐 shadcn 的 Outline 与 Default 样式规范 - 更新测试用例中的 alt 文本为 "QR Code Preview"
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { render, screen, fireEvent } from '@testing-library/react';
|
||||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import QrCodePreview from '@/components/QrCodePreview';
|
||||
|
||||
describe('QrCodePreview 组件', () => {
|
||||
@@ -30,7 +30,7 @@ describe('QrCodePreview 组件', () => {
|
||||
onCopy={mockOnCopy}
|
||||
/>,
|
||||
);
|
||||
const img = screen.getByAltText('QR Code');
|
||||
const img = screen.getByAltText('QR Code Preview');
|
||||
expect(img).toBeInTheDocument();
|
||||
expect(img).toHaveAttribute('src', testDataUrl);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user