From 09b6fc331f1ddaceafde4705e3f87aa02220088a Mon Sep 17 00:00:00 2001
From: ZHENG XIAOYI <yxpqazkzxy@126.com>
Date: Fri, 6 Feb 2026 17:44:40 +0800
Subject: [PATCH] style: enhance visual representation of serial numbers

---
 src/pages/Generate.tsx | 15 +++++++++++++--
 src/pages/Manage.tsx   | 17 ++++++++++++++---
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/pages/Generate.tsx b/src/pages/Generate.tsx
index cbe7ba5..60c81c3 100644
--- a/src/pages/Generate.tsx
+++ b/src/pages/Generate.tsx
@@ -263,9 +263,20 @@ function GeneratePage() {
 
               {qrCodeDataUrl && (
                 <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 && (
-                    <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>
               )}
diff --git a/src/pages/Manage.tsx b/src/pages/Manage.tsx
index 8722480..c22e0b7 100644
--- a/src/pages/Manage.tsx
+++ b/src/pages/Manage.tsx
@@ -413,9 +413,20 @@ function ManagePage() {
         <div style={{ textAlign: 'center' }}>
           {qrCodeDataUrl && (
             <>
-              <img src={qrCodeDataUrl} alt="QR Code" style={{ width: '200px', height: '200px', cursor: 'pointer' }} onClick={() => handleQuerySerial(selectedSerial)} />
-              <p style={{ marginTop: '12px', fontFamily: 'monospace', fontSize: '16px', fontWeight: 'bold', color: '#165DFF' }}>{selectedSerial}</p>
-              <p style={{ marginTop: '8px', fontSize: '12px', color: '#999' }}>点击二维码可查询序列号</p>
+              <img src={qrCodeDataUrl} alt="QR Code" style={{ width: '200px', height: '200px', cursor: 'pointer', marginBottom: '16px' }} onClick={() => handleQuerySerial(selectedSerial)} />
+              <Tag style={{
+                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>