refactor: 大量前端页面/组件样式从硬编码颜色迁移到 antd token 主题变量

frontend/src/components/AnnouncementModal.tsx

@@ -1,4 +1,4 @@
-import { Modal, Button, Space } from 'antd';
+import { Modal, Button, Space, theme } from 'antd';
 import { useEffect, useState } from 'react';
 
 interface AnnouncementModalProps {
@@ -11,6 +11,8 @@ interface AnnouncementModalProps {
 export default function AnnouncementModal({ visible, onClose, onDoNotShowToday, onNeverShow }: AnnouncementModalProps) {
   const [qqImageError, setQqImageError] = useState(false);
   const [wxImageError, setWxImageError] = useState(false);
+  const { token } = theme.useToken();
+  const alphaColor = (color: string, alpha: number) => `color-mix(in srgb, ${color} ${(alpha * 100).toFixed(0)}%, transparent)`;
 
   useEffect(() => {
     if (visible) {
@@ -35,7 +37,7 @@ export default function AnnouncementModal({ visible, onClose, onDoNotShowToday,
         <div style={{
           fontSize: '20px',
           fontWeight: 600,
-          color: 'var(--color-primary)',
+          color: token.colorPrimary,
           textAlign: 'center',
         }}>
           🎉 欢迎使用 AI小说创作助手
@@ -64,9 +66,9 @@ export default function AnnouncementModal({ visible, onClose, onDoNotShowToday,
               borderRadius: '8px',
               height: '40px',
               fontSize: '14px',
-              background: 'var(--color-primary)',
-              borderColor: 'var(--color-primary)',
-              boxShadow: 'var(--shadow-primary)',
+              background: token.colorPrimary,
+              borderColor: token.colorPrimary,
+              boxShadow: `0 8px 20px ${alphaColor(token.colorPrimary, 0.32)}`,
             }}
           >
             永不再展示
@@ -78,16 +80,16 @@ export default function AnnouncementModal({ visible, onClose, onDoNotShowToday,
       styles={{
         body: {
           padding: '20px',
-          background: 'var(--color-bg-container)',
+          background: token.colorBgContainer,
         },
         header: {
-          background: 'linear-gradient(135deg, rgba(77, 128, 136, 0.08) 0%, rgba(248, 246, 241, 0.95) 100%)',
-          borderBottom: '1px solid var(--color-border-secondary)',
+          background: `linear-gradient(135deg, ${alphaColor(token.colorPrimary, 0.1)} 0%, ${alphaColor(token.colorBgContainer, 0.98)} 100%)`,
+          borderBottom: `1px solid ${token.colorBorderSecondary}`,
           padding: '16px 24px',
         },
         footer: {
-          background: 'var(--color-bg-container)',
-          borderTop: '1px solid var(--color-border-secondary)',
+          background: token.colorBgContainer,
+          borderTop: `1px solid ${token.colorBorderSecondary}`,
           padding: '16px 24px',
         },
       }}
@@ -96,7 +98,7 @@ export default function AnnouncementModal({ visible, onClose, onDoNotShowToday,
         <div style={{
           marginBottom: '12px',
           fontSize: '15px',
-          color: 'var(--color-text-secondary)',
+          color: token.colorTextSecondary,
           lineHeight: '1.5',
         }}>
           <p style={{ marginBottom: '8px' }}>👋 欢迎加入我们的交流群！在这里你可以：</p>
@@ -111,7 +113,7 @@ export default function AnnouncementModal({ visible, onClose, onDoNotShowToday,
             <li>🐛 反馈问题和建议</li>
             <li>📚 分享创作经验和灵感</li>
           </ul>
-          <p style={{ fontWeight: 600, color: 'var(--color-text-primary)', marginBottom: '12px' }}>
+          <p style={{ fontWeight: 600, color: token.colorText, marginBottom: '12px' }}>
             扫描下方二维码加入交流群：
           </p>
         </div>
@@ -122,7 +124,7 @@ export default function AnnouncementModal({ visible, onClose, onDoNotShowToday,
           alignItems: 'flex-start',
           gap: '24px',
           padding: '16px',
-          background: 'var(--color-bg-layout)',
+          background: token.colorBgLayout,
           borderRadius: '8px',
           flexWrap: 'wrap',
         }}>
@@ -133,7 +135,7 @@ export default function AnnouncementModal({ visible, onClose, onDoNotShowToday,
             alignItems: 'center',
             minWidth: '200px',
           }}>
-            <p style={{ fontWeight: 600, color: 'var(--color-text-primary)', marginBottom: '8px', fontSize: '14px' }}>
+            <p style={{ fontWeight: 600, color: token.colorText, marginBottom: '8px', fontSize: '14px' }}>
               QQ交流群
             </p>
             {!qqImageError ? (
@@ -141,10 +143,10 @@ export default function AnnouncementModal({ visible, onClose, onDoNotShowToday,
                 display: 'flex',
                 justifyContent: 'center',
                 alignItems: 'center',
-                background: 'var(--color-bg-container)',
+                background: token.colorBgContainer,
                 borderRadius: '8px',
                 padding: '6px',
-                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+                boxShadow: `0 2px 8px ${alphaColor(token.colorText, 0.12)}`,
               }}>
                 <img
                   src="/qq.jpg"
@@ -167,9 +169,9 @@ export default function AnnouncementModal({ visible, onClose, onDoNotShowToday,
                 display: 'flex',
                 justifyContent: 'center',
                 alignItems: 'center',
-                background: 'var(--color-bg-container)',
+                background: token.colorBgContainer,
                 borderRadius: '8px',
-                color: '#999',
+                color: token.colorTextTertiary,
               }}>
                 <p>二维码加载失败</p>
               </div>
@@ -183,7 +185,7 @@ export default function AnnouncementModal({ visible, onClose, onDoNotShowToday,
             alignItems: 'center',
             minWidth: '200px',
           }}>
-            <p style={{ fontWeight: 600, color: 'var(--color-text-primary)', marginBottom: '8px', fontSize: '14px' }}>
+            <p style={{ fontWeight: 600, color: token.colorText, marginBottom: '8px', fontSize: '14px' }}>
               微信交流群
             </p>
             {!wxImageError ? (
@@ -191,10 +193,10 @@ export default function AnnouncementModal({ visible, onClose, onDoNotShowToday,
                 display: 'flex',
                 justifyContent: 'center',
                 alignItems: 'center',
-                background: 'var(--color-bg-container)',
+                background: token.colorBgContainer,
                 borderRadius: '8px',
                 padding: '6px',
-                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+                boxShadow: `0 2px 8px ${alphaColor(token.colorText, 0.12)}`,
               }}>
                 <img
                   src="/WX.png"
@@ -217,9 +219,9 @@ export default function AnnouncementModal({ visible, onClose, onDoNotShowToday,
                 display: 'flex',
                 justifyContent: 'center',
                 alignItems: 'center',
-                background: 'var(--color-bg-container)',
+                background: token.colorBgContainer,
                 borderRadius: '8px',
-                color: '#999',
+                color: token.colorTextTertiary,
               }}>
                 <p>二维码加载失败</p>
               </div>
@@ -230,11 +232,11 @@ export default function AnnouncementModal({ visible, onClose, onDoNotShowToday,
         <div style={{
           marginTop: '16px',
           padding: '10px',
-          background: 'var(--color-warning-bg)',
+          background: token.colorWarningBg,
           borderRadius: '8px',
-          border: '1px solid var(--color-warning-border)',
+          border: `1px solid ${token.colorWarningBorder}`,
           fontSize: '13px',
-          color: 'var(--color-warning)',
+          color: token.colorWarning,
         }}>
           💡 提示：选择"今日内不再展示"当天不再显示，选择"永不再展示"将永久隐藏此公告
         </div>