trace-system/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: enhance visual representation of serial numbers

Browse Source
This commit is contained in:
郑肖毅
2026-02-06 17:44:40 +08:00
parent b94e7f42a4
commit 09b6fc331f
2 changed files with 27 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/pages/Generate.tsx
View File

@@ -263,9 +263,20 @@ function GeneratePage() {
{qrCodeDataUrl && ( {qrCodeDataUrl && (
<div style={{ textAlign: 'center' }}> <div style={{ textAlign: 'center' }}>
<img src={qrCodeDataUrl} alt="QR Code" style={{ width: '200px', height: '200px' }} /> <img src={qrCodeDataUrl} alt="QR Code" style={{ width: '200px', height: '200px', marginBottom: '16px' }} />
{generatedData.serials && generatedData.serials.length > 0 && ( {generatedData.serials && generatedData.serials.length > 0 && (
<p style={{ marginTop: '12px', fontFamily: 'monospace', fontSize: '16px', fontWeight: 'bold', color: '#165DFF' }}>{generatedData.serials[0].serialNumber}</p> <Tag style={{
fontFamily: 'monospace',
fontSize: '14px',
padding: '6px 16px',
borderRadius: '6px',
backgroundColor: '#E6F7FF',
color: '#165DFF',
border: '1px solid #91D5FF',
fontWeight: '500'
}}>
{generatedData.serials[0].serialNumber}
</Tag>
)} )}
</div> </div>
)} )}

17
src/pages/Manage.tsx
View File

@@ -413,9 +413,20 @@ function ManagePage() {
<div style={{ textAlign: 'center' }}> <div style={{ textAlign: 'center' }}>
{qrCodeDataUrl && ( {qrCodeDataUrl && (
<> <>
<img src={qrCodeDataUrl} alt="QR Code" style={{ width: '200px', height: '200px', cursor: 'pointer' }} onClick={() => handleQuerySerial(selectedSerial)} /> <img src={qrCodeDataUrl} alt="QR Code" style={{ width: '200px', height: '200px', cursor: 'pointer', marginBottom: '16px' }} onClick={() => handleQuerySerial(selectedSerial)} />
<p style={{ marginTop: '12px', fontFamily: 'monospace', fontSize: '16px', fontWeight: 'bold', color: '#165DFF' }}>{selectedSerial}</p> <Tag style={{
<p style={{ marginTop: '8px', fontSize: '12px', color: '#999' }}>点击二维码可查询序列号</p> fontFamily: 'monospace',
fontSize: '14px',
padding: '6px 16px',
borderRadius: '6px',
backgroundColor: '#E6F7FF',
color: '#165DFF',
border: '1px solid #91D5FF',
fontWeight: '500'
}}>
{selectedSerial}
</Tag>
<p style={{ marginTop: '12px', fontSize: '12px', color: '#999' }}>点击二维码可查询序列号</p>
</> </>
)} )}
</div> </div>