style:1.重构整个项目的主题颜色，样式风格采用中国风元素 2.优化更新日志逻辑，不再间隔1h自动刷新过于频繁触发403响应

frontend/src/components/AIProjectGenerator.tsx

@@ -748,10 +748,10 @@ export const AIProjectGenerator: React.FC<AIProjectGeneratorProps> = ({
 
   // 获取步骤状态图标和颜色
   const getStepStatus = (step: GenerationStep) => {
-    if (step === 'completed') return { icon: <CheckCircleOutlined />, color: '#52c41a' };
+    if (step === 'completed') return { icon: <CheckCircleOutlined />, color: 'var(--color-success)' };
-    if (step === 'processing') return { icon: <LoadingOutlined />, color: '#1890ff' };
+    if (step === 'processing') return { icon: <LoadingOutlined />, color: 'var(--color-primary)' };
-    if (step === 'error') return { icon: '✗', color: '#ff4d4f' };
+    if (step === 'error') return { icon: '✗', color: 'var(--color-error)' };
-    return { icon: '○', color: '#d9d9d9' };
+    return { icon: '○', color: 'var(--color-text-quaternary)' };
   };
 
   const hasError = generationSteps.worldBuilding === 'error' ||
@@ -770,7 +770,7 @@ export const AIProjectGenerator: React.FC<AIProjectGeneratorProps> = ({
         level={isMobile ? 4 : 3}
         style={{
           marginBottom: 32,
-          color: '#fff',
+          color: 'var(--color-text-primary)',
           wordBreak: 'break-word',
           whiteSpace: 'normal',
           overflowWrap: 'break-word'
@@ -784,8 +784,8 @@ export const AIProjectGenerator: React.FC<AIProjectGeneratorProps> = ({
           percent={progress}
           status={hasError ? 'exception' : (progress === 100 ? 'success' : 'active')}
           strokeColor={{
-            '0%': '#667eea',
+            '0%': 'var(--color-primary)',
-            '100%': '#764ba2',
+            '100%': 'var(--color-primary-active)',
           }}
           style={{ marginBottom: 24 }}
         />
@@ -794,7 +794,7 @@ export const AIProjectGenerator: React.FC<AIProjectGeneratorProps> = ({
           style={{
             fontSize: isMobile ? 14 : 16,
             marginBottom: 32,
-            color: hasError ? '#ff4d4f' : '#666',
+            color: hasError ? 'var(--color-error)' : 'var(--color-text-secondary)',
             wordBreak: 'break-word',
             whiteSpace: 'normal',
             overflowWrap: 'break-word'
@@ -808,18 +808,18 @@ export const AIProjectGenerator: React.FC<AIProjectGeneratorProps> = ({
             size="small"
             style={{
               marginBottom: 24,
-              background: '#fff2f0',
+              background: 'var(--color-error-bg)',
-              borderColor: '#ffccc7',
+              borderColor: 'var(--color-error-border)',
               textAlign: 'left',
               maxWidth: '100%',
               overflow: 'hidden'
             }}
           >
-            <Text strong style={{ color: '#ff4d4f' }}>错误详情：</Text>
+            <Text strong style={{ color: 'var(--color-error)' }}>错误详情：</Text>
             <br />
             <Text
               style={{
-                color: '#666',
+                color: 'var(--color-text-secondary)',
                 fontSize: 14,
                 wordBreak: 'break-word',
                 whiteSpace: 'normal',
@@ -855,9 +855,9 @@ export const AIProjectGenerator: React.FC<AIProjectGeneratorProps> = ({
                   alignItems: 'center',
                   justifyContent: 'space-between',
                   padding: isMobile ? '10px 12px' : '12px 20px',
-                  background: step === 'processing' ? '#f0f5ff' : (step === 'error' ? '#fff2f0' : '#fafafa'),
+                  background: step === 'processing' ? 'var(--color-info-bg)' : (step === 'error' ? 'var(--color-error-bg)' : 'var(--color-bg-layout)'),
                   borderRadius: 8,
-                  border: `1px solid ${step === 'processing' ? '#d6e4ff' : (step === 'error' ? '#ffccc7' : '#f0f0f0')}`,
+                  border: `1px solid ${step === 'processing' ? 'var(--color-info-border)' : (step === 'error' ? 'var(--color-error-border)' : 'var(--color-border-secondary)')}`,
                   gap: '8px',
                   maxWidth: '100%',
                   overflow: 'hidden'
@@ -894,7 +894,7 @@ export const AIProjectGenerator: React.FC<AIProjectGeneratorProps> = ({
       <Paragraph
         type="secondary"
         style={{
-          color: '#fff',
+          color: 'var(--color-text-secondary)',
           opacity: 0.9,
           wordBreak: 'break-word',
           whiteSpace: 'normal',

frontend/src/components/AnnouncementModal.tsx

@@ -56,7 +56,7 @@ export default function AnnouncementModal({ visible, onClose, onDoNotShowToday,
         <div style={{
           marginBottom: '16px',
           fontSize: '16px',
-          color: '#666',
+          color: 'var(--color-text-secondary)',
           lineHeight: '1.6',
         }}>
           <p>👋 欢迎加入我们的交流群！</p>
@@ -72,7 +72,7 @@ export default function AnnouncementModal({ visible, onClose, onDoNotShowToday,
             <li>🐛 反馈问题和建议</li>
             <li>📚 分享创作经验和灵感</li>
           </ul>
-          <p style={{ fontWeight: 600, color: '#333', marginBottom: '16px' }}>
+          <p style={{ fontWeight: 600, color: 'var(--color-text-primary)', marginBottom: '16px' }}>
             扫描下方二维码加入交流群：
           </p>
         </div>
@@ -83,7 +83,7 @@ export default function AnnouncementModal({ visible, onClose, onDoNotShowToday,
           alignItems: 'flex-start',
           gap: '24px',
           padding: '20px',
-          background: '#f5f5f5',
+          background: 'var(--color-bg-layout)',
           borderRadius: '8px',
           flexWrap: 'wrap',
         }}>
@@ -94,7 +94,7 @@ export default function AnnouncementModal({ visible, onClose, onDoNotShowToday,
             alignItems: 'center',
             minWidth: '280px',
           }}>
-            <p style={{ fontWeight: 600, color: '#333', marginBottom: '12px', fontSize: '15px' }}>
+            <p style={{ fontWeight: 600, color: 'var(--color-text-primary)', marginBottom: '12px', fontSize: '15px' }}>
               QQ交流群
             </p>
             {!qqImageError ? (
@@ -102,7 +102,7 @@ export default function AnnouncementModal({ visible, onClose, onDoNotShowToday,
                 display: 'flex',
                 justifyContent: 'center',
                 alignItems: 'center',
-                background: '#fff',
+                background: 'var(--color-bg-container)',
                 borderRadius: '8px',
                 padding: '8px',
                 boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
@@ -128,7 +128,7 @@ export default function AnnouncementModal({ visible, onClose, onDoNotShowToday,
                 display: 'flex',
                 justifyContent: 'center',
                 alignItems: 'center',
-                background: '#fff',
+                background: 'var(--color-bg-container)',
                 borderRadius: '8px',
                 color: '#999',
               }}>
@@ -144,7 +144,7 @@ export default function AnnouncementModal({ visible, onClose, onDoNotShowToday,
             alignItems: 'center',
             minWidth: '280px',
           }}>
-            <p style={{ fontWeight: 600, color: '#333', marginBottom: '12px', fontSize: '15px' }}>
+            <p style={{ fontWeight: 600, color: 'var(--color-text-primary)', marginBottom: '12px', fontSize: '15px' }}>
               微信交流群
             </p>
             {!wxImageError ? (
@@ -152,7 +152,7 @@ export default function AnnouncementModal({ visible, onClose, onDoNotShowToday,
                 display: 'flex',
                 justifyContent: 'center',
                 alignItems: 'center',
-                background: '#fff',
+                background: 'var(--color-bg-container)',
                 borderRadius: '8px',
                 padding: '8px',
                 boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
@@ -178,7 +178,7 @@ export default function AnnouncementModal({ visible, onClose, onDoNotShowToday,
                 display: 'flex',
                 justifyContent: 'center',
                 alignItems: 'center',
-                background: '#fff',
+                background: 'var(--color-bg-container)',
                 borderRadius: '8px',
                 color: '#999',
               }}>
@@ -191,11 +191,11 @@ export default function AnnouncementModal({ visible, onClose, onDoNotShowToday,
         <div style={{
           marginTop: '20px',
           padding: '12px',
-          background: '#fff7e6',
+          background: 'var(--color-warning-bg)',
           borderRadius: '8px',
-          border: '1px solid #ffd591',
+          border: '1px solid var(--color-warning-border)',
           fontSize: '14px',
-          color: '#ad6800',
+          color: 'var(--color-warning)',
         }}>
           💡 提示：选择"今日内不再展示"当天不再显示，选择"永不再展示"将永久隐藏此公告
         </div>

frontend/src/components/AppFooter.tsx

@@ -46,10 +46,11 @@ export default function AppFooter() {
         right: 0,
         backdropFilter: 'blur(20px) saturate(180%)',
         WebkitBackdropFilter: 'blur(20px) saturate(180%)',
-        borderTop: '1px solid rgba(255, 255, 255, 0.2)',
+        borderTop: '1px solid var(--color-border)',
         padding: isMobile ? '8px 12px' : '10px 16px',
         zIndex: 100,
-        boxShadow: '0 -4px 16px rgba(0, 0, 0, 0.1), 0 -1px 4px rgba(0, 0, 0, 0.06)',
+        boxShadow: 'var(--shadow-card)',
+        backgroundColor: 'rgba(255, 255, 255, 0.8)', // 半透明背景以支持 backdrop-filter
       }}
     >
       <div
@@ -77,29 +78,26 @@ export default function AppFooter() {
                     display: 'flex',
                     alignItems: 'center',
                     gap: 4,
-                    color: '#fff',
+                    color: 'var(--color-primary)',
-                    textShadow: '0 1px 3px rgba(0, 0, 0, 0.3)',
                     cursor: hasUpdate ? 'pointer' : 'default',
                   }}
                 >
-                  <strong style={{ color: '#fff' }}>{VERSION_INFO.projectName}</strong>
+                  <strong style={{ color: 'var(--color-text-primary)' }}>{VERSION_INFO.projectName}</strong>
                   <span>{getVersionString()}</span>
                 </Text>
               </Tooltip>
             </Badge>
-            <Divider type="vertical" style={{ margin: '0 4px', borderColor: 'rgba(255, 255, 255, 0.3)' }} />
+            <Divider type="vertical" style={{ margin: '0 4px', borderColor: 'var(--color-border)' }} />
             <Button
-              type="primary"
+              type="text"
               size="small"
               icon={<GiftOutlined />}
               onClick={() => window.open('https://mumuverse.space:1588/', '_blank')}
               style={{
-                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                color: 'var(--color-text-secondary)',
-                border: 'none',
-                boxShadow: '0 2px 8px rgba(102, 126, 234, 0.4)',
                 fontSize: 11,
                 height: 24,
-                padding: '0 8px',
+                padding: '0 4px',
                 display: 'flex',
                 alignItems: 'center',
                 gap: 4,
@@ -107,7 +105,7 @@ export default function AppFooter() {
             >
               赞助
             </Button>
-            <Divider type="vertical" style={{ margin: '0 4px', borderColor: 'rgba(255, 255, 255, 0.3)' }} />
+            <Divider type="vertical" style={{ margin: '0 4px', borderColor: 'var(--color-border)' }} />
             <Link
               href={VERSION_INFO.githubUrl}
               target="_blank"
@@ -117,8 +115,7 @@ export default function AppFooter() {
                 display: 'flex',
                 alignItems: 'center',
                 gap: 4,
-                color: '#fff',
+                color: 'var(--color-text-secondary)',
-                textShadow: '0 1px 3px rgba(0, 0, 0, 0.3)',
               }}
             >
               <GithubOutlined style={{ fontSize: 12 }} />
@@ -126,8 +123,7 @@ export default function AppFooter() {
             <Text
               style={{
                 fontSize: 10,
-                color: 'rgba(255, 255, 255, 0.8)',
+                color: 'var(--color-text-tertiary)',
-                textShadow: '0 1px 2px rgba(0, 0, 0, 0.3)',
               }}
             >
               <ClockCircleOutlined style={{ fontSize: 10, marginRight: 4 }} />
@@ -139,7 +135,7 @@ export default function AppFooter() {
           <Space
             direction="horizontal"
             size={12}
-            split={<Divider type="vertical" style={{ borderColor: 'rgba(255, 255, 255, 0.3)' }} />}
+            split={<Divider type="vertical" style={{ borderColor: 'var(--color-border)' }} />}
             style={{
               display: 'flex',
               justifyContent: 'center',
@@ -156,8 +152,8 @@ export default function AppFooter() {
                     display: 'flex',
                     alignItems: 'center',
                     gap: 6,
-                    color: '#fff',
+                    color: 'var(--color-text-secondary)',
-                    textShadow: '0 1px 3px rgba(0, 0, 0, 0.3)',
+                    textShadow: 'none',
                     cursor: hasUpdate ? 'pointer' : 'default',
                     transition: 'all 0.3s',
                   }}
@@ -172,7 +168,7 @@ export default function AppFooter() {
                     }
                   }}
                 >
-                  <strong style={{ color: '#fff' }}>{VERSION_INFO.projectName}</strong>
+                  <strong style={{ color: 'var(--color-text-primary)' }}>{VERSION_INFO.projectName}</strong>
                   <span>{getVersionString()}</span>
                 </Text>
               </Tooltip>
@@ -188,8 +184,7 @@ export default function AppFooter() {
                 display: 'flex',
                 alignItems: 'center',
                 gap: 6,
-                color: '#fff',
+                color: 'var(--color-text-secondary)',
-                textShadow: '0 1px 3px rgba(0, 0, 0, 0.3)',
               }}
             >
               <GithubOutlined style={{ fontSize: 13 }} />
@@ -203,8 +198,7 @@ export default function AppFooter() {
               rel="noopener noreferrer"
               style={{
                 fontSize: 12,
-                color: '#fff',
+                color: 'var(--color-text-secondary)',
-                textShadow: '0 1px 3px rgba(0, 0, 0, 0.3)',
               }}
             >
               LinuxDO 社区
@@ -216,9 +210,9 @@ export default function AppFooter() {
               icon={<GiftOutlined style={{ fontSize: 14 }} />}
               onClick={() => window.open('https://mumuverse.space:1588/', '_blank')}
               style={{
-                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                background: 'var(--color-primary)',
                 border: 'none',
-                boxShadow: '0 4px 12px rgba(102, 126, 234, 0.5)',
+                boxShadow: '0 4px 12px rgba(77, 128, 136, 0.3)',
                 fontSize: 13,
                 height: 32,
                 padding: '0 20px',
@@ -250,8 +244,7 @@ export default function AppFooter() {
                 display: 'flex',
                 alignItems: 'center',
                 gap: 6,
-                color: '#fff',
+                color: 'var(--color-text-secondary)',
-                textShadow: '0 1px 3px rgba(0, 0, 0, 0.3)',
               }}
             >
               <CopyrightOutlined style={{ fontSize: 11 }} />
@@ -265,8 +258,7 @@ export default function AppFooter() {
                 display: 'flex',
                 alignItems: 'center',
                 gap: 4,
-                color: 'rgba(255, 255, 255, 0.9)',
+                color: 'var(--color-text-tertiary)',
-                textShadow: '0 1px 3px rgba(0, 0, 0, 0.3)',
               }}
             >
               <ClockCircleOutlined style={{ fontSize: 12 }} />
@@ -280,12 +272,12 @@ export default function AppFooter() {
                 display: 'flex',
                 alignItems: 'center',
                 gap: 4,
-                color: '#fff',
+                color: 'var(--color-text-secondary)',
-                textShadow: '0 1px 3px rgba(0, 0, 0, 0.3)',
+                textShadow: '0 1px 3px rgba(0, 0, 0, 0.05)',
               }}
             >
               <span>Made with</span>
-              <HeartFilled style={{ color: '#ff4d4f', fontSize: 11 }} />
+              <HeartFilled style={{ color: 'var(--color-error)', fontSize: 11 }} />
               <span>by {VERSION_INFO.author}</span>
             </Text>
           </Space>

frontend/src/components/CardStyles.tsx

@@ -18,7 +18,7 @@ export const cardStyles = {
     // height: 320,
     display: 'flex',
     flexDirection: 'column',
-    borderColor: '#1890ff',
+    borderColor: 'var(--color-info)',
     borderRadius: 12,
   } as CSSProperties,
 
@@ -27,19 +27,20 @@ export const cardStyles = {
     // height: 320,
     display: 'flex',
     flexDirection: 'column',
-    borderColor: '#52c41a',
+    borderColor: 'var(--color-success)',
-    backgroundColor: '#f6ffed',
+    backgroundColor: 'var(--color-bg-base)', // 使用柔和的背景色
     borderRadius: 12,
   } as CSSProperties,
 
-  // 项目卡片样式
+  // 项目卡片样式 - 现代化设计
   project: {
     height: '100%',
-    borderRadius: 16,
+    borderRadius: 20,
     overflow: 'hidden',
-    background: '#fff',
+    background: 'var(--color-bg-container)',
-    boxShadow: '0 4px 16px rgba(0, 0, 0, 0.08)',
+    boxShadow: '0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04)',
-    transition: 'all 0.3s ease',
+    transition: 'all 0.35s cubic-bezier(0.4, 0, 0.2, 1)',
+    border: '1px solid rgba(0, 0, 0, 0.04)',
   } as CSSProperties,
 
   // 卡片内容区域样式
@@ -73,17 +74,17 @@ export const cardStyles = {
   } as CSSProperties),
 };
 
-// 卡片悬浮动画
+// 卡片悬浮动画 - 增强版
 export const cardHoverHandlers = {
   onMouseEnter: (e: React.MouseEvent<HTMLDivElement>) => {
     const target = e.currentTarget;
-    target.style.transform = 'translateY(-8px)';
+    target.style.transform = 'translateY(-10px) scale(1.01)';
-    target.style.boxShadow = '0 12px 32px rgba(0, 0, 0, 0.15)';
+    target.style.boxShadow = '0 20px 40px rgba(77, 128, 136, 0.2), 0 8px 16px rgba(0, 0, 0, 0.08)';
   },
   onMouseLeave: (e: React.MouseEvent<HTMLDivElement>) => {
     const target = e.currentTarget;
-    target.style.transform = 'translateY(0)';
+    target.style.transform = 'translateY(0) scale(1)';
-    target.style.boxShadow = '0 4px 16px rgba(0, 0, 0, 0.08)';
+    target.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04)';
   },
 };
 

frontend/src/components/ChangelogModal.tsx

@@ -16,10 +16,7 @@ import {
 import {
   fetchChangelog,
   groupChangelogByDate,
-  getCachedChangelog,
   cacheChangelog,
-  markChangelogFetched,
-  shouldFetchChangelog,
   clearChangelogCache,
   type ChangelogEntry,
 } from '../services/changelogService';
@@ -50,33 +47,13 @@ export default function ChangelogModal({ visible, onClose }: ChangelogModalProps
   const [hasMore, setHasMore] = useState(true);
 
   // 加载更新日志
+  // 每次用户打开窗口时才同步获取最新数据，不自动刷新
   const loadChangelog = async (pageNum: number = 1, append: boolean = false) => {
     setLoading(true);
     setError(null);
 
     try {
-      // 如果是第一页，先尝试使用缓存
+      // 每次打开都从网络获取最新数据
-      if (pageNum === 1 && !append) {
-        const cached = getCachedChangelog();
-        if (cached && cached.length > 0) {
-          setChangelog(cached);
-          
-          // 后台刷新
-          if (shouldFetchChangelog()) {
-            fetchChangelog(pageNum, 30)
-              .then(entries => {
-                setChangelog(entries);
-                cacheChangelog(entries);
-                markChangelogFetched();
-              })
-              .catch(console.error);
-          }
-          
-          setLoading(false);
-          return;
-        }
-      }
-
       const entries = await fetchChangelog(pageNum, 30);
 
       if (entries.length === 0) {
@@ -86,10 +63,9 @@ export default function ChangelogModal({ visible, onClose }: ChangelogModalProps
           setChangelog(prev => [...prev, ...entries]);
         } else {
           setChangelog(entries);
-          // 缓存第一页数据
+          // 缓存第一页数据（用于分页加载时的数据持久化）
           if (pageNum === 1) {
             cacheChangelog(entries);
-            markChangelogFetched();
           }
         }
       }
@@ -180,10 +156,10 @@ export default function ChangelogModal({ visible, onClose }: ChangelogModalProps
         <div style={{
           padding: '16px',
           marginBottom: '16px',
-          background: '#fff2e8',
+          background: 'var(--color-error-bg)',
-          border: '1px solid #ffbb96',
+          border: '1px solid var(--color-error-border)',
           borderRadius: '4px',
-          color: '#d4380d',
+          color: 'var(--color-error)',
         }}>
           {error}
         </div>
@@ -205,10 +181,10 @@ export default function ChangelogModal({ visible, onClose }: ChangelogModalProps
                 <div style={{
                   fontSize: '16px',
                   fontWeight: 600,
-                  color: '#1890ff',
+                  color: 'var(--color-primary)',
                   marginBottom: '16px',
                   paddingBottom: '8px',
-                  borderBottom: '2px solid #e8e8e8',
+                  borderBottom: '2px solid var(--color-border-secondary)',
                 }}>
                   <ClockCircleOutlined style={{ marginRight: '8px' }} />
                   {formatDate(date)}
@@ -226,8 +202,8 @@ export default function ChangelogModal({ visible, onClose }: ChangelogModalProps
                             width: '24px',
                             height: '24px',
                             borderRadius: '50%',
-                            background: '#fff',
+                            background: 'var(--color-bg-container)',
-                            border: `2px solid ${config.color === 'default' ? '#d9d9d9' : config.color}`,
+                            border: `2px solid ${config.color === 'default' ? 'var(--color-border)' : config.color}`,
                             display: 'flex',
                             alignItems: 'center',
                             justifyContent: 'center',
@@ -245,7 +221,7 @@ export default function ChangelogModal({ visible, onClose }: ChangelogModalProps
                             {entry.scope && (
                               <Tag color="blue">{entry.scope}</Tag>
                             )}
-                            <span style={{ color: '#999', fontSize: '12px' }}>
+                            <span style={{ color: 'var(--color-text-tertiary)', fontSize: '12px' }}>
                               {formatTime(entry.date)}
                             </span>
                           </Space>
@@ -254,7 +230,7 @@ export default function ChangelogModal({ visible, onClose }: ChangelogModalProps
                             marginTop: '8px',
                             fontSize: '14px',
                             lineHeight: '1.6',
-                            color: '#333',
+                            color: 'var(--color-text-primary)',
                           }}>
                             {entry.message}
                           </div>
@@ -263,7 +239,7 @@ export default function ChangelogModal({ visible, onClose }: ChangelogModalProps
                             {entry.author.avatar && (
                               <Avatar size="small" src={entry.author.avatar} />
                             )}
-                            <span style={{ color: '#666', fontSize: '13px' }}>
+                            <span style={{ color: 'var(--color-text-secondary)', fontSize: '13px' }}>
                               {entry.author.username || entry.author.name}
                             </span>
                             <a
@@ -284,7 +260,8 @@ export default function ChangelogModal({ visible, onClose }: ChangelogModalProps
             );
           })}
 
-          {hasMore && (
+          {
+            hasMore && (
               <div style={{ textAlign: 'center', marginTop: '24px' }}>
                 <Button
                   type="default"
@@ -294,31 +271,34 @@ export default function ChangelogModal({ visible, onClose }: ChangelogModalProps
                   加载更多
                 </Button>
               </div>
-          )}
+            )
+          }
 
-          {!hasMore && changelog.length > 0 && (
+          {
+            !hasMore && changelog.length > 0 && (
               <div style={{
                 textAlign: 'center',
-              color: '#999',
+                color: 'var(--color-text-tertiary)',
                 padding: '16px 0',
                 fontSize: '14px',
               }}>
                 已显示所有更新日志
               </div>
-          )}
+            )
+          }
         </>
       )}
 
       <div style={{
         marginTop: '24px',
         padding: '12px',
-        background: '#f0f5ff',
+        background: 'var(--color-info-bg)',
         borderRadius: '4px',
-        border: '1px solid #adc6ff',
+        border: '1px solid var(--color-info-border)',
         fontSize: '13px',
-        color: '#1d39c4',
+        color: 'var(--color-primary)',
       }}>
-        💡 提示：更新日志每小时自动刷新一次，数据来源于 GitHub 提交历史
+        💡 提示：每次打开窗口时自动获取最新更新日志，数据来源于 GitHub 提交历史
       </div>
     </Modal >
   );

frontend/src/components/ChapterAnalysis.tsx

@@ -191,13 +191,13 @@ export default function ChapterAnalysis({ chapterId, visible, onClose }: Chapter
 
     switch (task.status) {
       case 'pending':
-        return <ClockCircleOutlined style={{ color: '#faad14' }} />;
+        return <ClockCircleOutlined style={{ color: 'var(--color-warning)' }} />;
       case 'running':
         return <Spin />;
       case 'completed':
-        return <CheckCircleOutlined style={{ color: '#52c41a' }} />;
+        return <CheckCircleOutlined style={{ color: 'var(--color-success)' }} />;
       case 'failed':
-        return <CloseCircleOutlined style={{ color: '#ff4d4f' }} />;
+        return <CloseCircleOutlined style={{ color: 'var(--color-error)' }} />;
       default:
         return null;
     }
@@ -225,7 +225,7 @@ export default function ChapterAnalysis({ chapterId, visible, onClose }: Chapter
             fontSize: 20,
             fontWeight: 'bold',
             marginTop: 16,
-            color: task.status === 'failed' ? '#ff4d4f' : '#262626'
+            color: task.status === 'failed' ? 'var(--color-error)' : 'var(--color-text-primary)'
           }}>
             {task.status === 'pending' && '等待分析...'}
             {task.status === 'running' && 'AI正在分析中...'}
@@ -241,7 +241,7 @@ export default function ChapterAnalysis({ chapterId, visible, onClose }: Chapter
         }}>
           <div style={{
             height: 12,
-            background: '#f0f0f0',
+            background: 'var(--color-bg-layout)',
             borderRadius: 6,
             overflow: 'hidden',
             marginBottom: 12
@@ -249,10 +249,10 @@ export default function ChapterAnalysis({ chapterId, visible, onClose }: Chapter
             <div style={{
               height: '100%',
               background: task.status === 'failed'
-                ? 'linear-gradient(90deg, #ff4d4f 0%, #ff7875 100%)'
+                ? 'var(--color-error)'
                 : task.progress === 100
-                  ? 'linear-gradient(90deg, #52c41a 0%, #73d13d 100%)'
+                  ? 'var(--color-success)'
-                  : 'linear-gradient(90deg, #1890ff 0%, #40a9ff 100%)',
+                  : 'var(--color-primary)',
               width: `${task.progress}%`,
               transition: 'all 0.3s ease',
               borderRadius: 6,
@@ -267,8 +267,8 @@ export default function ChapterAnalysis({ chapterId, visible, onClose }: Chapter
             textAlign: 'center',
             fontSize: 32,
             fontWeight: 'bold',
-            color: task.status === 'failed' ? '#ff4d4f' :
+            color: task.status === 'failed' ? 'var(--color-error)' :
-                   task.progress === 100 ? '#52c41a' : '#1890ff',
+              task.progress === 100 ? 'var(--color-success)' : 'var(--color-primary)',
             marginBottom: 8
           }}>
             {task.progress}%
@@ -279,7 +279,7 @@ export default function ChapterAnalysis({ chapterId, visible, onClose }: Chapter
         <div style={{
           textAlign: 'center',
           fontSize: 16,
-          color: '#595959',
+          color: 'var(--color-text-secondary)',
           minHeight: 24,
           marginBottom: 16
         }}>
@@ -307,7 +307,7 @@ export default function ChapterAnalysis({ chapterId, visible, onClose }: Chapter
           <div style={{
             textAlign: 'center',
             fontSize: 13,
-            color: '#8c8c8c',
+            color: 'var(--color-text-tertiary)',
             marginTop: 16
           }}>
             分析过程需要一定时间，请耐心等待
@@ -374,7 +374,7 @@ export default function ChapterAnalysis({ chapterId, visible, onClose }: Chapter
                         title="整体质量"
                         value={analysis_data.overall_quality_score || 0}
                         suffix="/ 10"
-                        valueStyle={{ color: '#3f8600' }}
+                        valueStyle={{ color: 'var(--color-success)' }}
                       />
                     </Col>
                     <Col span={isMobile ? 12 : 6}>

frontend/src/components/ChapterContentComparison.tsx

@@ -156,7 +156,7 @@ const ChapterContentComparison: React.FC<ChapterContentComparisonProps> = ({
               title="字数变化"
               value={wordCountDiff}
               suffix="字"
-              valueStyle={{ color: wordCountDiff > 0 ? '#3f8600' : '#cf1322' }}
+              valueStyle={{ color: wordCountDiff > 0 ? 'var(--color-success)' : 'var(--color-error)' }}
               prefix={wordCountDiff > 0 ? '+' : ''}
             />
           </Col>
@@ -165,7 +165,7 @@ const ChapterContentComparison: React.FC<ChapterContentComparisonProps> = ({
               title="变化比例"
               value={wordCountDiffPercent}
               suffix="%"
-              valueStyle={{ color: Math.abs(parseFloat(wordCountDiffPercent)) < 10 ? '#1890ff' : '#faad14' }}
+              valueStyle={{ color: Math.abs(parseFloat(wordCountDiffPercent)) < 10 ? 'var(--color-primary)' : 'var(--color-warning)' }}
               prefix={wordCountDiff > 0 ? '+' : ''}
             />
           </Col>
@@ -176,7 +176,7 @@ const ChapterContentComparison: React.FC<ChapterContentComparisonProps> = ({
       <div style={{
         maxHeight: 'calc(90vh - 300px)',
         overflow: 'auto',
-        border: '1px solid #d9d9d9',
+        border: '1px solid var(--color-border)',
         borderRadius: 4
       }}>
         <ReactDiffViewer
@@ -190,19 +190,19 @@ const ChapterContentComparison: React.FC<ChapterContentComparisonProps> = ({
           styles={{
             variables: {
               light: {
-                diffViewerBackground: '#fff',
+                diffViewerBackground: '#fff', // Keep white for diff viewer readability
-                addedBackground: '#e6ffed',
+                addedBackground: 'var(--color-success-bg)',
-                addedColor: '#24292e',
+                addedColor: 'var(--color-text-primary)',
-                removedBackground: '#ffeef0',
+                removedBackground: 'var(--color-error-bg)',
-                removedColor: '#24292e',
+                removedColor: 'var(--color-text-primary)',
-                wordAddedBackground: '#acf2bd',
+                wordAddedBackground: 'var(--color-success-border)',
-                wordRemovedBackground: '#fdb8c0',
+                wordRemovedBackground: 'var(--color-error-border)',
-                addedGutterBackground: '#cdffd8',
+                addedGutterBackground: 'var(--color-success-bg)',
-                removedGutterBackground: '#ffdce0',
+                removedGutterBackground: 'var(--color-error-bg)',
-                gutterBackground: '#f6f8fa',
+                gutterBackground: 'var(--color-bg-layout)',
-                gutterBackgroundDark: '#f3f4f6',
+                gutterBackgroundDark: 'var(--color-bg-container)',
-                highlightBackground: '#fffbdd',
+                highlightBackground: 'var(--color-warning-bg)',
-                highlightGutterBackground: '#fff5b1',
+                highlightGutterBackground: 'var(--color-warning-border)',
               },
             },
             line: {

frontend/src/components/SSELoadingOverlay.tsx

@@ -42,13 +42,13 @@ export const SSELoadingOverlay: React.FC<SSELoadingOverlayProps> = ({
           marginBottom: 24
         }}>
           <Spin
-            indicator={<LoadingOutlined style={{ fontSize: 48, color: '#1890ff' }} spin />} 
+            indicator={<LoadingOutlined style={{ fontSize: 48, color: 'var(--color-primary)' }} spin />}
           />
           <div style={{
             fontSize: 20,
             fontWeight: 'bold',
             marginTop: 16,
-            color: '#262626'
+            color: 'var(--color-text-primary)'
           }}>
             AI生成中...
           </div>
@@ -60,7 +60,7 @@ export const SSELoadingOverlay: React.FC<SSELoadingOverlayProps> = ({
         }}>
           <div style={{
             height: 12,
-            background: '#f0f0f0',
+            background: 'var(--color-bg-layout)',
             borderRadius: 6,
             overflow: 'hidden',
             marginBottom: 12
@@ -68,12 +68,12 @@ export const SSELoadingOverlay: React.FC<SSELoadingOverlayProps> = ({
             <div style={{
               height: '100%',
               background: progress === 100
-                ? 'linear-gradient(90deg, #52c41a 0%, #73d13d 100%)'
+                ? 'linear-gradient(90deg, var(--color-success) 0%, var(--color-success-active) 100%)'
-                : 'linear-gradient(90deg, #1890ff 0%, #40a9ff 100%)',
+                : 'linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-active) 100%)',
               width: `${progress}%`,
               transition: 'all 0.3s ease',
               borderRadius: 6,
-              boxShadow: progress > 0 ? '0 0 10px rgba(24, 144, 255, 0.3)' : 'none'
+              boxShadow: progress > 0 ? 'var(--shadow-card)' : 'none'
             }} />
           </div>
 
@@ -82,7 +82,7 @@ export const SSELoadingOverlay: React.FC<SSELoadingOverlayProps> = ({
             textAlign: 'center',
             fontSize: 32,
             fontWeight: 'bold',
-            color: progress === 100 ? '#52c41a' : '#1890ff',
+            color: progress === 100 ? 'var(--color-success)' : 'var(--color-primary)',
             marginBottom: 8
           }}>
             {progress}%

frontend/src/components/SSEProgressModal.tsx

@@ -53,13 +53,13 @@ export const SSEProgressModal: React.FC<SSEProgressModalProps> = ({
             marginBottom: 24
           }}>
             <Spin
-              indicator={<LoadingOutlined style={{ fontSize: 48, color: '#1890ff' }} spin />} 
+              indicator={<LoadingOutlined style={{ fontSize: 48, color: 'var(--color-primary)' }} spin />}
             />
             <div style={{
               fontSize: 20,
               fontWeight: 'bold',
               marginTop: 16,
-              color: '#262626'
+              color: 'var(--color-text-primary)'
             }}>
               {title}
             </div>
@@ -72,7 +72,7 @@ export const SSEProgressModal: React.FC<SSEProgressModalProps> = ({
         }}>
           <div style={{
             height: 12,
-            background: '#f0f0f0',
+            background: 'var(--color-bg-layout)',
             borderRadius: 6,
             overflow: 'hidden',
             marginBottom: showPercentage ? 12 : 0
@@ -80,12 +80,12 @@ export const SSEProgressModal: React.FC<SSEProgressModalProps> = ({
             <div style={{
               height: '100%',
               background: progress === 100
-                ? 'linear-gradient(90deg, #52c41a 0%, #73d13d 100%)'
+                ? 'linear-gradient(90deg, var(--color-success) 0%, var(--color-success-active) 100%)'
-                : 'linear-gradient(90deg, #1890ff 0%, #40a9ff 100%)',
+                : 'linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-active) 100%)',
               width: `${progress}%`,
               transition: 'all 0.3s ease',
               borderRadius: 6,
-              boxShadow: progress > 0 ? '0 0 10px rgba(24, 144, 255, 0.3)' : 'none'
+              boxShadow: progress > 0 ? 'var(--shadow-card)' : 'none'
             }} />
           </div>
 
@@ -95,7 +95,7 @@ export const SSEProgressModal: React.FC<SSEProgressModalProps> = ({
               textAlign: 'center',
               fontSize: 32,
               fontWeight: 'bold',
-              color: progress === 100 ? '#52c41a' : '#1890ff',
+              color: progress === 100 ? 'var(--color-success)' : 'var(--color-primary)',
               marginBottom: 8
             }}>
               {progress}%
@@ -107,7 +107,7 @@ export const SSEProgressModal: React.FC<SSEProgressModalProps> = ({
         <div style={{
           textAlign: 'center',
           fontSize: 16,
-          color: '#595959',
+          color: 'var(--color-text-secondary)',
           minHeight: 24,
           padding: '0 20px',
           marginBottom: 16
@@ -119,7 +119,7 @@ export const SSEProgressModal: React.FC<SSEProgressModalProps> = ({
         <div style={{
           textAlign: 'center',
           fontSize: 13,
-          color: '#8c8c8c',
+          color: 'var(--color-text-tertiary)',
           marginBottom: onCancel ? 16 : 0
         }}>
           请勿关闭页面，生成过程需要一定时间

frontend/src/components/UserMenu.tsx

@@ -122,23 +122,23 @@ export default function UserMenu() {
             alignItems: 'center',
             gap: 12,
             padding: '8px 16px',
-            background: 'rgba(255, 255, 255, 0.95)',
+            background: 'rgba(255, 255, 255, 0.6)', // 保持半透明以配合 Backdrop
             backdropFilter: 'blur(10px)',
             WebkitBackdropFilter: 'blur(10px)',
             borderRadius: 24,
-            border: '1px solid rgba(102, 126, 234, 0.2)',
+            border: '1px solid var(--color-border)',
             transition: 'all 0.3s ease',
-            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+            boxShadow: 'var(--shadow-card)',
           }}
           onMouseEnter={(e) => {
-            e.currentTarget.style.background = 'rgba(255, 255, 255, 1)';
+            e.currentTarget.style.background = 'var(--color-bg-container)'; // 悬浮时变实
             e.currentTarget.style.transform = 'translateY(-2px)';
-            e.currentTarget.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.3)';
+            e.currentTarget.style.boxShadow = 'var(--shadow-elevated)';
           }}
           onMouseLeave={(e) => {
-            e.currentTarget.style.background = 'rgba(255, 255, 255, 0.95)';
+            e.currentTarget.style.background = 'rgba(255, 255, 255, 0.6)';
             e.currentTarget.style.transform = 'translateY(0)';
-            e.currentTarget.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.1)';
+            e.currentTarget.style.boxShadow = 'var(--shadow-card)';
           }}
         >
           <div style={{ position: 'relative' }}>
@@ -147,9 +147,9 @@ export default function UserMenu() {
               icon={<UserOutlined />}
               size={40}
               style={{
-                backgroundColor: '#1890ff',
+                backgroundColor: 'var(--color-primary)',
                 border: '3px solid #fff',
-                boxShadow: '0 2px 8px rgba(102, 126, 234, 0.3)',
+                boxShadow: 'var(--shadow-card)',
               }}
             />
             {currentUser.is_admin && (
@@ -173,14 +173,14 @@ export default function UserMenu() {
           </div>
           <Space direction="vertical" size={0} style={{ display: window.innerWidth <= 768 ? 'none' : 'flex' }}>
             <Text strong style={{
-              color: '#262626',
+              color: 'var(--color-text-primary)',
               fontSize: 14,
               lineHeight: '20px',
             }}>
               {currentUser.display_name || currentUser.username}
             </Text>
             <Text style={{
-              color: '#8c8c8c',
+              color: 'var(--color-text-secondary)',
               fontSize: 12,
               lineHeight: '18px',
             }}>

frontend/src/index.css

@@ -1,11 +1,63 @@
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  /* --- 中国风配色方案 (Chinese Style Palette) --- */
-  line-height: 1.5;
+
+  /* 主色调：天青 (Cerulean / Azure) - 类似汝窑 */
+  --color-primary: #4D8088;
+  --color-primary-hover: #5F9EA8;
+  --color-primary-active: #3A666C;
+
+  /* 辅助色 */
+  --color-success: #52C41A;
+  --color-warning: #FAAD14;
+  --color-error: #FF4D4F;
+  --color-info: #1890FF;
+
+  /* 功能色背景/边框 */
+  --color-success-bg: #F6FFED;
+  --color-success-border: #B7EB8F;
+  --color-warning-bg: #FFFBE6;
+  --color-warning-border: #FFE58F;
+  --color-error-bg: #FFF2F0;
+  --color-error-border: #FFCCC7;
+  --color-info-bg: #E6F7FF;
+  --color-info-border: #91D5FF;
+
+  /* 背景色 */
+  --color-bg-base: #F8F6F1;
+  /* 米汤色 (Rice Soup / Cream) - 用于页面背景 */
+  --color-bg-container: #FFFFFF;
+  /* 纯白 - 用于卡片/容器 */
+  --color-bg-layout: #F0F2F5;
+  --color-bg-spotlight: #3A666C;
+  --color-bg-mask: rgba(0, 0, 0, 0.45);
+
+  /* 文本色 */
+  --color-text-base: #2B2B2B;
+  /* 墨色 (Ink) */
+  --color-text-primary: #2B2B2B;
+  --color-text-secondary: #595959;
+  /* 此时 (Secondary Text) */
+  --color-text-tertiary: #8C8C8C;
+  --color-text-quaternary: #BFBFBF;
+
+  /* 边框色 */
+  --color-border: #D9D9D9;
+  --color-border-secondary: #F0F0F0;
+
+  /* 阴影 */
+  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
+  --shadow-elevated: 0 8px 24px rgba(77, 128, 136, 0.15);
+  /* 带一点主色调的阴影 */
+  --shadow-primary: 0 4px 16px rgba(77, 128, 136, 0.25);
+  --shadow-header: 0 2px 8px rgba(0, 0, 0, 0.05);
+
+  font-family: "PingFang SC", "Microsoft YaHei", "Heiti SC", Inter, system-ui, sans-serif;
+  line-height: 1.5715;
   font-weight: 400;
 
-  color-scheme: light dark;
+  color-scheme: light;
-  color: rgba(0, 0, 0, 0.87);
+  color: var(--color-text-base);
-  background-color: #f0f2f5;
+  background-color: var(--color-bg-base);
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -72,7 +124,9 @@ body {
   }
 
   /* 移动端优化触摸区域 */
-  button, a, [role="button"] {
+  button,
+  a,
+  [role="button"] {
     min-height: 44px;
     min-width: 44px;
   }
@@ -95,7 +149,9 @@ body {
 
 /* 移动端禁止长按选择 */
 @media (max-width: 768px) {
-  img, button {
+
+  img,
+  button {
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
@@ -131,3 +187,216 @@ body {
 .ant-tabs-dropdown {
   z-index: 2000 !important;
 }
+
+/* ===== 现代化侧边栏样式 (Modern Sidebar Styles) ===== */
+
+/* 侧边栏容器 - 毛玻璃效果 */
+.modern-sider {
+  background: linear-gradient(180deg,
+      rgba(255, 255, 255, 0.95) 0%,
+      rgba(248, 246, 241, 0.98) 100%) !important;
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-right: 1px solid rgba(77, 128, 136, 0.12);
+  box-shadow:
+    4px 0 24px rgba(77, 128, 136, 0.08),
+    1px 0 0 rgba(255, 255, 255, 0.8) inset;
+}
+
+/* 侧边栏菜单整体样式 */
+.modern-sider .ant-menu {
+  background: transparent !important;
+  border-right: none !important;
+}
+
+/* 菜单项基础样式 */
+.modern-sider .ant-menu-item {
+  margin: 6px 12px !important;
+  padding: 0 16px !important;
+  border-radius: 12px !important;
+  height: 48px !important;
+  line-height: 48px !important;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  position: relative;
+  overflow: hidden;
+}
+
+/* 折叠状态下的菜单项 */
+.modern-sider.ant-layout-sider-collapsed .ant-menu-item {
+  margin: 6px 8px !important;
+  padding: 0 !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 菜单项悬停效果 - 仅未选中项 */
+.modern-sider .ant-menu-item:not(.ant-menu-item-selected):hover {
+  background: linear-gradient(135deg,
+      rgba(77, 128, 136, 0.15) 0%,
+      rgba(95, 158, 168, 0.22) 100%) !important;
+  transform: translateX(6px);
+  box-shadow:
+    0 2px 8px rgba(77, 128, 136, 0.15),
+    inset 0 0 0 1px rgba(77, 128, 136, 0.2);
+}
+
+/* 折叠状态悬停效果 - 仅未选中项 */
+.modern-sider.ant-layout-sider-collapsed .ant-menu-item:not(.ant-menu-item-selected):hover {
+  transform: translateX(0) scale(1.08);
+  box-shadow:
+    0 4px 12px rgba(77, 128, 136, 0.2),
+    inset 0 0 0 1px rgba(77, 128, 136, 0.25);
+}
+
+/* 菜单项选中状态 - 增强版 */
+.modern-sider .ant-menu-item-selected {
+  background: linear-gradient(135deg,
+      var(--color-primary) 0%,
+      #5A9BA5 50%,
+      var(--color-primary-hover) 100%) !important;
+  box-shadow:
+    0 6px 20px rgba(77, 128, 136, 0.45),
+    0 3px 8px rgba(77, 128, 136, 0.25),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+/* 选中项悬停 - 微发光效果 */
+.modern-sider .ant-menu-item-selected:hover {
+  transform: translateX(0) !important;
+  box-shadow:
+    0 8px 24px rgba(77, 128, 136, 0.5),
+    0 4px 10px rgba(77, 128, 136, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.25);
+  filter: brightness(1.05);
+}
+
+.modern-sider.ant-layout-sider-collapsed .ant-menu-item-selected:hover {
+  transform: scale(1.05) !important;
+}
+
+/* 选中状态文字和图标颜色 */
+.modern-sider .ant-menu-item-selected,
+.modern-sider .ant-menu-item-selected a,
+.modern-sider .ant-menu-item-selected .anticon {
+  color: #fff !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+}
+
+/* 未选中状态颜色 */
+.modern-sider .ant-menu-item:not(.ant-menu-item-selected),
+.modern-sider .ant-menu-item:not(.ant-menu-item-selected) a {
+  color: var(--color-text-secondary) !important;
+}
+
+.modern-sider .ant-menu-item:not(.ant-menu-item-selected) .anticon {
+  color: var(--color-primary) !important;
+}
+
+/* 菜单项悬停时文字和图标颜色 */
+.modern-sider .ant-menu-item:not(.ant-menu-item-selected):hover,
+.modern-sider .ant-menu-item:not(.ant-menu-item-selected):hover a {
+  color: var(--color-primary-active) !important;
+  font-weight: 600;
+}
+
+.modern-sider .ant-menu-item:not(.ant-menu-item-selected):hover .anticon {
+  color: var(--color-primary-active) !important;
+}
+
+/* 图标样式优化 */
+.modern-sider .ant-menu-item .anticon {
+  font-size: 18px !important;
+  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
+}
+
+.modern-sider.ant-layout-sider-collapsed .ant-menu-item .anticon {
+  font-size: 22px !important;
+}
+
+/* 悬停时图标微动效 */
+.modern-sider .ant-menu-item:not(.ant-menu-item-selected):hover .anticon {
+  transform: scale(1.15);
+}
+
+/* 选中项左侧指示条 */
+.modern-sider .ant-menu-item-selected::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 24px;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 0 4px 4px 0;
+  opacity: 0;
+}
+
+/* 折叠状态隐藏指示条 */
+.modern-sider.ant-layout-sider-collapsed .ant-menu-item-selected::before {
+  display: none;
+}
+
+/* 链接文字样式 */
+.modern-sider .ant-menu-item a {
+  font-weight: 500;
+  letter-spacing: 0.5px;
+  transition: all 0.3s ease;
+}
+
+/* 侧边栏顶部装饰线 */
+.modern-sider::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg,
+      var(--color-primary) 0%,
+      var(--color-primary-hover) 50%,
+      var(--color-primary) 100%);
+  opacity: 0.8;
+}
+
+/* 侧边栏底部渐变遮罩 */
+.modern-sider::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 60px;
+  background: linear-gradient(to top,
+      rgba(248, 246, 241, 0.95) 0%,
+      transparent 100%);
+  pointer-events: none;
+}
+
+/* 菜单项波纹效果 */
+.modern-sider .ant-menu-item::after {
+  display: none !important;
+}
+
+/* 菜单标题样式 (如果有分组) */
+.modern-sider .ant-menu-item-group-title {
+  color: var(--color-text-tertiary) !important;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  padding: 16px 24px 8px !important;
+}
+
+/* Tooltip 样式优化 (折叠状态) */
+.ant-tooltip .ant-tooltip-inner {
+  background: linear-gradient(135deg,
+      var(--color-primary) 0%,
+      var(--color-primary-hover) 100%);
+  border-radius: 8px;
+  padding: 8px 16px;
+  font-weight: 500;
+  box-shadow: 0 4px 12px rgba(77, 128, 136, 0.3);
+}

frontend/src/main.tsx

@@ -8,7 +8,34 @@ import App from './App.tsx'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <ConfigProvider locale={zhCN}>
+    <ConfigProvider
+      locale={zhCN}
+      theme={{
+        token: {
+          colorPrimary: '#4D8088', // 天青
+          colorBgBase: '#F8F6F1', // 米汤色
+          colorTextBase: '#2B2B2B', // 墨色
+          borderRadius: 6,
+          wireframe: false,
+          fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif",
+        },
+        components: {
+          Layout: {
+            bodyBg: '#F8F6F1',
+            headerBg: '#FFFFFF',
+            siderBg: '#FFFFFF',
+          },
+          Card: {
+            colorBgContainer: '#FFFFFF',
+            boxShadowTertiary: '0 4px 12px rgba(0, 0, 0, 0.05)', // 更柔和的阴影
+          },
+          Button: {
+            borderRadius: 6,
+            controlHeight: 36,
+          }
+        }
+      }}
+    >
       <App />
     </ConfigProvider>
   </StrictMode>,

frontend/src/pages/Chapters.tsx

@@ -15,6 +15,7 @@ const { TextArea } = Input;
 
 export default function Chapters() {
   const { currentProject, chapters, setCurrentChapter, setCurrentProject } = useStore();
+  const [modal, contextHolder] = Modal.useModal();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isEditorOpen, setIsEditorOpen] = useState(false);
   const [isContinuing, setIsContinuing] = useState(false);
@@ -433,7 +434,7 @@ export default function Chapters() {
 
     const selectedStyle = writingStyles.find(s => s.id === selectedStyleId);
 
-    const modal = Modal.confirm({
+    const instance = modal.confirm({
       title: 'AI创作章节内容',
       width: 700,
       centered: true,
@@ -455,11 +456,11 @@ export default function Chapters() {
             <div style={{
               marginTop: 16,
               padding: 12,
-              background: '#f0f5ff',
+              background: 'var(--color-info-bg)',
               borderRadius: 4,
-              border: '1px solid #adc6ff'
+              border: '1px solid var(--color-info-border)'
             }}>
-              <div style={{ marginBottom: 8, fontWeight: 500, color: '#1890ff' }}>
+              <div style={{ marginBottom: 8, fontWeight: 500, color: 'var(--color-primary)' }}>
                 📚 将引用的前置章节（共{previousChapters.length}章）：
               </div>
               <div style={{ maxHeight: 150, overflowY: 'auto' }}>
@@ -484,7 +485,7 @@ export default function Chapters() {
       okButtonProps: { danger: true },
       cancelText: '取消',
       onOk: async () => {
-        modal.update({
+        instance.update({
           okButtonProps: { danger: true, loading: true },
           cancelButtonProps: { disabled: true },
           closable: false,
@@ -495,7 +496,7 @@ export default function Chapters() {
         try {
           if (!selectedStyleId) {
             message.error('请先选择写作风格');
-            modal.update({
+            instance.update({
               okButtonProps: { danger: true, loading: false },
               cancelButtonProps: { disabled: false },
               closable: true,
@@ -505,9 +506,9 @@ export default function Chapters() {
             return;
           }
           await handleGenerate();
-          modal.destroy();
+          instance.destroy();
         } catch (error) {
-          modal.update({
+          instance.update({
             okButtonProps: { danger: true, loading: false },
             cancelButtonProps: { disabled: false },
             closable: true,
@@ -579,7 +580,7 @@ export default function Chapters() {
       return;
     }
 
-    Modal.confirm({
+    modal.confirm({
       title: '导出项目章节',
       content: `确定要将《${currentProject.title}》的所有章节导出为TXT文件吗？`,
       centered: true,
@@ -840,7 +841,7 @@ export default function Chapters() {
       ? Math.max(...chapters.map(c => c.chapter_number)) + 1
       : 1;
 
-    Modal.confirm({
+    modal.confirm({
       title: '手动创建章节',
       width: 600,
       centered: true,
@@ -937,7 +938,7 @@ export default function Chapters() {
 
         if (conflictChapter) {
           // 显示冲突提示Modal
-          Modal.confirm({
+          modal.confirm({
             title: '章节序号冲突',
             icon: <InfoCircleOutlined style={{ color: '#ff4d4f' }} />,
             width: 500,
@@ -1074,10 +1075,10 @@ export default function Chapters() {
     try {
       const planData: ExpansionPlanData = JSON.parse(chapter.expansion_plan);
 
-      Modal.info({
+      modal.info({
         title: (
           <Space style={{ flexWrap: 'wrap' }}>
-            <InfoCircleOutlined style={{ color: '#1890ff' }} />
+            <InfoCircleOutlined style={{ color: 'var(--color-primary)' }} />
             <span style={{ wordBreak: 'break-word' }}>第{chapter.chapter_number}章展开规划</span>
           </Space>
         ),
@@ -1366,11 +1367,12 @@ export default function Chapters() {
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+      {contextHolder}
       <div style={{
         position: 'sticky',
         top: 0,
         zIndex: 10,
-        backgroundColor: '#fff',
+        backgroundColor: 'var(--color-bg-container)',
         padding: isMobile ? '12px 0' : '16px 0',
         marginBottom: isMobile ? 12 : 16,
         borderBottom: '1px solid #f0f0f0',
@@ -1486,7 +1488,7 @@ export default function Chapters() {
               >
                 <div style={{ width: '100%' }}>
                   <List.Item.Meta
-                    avatar={!isMobile && <FileTextOutlined style={{ fontSize: 32, color: '#1890ff' }} />}
+                    avatar={!isMobile && <FileTextOutlined style={{ fontSize: 32, color: 'var(--color-primary)' }} />}
                     title={
                       <div style={{
                         display: 'flex',
@@ -1500,7 +1502,7 @@ export default function Chapters() {
                         </span>
                         <Space wrap size={isMobile ? 4 : 8}>
                           <Tag color={getStatusColor(item.status)}>{getStatusText(item.status)}</Tag>
-                          <Badge count={`${item.word_count || 0}字`} style={{ backgroundColor: '#52c41a' }} />
+                          <Badge count={`${item.word_count || 0}字`} style={{ backgroundColor: 'var(--color-success)' }} />
                           {renderAnalysisStatus(item.id)}
                           {!canGenerateChapter(item) && (
                             <Tooltip title={getGenerateDisabledReason(item)}>
@@ -1591,11 +1593,11 @@ export default function Chapters() {
                     </span>
                     <Badge
                       count={`${group.chapters.length} 章`}
-                      style={{ backgroundColor: '#52c41a' }}
+                      style={{ backgroundColor: 'var(--color-success)' }}
                     />
                     <Badge
                       count={`${group.chapters.reduce((sum, ch) => sum + (ch.word_count || 0), 0)} 字`}
-                      style={{ backgroundColor: '#1890ff' }}
+                      style={{ backgroundColor: 'var(--color-primary)' }}
                     />
                   </div>
                 }
@@ -1681,7 +1683,7 @@ export default function Chapters() {
                     >
                       <div style={{ width: '100%' }}>
                         <List.Item.Meta
-                          avatar={!isMobile && <FileTextOutlined style={{ fontSize: 32, color: '#1890ff' }} />}
+                          avatar={!isMobile && <FileTextOutlined style={{ fontSize: 32, color: 'var(--color-primary)' }} />}
                           title={
                             <div style={{
                               display: 'flex',
@@ -1695,7 +1697,7 @@ export default function Chapters() {
                               </span>
                               <Space wrap size={isMobile ? 4 : 8}>
                                 <Tag color={getStatusColor(item.status)}>{getStatusText(item.status)}</Tag>
-                                <Badge count={`${item.word_count || 0}字`} style={{ backgroundColor: '#52c41a' }} />
+                                <Badge count={`${item.word_count || 0}字`} style={{ backgroundColor: 'var(--color-success)' }} />
                                 {renderAnalysisStatus(item.id)}
                                 {!canGenerateChapter(item) && (
                                   <Tooltip title={getGenerateDisabledReason(item)}>
@@ -1708,7 +1710,7 @@ export default function Chapters() {
                                   {item.expansion_plan && (
                                     <Tooltip title="查看展开详情">
                                       <InfoCircleOutlined
-                                        style={{ color: '#1890ff', cursor: 'pointer', fontSize: 16 }}
+                                        style={{ color: 'var(--color-primary)', cursor: 'pointer', fontSize: 16 }}
                                         onClick={(e) => {
                                           e.stopPropagation();
                                           showExpansionPlanModal(item);
@@ -1718,7 +1720,7 @@ export default function Chapters() {
                                   )}
                                   <Tooltip title={item.expansion_plan ? "编辑规划信息" : "创建规划信息"}>
                                     <FormOutlined
-                                      style={{ color: '#52c41a', cursor: 'pointer', fontSize: 16 }}
+                                      style={{ color: 'var(--color-success)', cursor: 'pointer', fontSize: 16 }}
                                       onClick={(e) => {
                                         e.stopPropagation();
                                         handleOpenPlanEditor(item);
@@ -1992,7 +1994,7 @@ export default function Chapters() {
                 <Select.Option value="omniscient">全知视角</Select.Option>
               </Select>
               {temporaryNarrativePerspective && (
-                <div style={{ color: '#52c41a', fontSize: 12, marginTop: 4 }}>
+                <div style={{ color: 'var(--color-success)', fontSize: 12, marginTop: 4 }}>
                   ✓ {getNarrativePerspectiveText(temporaryNarrativePerspective)}
                 </div>
               )}
@@ -2169,7 +2171,7 @@ export default function Chapters() {
         open={batchGenerateVisible}
         onCancel={() => {
           if (batchGenerating) {
-            Modal.confirm({
+            modal.confirm({
               title: '确认取消',
               content: '批量生成正在进行中，确定要取消吗？',
               okText: '确定取消',
@@ -2374,7 +2376,7 @@ export default function Chapters() {
                 danger
                 icon={<StopOutlined />}
                 onClick={() => {
-                  Modal.confirm({
+                  modal.confirm({
                     title: '确认取消',
                     content: '确定要取消批量生成吗？已生成的章节将保留。',
                     okText: '确定取消',
@@ -2409,7 +2411,7 @@ export default function Chapters() {
         }
         title="批量生成章节"
         onCancel={() => {
-          Modal.confirm({
+          modal.confirm({
             title: '确认取消',
             content: '确定要取消批量生成吗？已生成的章节将保留。',
             okText: '确定取消',

frontend/src/pages/Characters.tsx

@@ -40,6 +40,7 @@ export default function Characters() {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentProject?.id]);
+  const [modal, contextHolder] = Modal.useModal();
 
   if (!currentProject) return null;
 
@@ -218,7 +219,7 @@ export default function Characters() {
   };
 
   const showGenerateModal = () => {
-    Modal.confirm({
+    modal.confirm({
       title: 'AI生成角色',
       width: 600,
       centered: true,
@@ -256,7 +257,7 @@ export default function Characters() {
   };
 
   const showGenerateOrgModal = () => {
-    Modal.confirm({
+    modal.confirm({
       title: 'AI生成组织',
       width: 600,
       centered: true,
@@ -306,14 +307,15 @@ export default function Characters() {
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+      {contextHolder}
       <div style={{
         position: 'sticky',
         top: 0,
         zIndex: 10,
-        backgroundColor: '#fff',
+        backgroundColor: 'var(--color-bg-container)',
         padding: isMobile ? '12px 0' : '16px 0',
         marginBottom: isMobile ? 12 : 16,
-        borderBottom: '1px solid #f0f0f0',
+        borderBottom: '1px solid var(--color-border-secondary)',
         display: 'flex',
         flexDirection: isMobile ? 'column' : 'row',
         gap: isMobile ? 12 : 0,
@@ -370,9 +372,9 @@ export default function Characters() {
           position: 'sticky',
           top: isMobile ? 60 : 72,
           zIndex: 9,
-          backgroundColor: '#fff',
+          backgroundColor: 'var(--color-bg-container)',
           paddingBottom: 8,
-          borderBottom: '1px solid #f0f0f0',
+          borderBottom: '1px solid var(--color-border-secondary)',
         }}>
           <Tabs
             activeKey={activeTab}

frontend/src/pages/Inspiration.tsx

@@ -45,6 +45,16 @@ const CACHE_EXPIRY = 24 * 60 * 60 * 1000;
 const Inspiration: React.FC = () => {
   const navigate = useNavigate();
   const [currentStep, setCurrentStep] = useState<Step>('idea');
+  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= 768);
+    };
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
   const [messages, setMessages] = useState<Message[]>([
     {
       type: 'ai',
@@ -697,7 +707,7 @@ const Inspiration: React.FC = () => {
       <Card
         ref={chatContainerRef}
         style={{
-          height: window.innerWidth <= 768 ? 'calc(100vh - 280px)' : 600,
+          height: isMobile ? 'calc(100vh - 280px)' : 600,
           overflowY: 'auto',
           marginBottom: 16,
           boxShadow: '0 8px 24px rgba(0,0,0,0.15)',
@@ -721,16 +731,16 @@ const Inspiration: React.FC = () => {
                 maxWidth: '80%',
                 padding: '12px 16px',
                 borderRadius: 12,
-                background: msg.type === 'ai' ? '#f0f0f0' : '#1890ff',
+                background: msg.type === 'ai' ? 'var(--color-bg-container)' : 'var(--color-primary)',
-                color: msg.type === 'ai' ? '#000' : '#fff',
+                color: msg.type === 'ai' ? 'var(--color-text-primary)' : '#fff',
                 boxShadow: msg.type === 'ai'
-                  ? '0 2px 8px rgba(0,0,0,0.08)'
+                  ? 'var(--shadow-card)'
-                  : '0 2px 8px rgba(24,144,255,0.3)',
+                  : 'var(--shadow-primary)',
               }}>
                 <Paragraph
                   style={{
                     margin: 0,
-                    color: msg.type === 'ai' ? '#000' : '#fff',
+                    color: msg.type === 'ai' ? 'var(--color-text-primary)' : '#fff',
                     whiteSpace: 'pre-wrap'
                   }}
                 >
@@ -752,13 +762,13 @@ const Inspiration: React.FC = () => {
                         style={{
                           cursor: msg.optionsDisabled ? 'not-allowed' : 'pointer',
                           border: msg.isMultiSelect && selectedOptions.includes(option)
-                            ? '2px solid #1890ff'
+                            ? '2px solid var(--color-primary)'
-                            : '1px solid #d9d9d9',
+                            : '1px solid var(--color-border)',
                           background: msg.optionsDisabled
-                            ? '#f5f5f5'
+                            ? 'var(--color-bg-layout)'
                             : msg.isMultiSelect && selectedOptions.includes(option)
-                            ? '#e6f7ff'
+                              ? 'var(--color-bg-spotlight)' // Need to ensure this exists or use safe fallback
-                            : '#fff',
+                              : 'var(--color-bg-container)',
                           opacity: msg.optionsDisabled ? 0.6 : 1,
                           animation: 'floatIn 0.6s ease-out',
                           animationDelay: `${optIndex * 0.1}s`,
@@ -768,7 +778,7 @@ const Inspiration: React.FC = () => {
                         onMouseEnter={(e) => {
                           if (!msg.optionsDisabled) {
                             e.currentTarget.style.transform = 'translateY(-2px) scale(1.02)';
-                            e.currentTarget.style.boxShadow = '0 4px 12px rgba(24,144,255,0.2)';
+                            e.currentTarget.style.boxShadow = 'var(--shadow-elevated)';
                           }
                         }}
                         onMouseLeave={(e) => {
@@ -854,8 +864,7 @@ const Inspiration: React.FC = () => {
   return (
     <div style={{
       minHeight: '100vh',
-      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+      background: 'var(--color-bg-base)',
-      padding: window.innerWidth <= 768 ? '12px' : '24px'
     }}>
       <style>
         {`
@@ -894,53 +903,65 @@ const Inspiration: React.FC = () => {
           }
         `}
       </style>
-      <div style={{ maxWidth: 800, margin: '0 auto' }}>
+
+      {/* 顶部标题栏 - 固定不滚动 */}
       <div style={{
-          marginBottom: window.innerWidth <= 768 ? 12 : 24,
+        position: 'sticky',
-          position: 'relative'
+        top: 0,
+        zIndex: 100,
+        background: 'var(--color-primary)',
+        boxShadow: 'var(--shadow-header)',
+      }}>
+        <div style={{
+          maxWidth: 1200,
+          margin: '0 auto',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          padding: isMobile ? '12px 16px' : '16px 24px',
         }}>
           <Button
             icon={<ArrowLeftOutlined />}
             onClick={handleBack}
-            type="text"
+            size={isMobile ? 'middle' : 'large'}
-            size={window.innerWidth <= 768 ? 'small' : 'middle'}
             style={{
+              background: 'rgba(255,255,255,0.2)',
+              borderColor: 'rgba(255,255,255,0.3)',
               color: '#fff',
-              padding: window.innerWidth <= 768 ? '4px 8px' : '4px 15px',
-              height: window.innerWidth <= 768 ? 32 : 'auto',
-              position: window.innerWidth <= 768 ? 'absolute' : 'static',
-              left: 0,
-              top: 0,
-              zIndex: 1
             }}
           >
-            {window.innerWidth <= 768 ? '返回' : '返回项目列表'}
+            {isMobile ? '返回' : '返回项目列表'}
           </Button>
-          <div style={{
+
-            textAlign: 'center',
+          <div style={{ textAlign: 'center' }}>
-            paddingTop: window.innerWidth <= 768 ? 0 : 0
-          }}>
             <Title
-              level={window.innerWidth <= 768 ? 4 : 2}
+              level={isMobile ? 4 : 2}
               style={{
-                color: '#fff',
                 margin: 0,
-                marginBottom: window.innerWidth <= 768 ? 4 : 8
+                color: '#fff',
+                textShadow: '0 2px 4px rgba(0,0,0,0.1)',
+                lineHeight: 1.2
               }}
             >
               ✨ 灵感模式
             </Title>
             <Text style={{
-              color: '#fff',
+              color: 'rgba(255,255,255,0.85)',
-              display: 'block',
+              fontSize: isMobile ? 12 : 14,
-              fontSize: window.innerWidth <= 768 ? 12 : 14,
-              opacity: 0.9
             }}>
               通过对话快速创建你的小说项目
             </Text>
           </div>
+
+          <div style={{ width: isMobile ? 60 : 120 }}></div>
+        </div>
       </div>
 
+      <div style={{
+        maxWidth: 800,
+        margin: '0 auto',
+        padding: isMobile ? '16px 12px' : '24px 24px',
+      }}>
         {(currentStep === 'idea' || currentStep === 'title' || currentStep === 'description' ||
           currentStep === 'theme' || currentStep === 'genre' || currentStep === 'perspective' ||
           currentStep === 'outline_mode' || currentStep === 'confirm') && renderChat()}
@@ -950,7 +971,7 @@ const Inspiration: React.FC = () => {
             storagePrefix="inspiration"
             onComplete={handleComplete}
             onBack={handleBackToChat}
-            isMobile={window.innerWidth <= 768}
+            isMobile={isMobile}
           />
         )}
       </div>
@@ -959,4 +980,3 @@ const Inspiration: React.FC = () => {
 };
 
 export default Inspiration;
-          

frontend/src/pages/Login.tsx

@@ -96,9 +96,9 @@ export default function Login() {
         justifyContent: 'center',
         alignItems: 'center',
         minHeight: '100vh',
-        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        background: 'var(--color-bg-base)',
       }}>
-        <Spin size="large" style={{ color: '#fff' }} />
+        <Spin size="large" style={{ color: 'var(--color-primary)' }} />
       </div>
     );
   }
@@ -141,10 +141,10 @@ export default function Login() {
             height: 48,
             fontSize: 16,
             fontWeight: 600,
-            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+            background: 'var(--color-primary)',
             border: 'none',
             borderRadius: '12px',
-            boxShadow: '0 4px 16px rgba(102, 126, 234, 0.4)',
+            boxShadow: 'var(--shadow-primary)',
           }}
         >
           登录
@@ -178,19 +178,19 @@ export default function Login() {
           height: 52,
           fontSize: 16,
           fontWeight: 600,
-          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+          background: 'var(--color-primary)',
           border: 'none',
           borderRadius: '12px',
-          boxShadow: '0 4px 16px rgba(102, 126, 234, 0.4)',
+          boxShadow: 'var(--shadow-primary)',
           transition: 'all 0.3s ease',
         }}
         onMouseEnter={(e) => {
           e.currentTarget.style.transform = 'translateY(-2px)';
-          e.currentTarget.style.boxShadow = '0 6px 24px rgba(102, 126, 234, 0.5)';
+          e.currentTarget.style.boxShadow = 'var(--shadow-elevated)';
         }}
         onMouseLeave={(e) => {
           e.currentTarget.style.transform = 'translateY(0)';
-          e.currentTarget.style.boxShadow = '0 4px 16px rgba(102, 126, 234, 0.4)';
+          e.currentTarget.style.boxShadow = 'var(--shadow-primary)';
         }}
       >
         使用 LinuxDO 登录
@@ -228,7 +228,7 @@ export default function Login() {
         justifyContent: 'center',
         alignItems: 'center',
         minHeight: '100vh',
-      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        background: 'var(--color-bg-base)',
         padding: '20px',
         position: 'relative',
         overflow: 'hidden',
@@ -240,7 +240,8 @@ export default function Login() {
           right: '-5%',
           width: '400px',
           height: '400px',
-        background: 'rgba(255, 255, 255, 0.1)',
+          background: 'var(--color-primary)',
+          opacity: 0.1,
           borderRadius: '50%',
           filter: 'blur(60px)',
         }} />
@@ -250,7 +251,8 @@ export default function Login() {
           left: '-5%',
           width: '350px',
           height: '350px',
-        background: 'rgba(255, 255, 255, 0.08)',
+          background: 'var(--color-success)',
+          opacity: 0.08,
           borderRadius: '50%',
           filter: 'blur(60px)',
         }} />
@@ -259,11 +261,11 @@ export default function Login() {
           style={{
             width: '100%',
             maxWidth: 420,
-          background: 'rgba(255, 255, 255, 0.95)',
+            background: 'var(--color-bg-container)',
             backdropFilter: 'blur(20px)',
             WebkitBackdropFilter: 'blur(20px)',
-          boxShadow: '0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.2)',
+            boxShadow: 'var(--shadow-card)',
-          border: '1px solid rgba(255, 255, 255, 0.3)',
+            border: '1px solid var(--color-border)',
             borderRadius: '16px',
             position: 'relative',
             zIndex: 1,
@@ -279,12 +281,12 @@ export default function Login() {
                 width: '72px',
                 height: '72px',
                 margin: '0 auto 20px',
-              background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                background: 'var(--color-primary)',
                 borderRadius: '20px',
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-              boxShadow: '0 8px 24px rgba(102, 126, 234, 0.4)',
+                boxShadow: 'var(--shadow-primary)',
               }}>
                 <img
                   src="/logo.svg"
@@ -298,16 +300,13 @@ export default function Login() {
               </div>
               <Title level={2} style={{
                 marginBottom: 8,
-              background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                color: 'var(--color-primary)',
-              WebkitBackgroundClip: 'text',
-              WebkitTextFillColor: 'transparent',
-              backgroundClip: 'text',
                 fontWeight: 700,
               }}>
                 AI小说创作助手
               </Title>
               <Paragraph style={{
-              color: '#666',
+                color: 'var(--color-text-secondary)',
                 fontSize: '14px',
                 marginBottom: 0,
               }}>
@@ -344,13 +343,13 @@ export default function Login() {
             {/* 提示信息 */}
             <div style={{
               padding: '16px',
-            background: 'rgba(102, 126, 234, 0.08)',
+              background: 'rgba(77, 128, 136, 0.08)',
               borderRadius: '12px',
-            border: '1px solid rgba(102, 126, 234, 0.1)',
+              border: '1px solid var(--color-border)',
             }}>
               <Paragraph style={{
                 fontSize: 13,
-              color: '#666',
+                color: 'var(--color-text-secondary)',
                 marginBottom: 0,
                 lineHeight: 1.6,
               }}>

frontend/src/pages/MCPPlugins.tsx

@@ -17,7 +17,8 @@ import {
   Empty,
   Alert,
   Descriptions,
-  Layout,
+  Row,
+  Col,
 } from 'antd';
 import {
   PlusOutlined,
@@ -35,7 +36,6 @@ import type { MCPPlugin, MCPTool } from '../types';
 
 const { Paragraph, Text, Title } = Typography;
 const { TextArea } = Input;
-const { Header, Content } = Layout;
 
 export default function MCPPluginsPage() {
   const navigate = useNavigate();
@@ -228,9 +228,9 @@ export default function MCPPluginsPage() {
                   <div style={{
                     marginTop: 8,
                     padding: 12,
-                    background: '#fff2f0',
+                    background: 'var(--color-error-bg)',
                     borderRadius: 4,
-                    color: '#cf1322',
+                    color: 'var(--color-error)',
                     fontSize: '13px',
                     fontFamily: 'monospace',
                     whiteSpace: 'pre-wrap',
@@ -260,8 +260,8 @@ export default function MCPPluginsPage() {
               <div style={{
                 marginTop: 16,
                 padding: 12,
-                background: '#fff7e6',
+                background: 'var(--color-warning-bg)',
-                border: '1px solid #ffd591',
+                border: '1px solid var(--color-warning-border)',
                 borderRadius: 4
               }}>
                 <Text style={{ fontSize: '13px', color: '#ad6800' }}>
@@ -340,105 +340,130 @@ export default function MCPPluginsPage() {
   };
 
   return (
-    <Layout style={{ minHeight: '100vh', background: '#f0f2f5' }}>
+    <div style={{
-      {/* 顶部导航栏 */}
+      minHeight: '100vh',
-      <Header style={{
+      background: 'linear-gradient(180deg, var(--color-bg-base) 0%, #EEF2F3 100%)',
-        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+      padding: isMobile ? '20px 16px' : '40px 24px',
-        padding: isMobile ? '0 16px' : '0 24px',
       display: 'flex',
-        alignItems: 'center',
+      flexDirection: 'column',
-        justifyContent: 'space-between',
-        boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        right: 0,
-        zIndex: 1000,
-        height: isMobile ? 56 : 64
     }}>
-        <Space size={isMobile ? 12 : 16}>
+      <div style={{
-          <Button
-            type="text"
-            icon={<ArrowLeftOutlined />}
-            onClick={() => navigate('/')}
-            style={{
-              color: '#fff',
-              fontSize: isMobile ? 16 : 18,
-              display: 'flex',
-              alignItems: 'center'
-            }}
-          >
-            {!isMobile && '返回'}
-          </Button>
-          <Title level={isMobile ? 4 : 3} style={{
-            margin: 0,
-            color: '#fff',
-            fontSize: isMobile ? 18 : 24
-          }}>
-            MCP插件管理
-          </Title>
-        </Space>
-      </Header>
-
-      {/* 主内容区 */}
-      <Content style={{
-        marginTop: isMobile ? 56 : 64,
-        padding: isMobile ? '16px' : '24px',
         maxWidth: 1400,
+        margin: '0 auto',
         width: '100%',
-        margin: `${isMobile ? 56 : 64}px auto 0`,
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
       }}>
+        {/* 顶部导航卡片 */}
         <Card
           variant="borderless"
           style={{
-            borderRadius: isMobile ? 8 : 12,
+            background: 'linear-gradient(135deg, var(--color-primary) 0%, #5A9BA5 50%, var(--color-primary-hover) 100%)',
-            boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
+            borderRadius: isMobile ? 16 : 24,
-            marginBottom: isMobile ? 16 : 24
+            boxShadow: '0 12px 40px rgba(77, 128, 136, 0.25), 0 4px 12px rgba(0, 0, 0, 0.06)',
+            marginBottom: isMobile ? 20 : 24,
+            border: 'none',
+            position: 'relative',
+            overflow: 'hidden'
           }}
         >
-          <div style={{
+          {/* 装饰性背景元素 */}
-            display: 'flex',
+          <div style={{ position: 'absolute', top: -60, right: -60, width: 200, height: 200, borderRadius: '50%', background: 'rgba(255, 255, 255, 0.08)', pointerEvents: 'none' }} />
-            justifyContent: 'space-between',
+          <div style={{ position: 'absolute', bottom: -40, left: '30%', width: 120, height: 120, borderRadius: '50%', background: 'rgba(255, 255, 255, 0.05)', pointerEvents: 'none' }} />
-            alignItems: 'center',
+          <div style={{ position: 'absolute', top: '50%', right: '15%', width: 80, height: 80, borderRadius: '50%', background: 'rgba(255, 255, 255, 0.06)', pointerEvents: 'none' }} />
-            marginBottom: isMobile ? 16 : 20
+
-          }}>
+          <Row align="middle" justify="space-between" gutter={[16, 16]} style={{ position: 'relative', zIndex: 1 }}>
-            <Title level={isMobile ? 5 : 4} style={{ margin: 0 }}>
+            <Col xs={24} sm={12}>
-              我的插件
+              <Space direction="vertical" size={4}>
+                <Space align="center">
+                  <Title level={isMobile ? 3 : 2} style={{ margin: 0, color: '#fff', textShadow: '0 2px 4px rgba(0,0,0,0.1)' }}>
+                    <ToolOutlined style={{ color: 'rgba(255,255,255,0.9)', marginRight: 8 }} />
+                    MCP插件管理
                   </Title>
+                </Space>
+                <Text style={{ fontSize: isMobile ? 12 : 14, color: 'rgba(255,255,255,0.85)', marginLeft: isMobile ? 40 : 48 }}>
+                  扩展AI能力，连接外部工具与服务
+                </Text>
+              </Space>
+            </Col>
+            <Col xs={24} sm={12}>
+              <Space size={12} style={{ display: 'flex', justifyContent: isMobile ? 'flex-start' : 'flex-end', width: '100%' }}>
+                <Button
+                  icon={<ArrowLeftOutlined />}
+                  onClick={() => navigate('/')}
+                  style={{
+                    borderRadius: 12,
+                    background: 'rgba(255, 255, 255, 0.15)',
+                    border: '1px solid rgba(255, 255, 255, 0.3)',
+                    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+                    color: '#fff',
+                    backdropFilter: 'blur(10px)',
+                    transition: 'all 0.3s ease'
+                  }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.background = 'rgba(255, 255, 255, 0.25)';
+                    e.currentTarget.style.transform = 'translateY(-1px)';
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.background = 'rgba(255, 255, 255, 0.15)';
+                    e.currentTarget.style.transform = 'none';
+                  }}
+                >
+                  返回主页
+                </Button>
                 <Button
                   type="primary"
                   icon={<PlusOutlined />}
                   onClick={handleCreate}
-              size={isMobile ? 'middle' : 'large'}
                   style={{
-                borderRadius: 8,
+                    borderRadius: 12,
-                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                    background: 'rgba(255, 193, 7, 0.95)',
-                border: 'none'
+                    border: '1px solid rgba(255, 255, 255, 0.3)',
+                    boxShadow: '0 4px 16px rgba(255, 193, 7, 0.4)',
+                    color: '#fff',
+                    fontWeight: 600
                   }}
                 >
                   添加插件
                 </Button>
-          </div>
+              </Space>
+            </Col>
+          </Row>
 
+          {/* 使用提示 */}
           <Alert
-            message="什么是 MCP 插件？"
+            message={
+              <Space align="center">
+                <InfoCircleOutlined style={{ fontSize: 16, color: 'var(--color-primary)' }} />
+                <Text strong style={{ fontSize: isMobile ? 13 : 14, color: 'var(--color-text-primary)' }}>什么是 MCP 插件？</Text>
+              </Space>
+            }
             description={
-              <div style={{ fontSize: isMobile ? '12px' : '14px' }}>
+              <div>
-                <p style={{ margin: '8px 0' }}>
+                <Text style={{ fontSize: isMobile ? 12 : 13, display: 'block', marginBottom: 8 }}>
-                  MCP (Model Context Protocol) 是一个标准化的协议，允许 AI 调用外部工具获取数据。
+                  • <strong>MCP (Model Context Protocol)</strong> 是一个标准化的协议，允许 AI 调用外部工具获取数据。
-                </p>
+                </Text>
-                <p style={{ margin: '8px 0 0 0' }}>
+                <Text style={{ fontSize: isMobile ? 12 : 13, display: 'block' }}>
-                  通过添加 MCP 插件，AI 可以访问搜索引擎、数据库、API 等外部服务，增强创作能力。
+                  • 通过添加 MCP 插件，AI 可以访问搜索引擎、数据库、API 等外部服务，增强创作能力。
-                </p>
+                </Text>
               </div>
             }
             type="info"
-            showIcon
+            showIcon={false}
-            icon={<InfoCircleOutlined />}
+            style={{
-            style={{ marginBottom: isMobile ? 16 : 20 }}
+              marginTop: isMobile ? 16 : 24,
+              borderRadius: 12,
+              background: 'rgba(230, 247, 255, 0.6)',
+              border: '1px solid rgba(145, 213, 255, 0.6)',
+              backdropFilter: 'blur(5px)'
+            }}
           />
         </Card>
 
+        {/* 主内容区 */}
+        <div style={{ flex: 1 }}>
+
           {/* 插件列表 */}
           <Spin spinning={loading}>
             {plugins.length === 0 ? (
@@ -600,7 +625,8 @@ export default function MCPPluginsPage() {
               </Space>
             )}
           </Spin>
-      </Content>
+        </div>
+      </div>
 
       {/* 创建/编辑插件模态框 */}
       <Modal
@@ -710,6 +736,6 @@ export default function MCPPluginsPage() {
           </Space>
         )}
       </Modal>
-    </Layout>
+    </div>
   );
 }

frontend/src/pages/Organizations.tsx

@@ -54,6 +54,7 @@ export default function Organizations() {
   const [editMemberForm] = Form.useForm();
   const [editOrgForm] = Form.useForm();
   const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
+  const [modal, contextHolder] = Modal.useModal();
 
   useEffect(() => {
     const handleResize = () => {
@@ -129,7 +130,7 @@ export default function Organizations() {
   };
 
   const handleRemoveMember = async (memberId: string) => {
-    Modal.confirm({
+    modal.confirm({
       title: '确认移除',
       content: '确定要移除该成员吗？',
       centered: true,
@@ -294,6 +295,7 @@ export default function Organizations() {
 
   return (
     <div>
+      {contextHolder}
       <Card
         title={
           <Space wrap>
@@ -326,7 +328,7 @@ export default function Organizations() {
                     hoverable
                     style={{
                       cursor: 'pointer',
-                      border: selectedOrg?.id === org.id ? '2px solid #1890ff' : '1px solid #d9d9d9'
+                      border: selectedOrg?.id === org.id ? '2px solid var(--color-primary)' : '1px solid var(--color-border-secondary)'
                     }}
                     onClick={() => handleSelectOrganization(org)}
                   >

frontend/src/pages/Outline.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { Button, List, Modal, Form, Input, message, Empty, Space, Popconfirm, Card, Select, Radio, Tag, InputNumber, Tooltip, Tabs } from 'antd';
 import { EditOutlined, DeleteOutlined, ThunderboltOutlined, BranchesOutlined, AppstoreAddOutlined, CheckCircleOutlined, ExclamationCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import { useStore } from '../store';
@@ -41,6 +41,7 @@ export default function Outline() {
   const [editForm] = Form.useForm();
   const [generateForm] = Form.useForm();
   const [expansionForm] = Form.useForm();
+  const [modalApi, contextHolder] = Modal.useModal();
   const [batchExpansionForm] = Form.useForm();
   const [manualCreateForm] = Form.useForm();
   const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
@@ -135,7 +136,7 @@ export default function Outline() {
     const outline = outlines.find(o => o.id === id);
     if (outline) {
       editForm.setFieldsValue(outline);
-      Modal.confirm({
+      modalApi.confirm({
         title: '编辑大纲',
         width: 600,
         centered: true,
@@ -335,7 +336,7 @@ export default function Outline() {
       }
     }
 
-    Modal.confirm({
+    modalApi.confirm({
       title: hasOutlines ? (
         <Space>
           <span>AI生成/续写大纲</span>
@@ -504,7 +505,7 @@ export default function Outline() {
                   console.log('已同步到Form，当前Form值:', generateForm.getFieldsValue());
                 }}
               />
-              <div style={{ color: '#666', fontSize: 12, marginTop: 4 }}>
+              <div style={{ color: 'var(--color-text-tertiary)', fontSize: 12, marginTop: 4 }}>
                 {defaultModel ? `当前默认模型: ${loadedModels.find(m => m.value === defaultModel)?.label || defaultModel}` : '未配置默认模型'}
               </div>
             </Form.Item>
@@ -526,7 +527,7 @@ export default function Outline() {
       ? Math.max(...outlines.map(o => o.order_index)) + 1
       : 1;
 
-    Modal.confirm({
+    modalApi.confirm({
       title: '手动创建大纲',
       width: 600,
       centered: true,
@@ -574,26 +575,26 @@ export default function Outline() {
         // 校验序号是否重复
         const existingOutline = outlines.find(o => o.order_index === values.order_index);
         if (existingOutline) {
-          Modal.warning({
+          modalApi.warning({
             title: '序号冲突',
             content: (
               <div>
                 <p>序号 <strong>{values.order_index}</strong> 已被使用：</p>
                 <div style={{
                   padding: 12,
-                  background: '#fff7e6',
+                  background: 'var(--color-warning-bg)',
                   borderRadius: 4,
-                  border: '1px solid #ffd591',
+                  border: '1px solid var(--color-warning-border)',
                   marginTop: 8
                 }}>
-                  <div style={{ fontWeight: 500, color: '#fa8c16' }}>
+                  <div style={{ fontWeight: 500, color: 'var(--color-warning)' }}>
                     {currentProject?.outline_mode === 'one-to-one'
                       ? `第${existingOutline.order_index}章`
                       : `第${existingOutline.order_index}卷`
                     }：{existingOutline.title}
                   </div>
                 </div>
-                <p style={{ marginTop: 12, color: '#666' }}>
+                <p style={{ marginTop: 12, color: 'var(--color-text-secondary)' }}>
                   💡 建议使用序号 <strong>{nextOrderIndex}</strong>，或选择其他未使用的序号
                 </p>
               </div>
@@ -644,7 +645,7 @@ export default function Outline() {
             if (!prevChapters.has_chapters) {
               // 如果前面有未展开的大纲，显示提示并阻止操作
               setIsExpanding(false);
-              Modal.warning({
+              modalApi.warning({
                 title: '请按顺序展开大纲',
                 width: 600,
                 centered: true,
@@ -655,18 +656,18 @@ export default function Outline() {
                     </p>
                     <div style={{
                       padding: 12,
-                      background: '#fff7e6',
+                      background: 'var(--color-warning-bg)',
                       borderRadius: 4,
-                      border: '1px solid #ffd591'
+                      border: '1px solid var(--color-warning-border)'
                     }}>
-                      <div style={{ fontWeight: 500, marginBottom: 8, color: '#fa8c16' }}>
+                      <div style={{ fontWeight: 500, marginBottom: 8, color: 'var(--color-warning)' }}>
                         ⚠️ 需要先展开：
                       </div>
-                      <div style={{ color: '#666' }}>
+                      <div style={{ color: 'var(--color-text-secondary)' }}>
                         第{prevOutline.order_index}卷：《{prevOutline.title}》
                       </div>
                     </div>
-                    <p style={{ marginTop: 12, color: '#666', fontSize: 13 }}>
+                    <p style={{ marginTop: 12, color: 'var(--color-text-secondary)', fontSize: 13 }}>
                       💡 提示：您也可以使用「批量展开」功能，系统会自动按顺序处理所有大纲。
                     </p>
                   </div>
@@ -694,7 +695,7 @@ export default function Outline() {
 
       // 如果没有章节，显示展开表单
       setIsExpanding(false);
-      Modal.confirm({
+      modalApi.confirm({
         title: (
           <Space>
             <BranchesOutlined />
@@ -705,9 +706,9 @@ export default function Outline() {
         centered: true,
         content: (
           <div>
-            <div style={{ marginBottom: 16, padding: 12, background: '#f5f5f5', borderRadius: 4 }}>
+            <div style={{ marginBottom: 16, padding: 12, background: 'var(--color-bg-layout)', borderRadius: 4 }}>
               <div style={{ fontWeight: 500, marginBottom: 4 }}>大纲标题</div>
-              <div style={{ color: '#666' }}>{outlineTitle}</div>
+              <div style={{ color: 'var(--color-text-secondary)' }}>{outlineTitle}</div>
             </div>
             <Form
               form={expansionForm}
@@ -855,10 +856,10 @@ export default function Outline() {
       }> | null;
     }
   ) => {
-    const modal = Modal.info({
+    modalApi.info({
       title: (
         <Space style={{ flexWrap: 'wrap' }}>
-          <CheckCircleOutlined style={{ color: '#52c41a' }} />
+          <CheckCircleOutlined style={{ color: 'var(--color-success)' }} />
           <span>已存在的展开章节</span>
         </Space>
       ),
@@ -876,20 +877,20 @@ export default function Outline() {
           overflowY: 'auto'
         }
       },
-      footer: (_, { OkBtn }) => (
+      footer: (_: any, { OkBtn }: any) => (
         <Space wrap style={{ width: '100%', justifyContent: isMobile ? 'center' : 'flex-end' }}>
           <Button
             danger
             icon={<DeleteOutlined />}
             onClick={() => {
-              modal.destroy();
+              Modal.destroyAll();
-              Modal.confirm({
+              modalApi.confirm({
                 title: '确认删除',
                 icon: <ExclamationCircleOutlined />,
                 content: (
                   <div>
                     <p>此操作将删除大纲《{outlineTitle}》展开的所有 <strong>{data.chapter_count}</strong> 个章节。</p>
-                    <p style={{ color: '#1890ff', marginTop: 8 }}>
+                    <p style={{ color: 'var(--color-primary)', marginTop: 8 }}>
                       📝 注意：大纲本身会保留，您可以重新展开
                     </p>
                     <p style={{ color: '#ff4d4f', marginTop: 8 }}>
@@ -1077,7 +1078,8 @@ export default function Outline() {
                           ))}
                         </Space>
                       </Card>
-                    )}
+                    )
+                    }
                   </Space>
                 </div >
               )
@@ -1093,10 +1095,10 @@ export default function Outline() {
     // 缓存AI生成的规划数据
     const cachedPlans = response.chapter_plans;
 
-    Modal.confirm({
+    modalApi.confirm({
       title: (
         <Space>
-          <CheckCircleOutlined style={{ color: '#52c41a' }} />
+          <CheckCircleOutlined style={{ color: 'var(--color-success)' }} />
           <span>展开规划预览</span>
         </Space>
       ),
@@ -1222,7 +1224,7 @@ export default function Outline() {
       return;
     }
 
-    Modal.confirm({
+    modalApi.confirm({
       title: (
         <Space>
           <AppstoreAddOutlined />
@@ -1233,7 +1235,7 @@ export default function Outline() {
       centered: true,
       content: (
         <div>
-          <div style={{ marginBottom: 16, padding: 12, background: '#fff3cd', borderRadius: 4 }}>
+          <div style={{ marginBottom: 16, padding: 12, background: 'var(--color-warning-bg)', borderRadius: 4 }}>
             <div style={{ color: '#856404' }}>
               ⚠️ 将对当前项目的所有 {outlines.length} 个大纲进行展开
             </div>
@@ -1361,11 +1363,11 @@ export default function Outline() {
           <div style={{
             marginBottom: 16,
             padding: 12,
-            background: '#fffbe6',
+            background: 'var(--color-warning-bg)',
             borderRadius: 4,
             border: '1px solid #ffe58f'
           }}>
-            <div style={{ fontWeight: 500, marginBottom: 8, color: '#faad14' }}>
+            <div style={{ fontWeight: 500, marginBottom: 8, color: 'var(--color-warning)' }}>
               ⚠️ 以下大纲已展开过，已自动跳过：
             </div>
             <Space direction="vertical" size="small" style={{ width: '100%' }}>
@@ -1404,7 +1406,7 @@ export default function Outline() {
                     background: selectedOutlineIdx === idx ? '#e6f7ff' : 'transparent',
                     borderRadius: 4,
                     marginBottom: 4,
-                    border: selectedOutlineIdx === idx ? '1px solid #1890ff' : '1px solid transparent'
+                    border: selectedOutlineIdx === idx ? '1px solid var(--color-primary)' : '1px solid transparent'
                   }}
                 >
                   <div style={{ width: '100%' }}>
@@ -1445,7 +1447,7 @@ export default function Outline() {
                       background: selectedChapterIdx === idx ? '#e6f7ff' : 'transparent',
                       borderRadius: 4,
                       marginBottom: 4,
-                      border: selectedChapterIdx === idx ? '1px solid #1890ff' : '1px solid transparent'
+                      border: selectedChapterIdx === idx ? '1px solid var(--color-primary)' : '1px solid transparent'
                     }}
                   >
                     <div style={{ width: '100%' }}>
@@ -1719,7 +1721,7 @@ export default function Outline() {
       <Modal
         title={
           <Space>
-            <ExclamationCircleOutlined style={{ color: '#faad14' }} />
+            <ExclamationCircleOutlined style={{ color: 'var(--color-warning)' }} />
             <span>确认引入新角色</span>
           </Space>
         }
@@ -1731,7 +1733,7 @@ export default function Outline() {
           handleConfirmCharacters(selectedCharacters);
         }}
         onCancel={() => {
-          Modal.confirm({
+          modalApi.confirm({
             title: '确认操作',
             content: '是否跳过角色创建，直接续写大纲？',
             okText: '跳过角色，继续续写',
@@ -1745,7 +1747,7 @@ export default function Outline() {
         cancelText="跳过角色创建"
       >
         <div>
-          <div style={{ marginBottom: 16, padding: 12, background: '#fffbe6', borderRadius: 4, border: '1px solid #ffe58f' }}>
+          <div style={{ marginBottom: 16, padding: 12, background: 'var(--color-warning-bg)', borderRadius: 4, border: '1px solid var(--color-warning-border)' }}>
             <div style={{ fontWeight: 500, marginBottom: 8, color: '#d48806' }}>
               AI 分析结果
             </div>
@@ -1785,7 +1787,7 @@ export default function Outline() {
                   padding: 12,
                   borderRadius: 4,
                   marginBottom: 8,
-                  border: selectedCharacterIndices.includes(index) ? '1px solid #1890ff' : '1px solid #f0f0f0',
+                  border: selectedCharacterIndices.includes(index) ? '1px solid var(--color-primary)' : '1px solid var(--color-border-secondary)',
                   cursor: 'pointer'
                 }}
                 onClick={() => {
@@ -1859,7 +1861,7 @@ export default function Outline() {
       <Modal
         title={
           <Space>
-            <CheckCircleOutlined style={{ color: '#52c41a' }} />
+            <CheckCircleOutlined style={{ color: 'var(--color-success)' }} />
             <span>批量展开规划预览</span>
           </Space>
         }
@@ -1875,6 +1877,7 @@ export default function Outline() {
         {renderBatchPreviewContent()}
       </Modal>
 
+      {contextHolder}
       {/* SSE进度Modal - 使用统一组件 */}
       <SSEProgressModal
         visible={sseModalVisible}
@@ -1889,7 +1892,7 @@ export default function Outline() {
           position: 'sticky',
           top: 0,
           zIndex: 10,
-          backgroundColor: '#fff',
+          backgroundColor: 'var(--color-bg-container)',
           padding: isMobile ? '12px 0' : '16px 0',
           marginBottom: isMobile ? 12 : 16,
           borderBottom: '1px solid #f0f0f0',
@@ -1992,7 +1995,7 @@ export default function Outline() {
                       <List.Item.Meta
                         title={
                           <Space size="small" style={{ fontSize: isMobile ? 14 : 16, flexWrap: 'wrap' }}>
-                            <span style={{ color: '#1890ff', fontWeight: 'bold' }}>
+                            <span style={{ color: 'var(--color-primary)', fontWeight: 'bold' }}>
                               {currentProject?.outline_mode === 'one-to-one'
                                 ? `第${item.order_index || '?'}章`
                                 : `第${item.order_index || '?'}卷`

frontend/src/pages/ProjectDetail.tsx

@@ -193,7 +193,7 @@ export default function ProjectDetail() {
   return (
     <Layout style={{ minHeight: '100vh', height: '100vh', overflow: 'hidden' }}>
       <Header style={{
-        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        background: 'var(--color-primary)',
         padding: mobile ? '0 12px' : '0 24px',
         display: 'flex',
         alignItems: 'center',
@@ -203,7 +203,7 @@ export default function ProjectDetail() {
         left: 0,
         right: 0,
         zIndex: 1000,
-        boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+        boxShadow: 'var(--shadow-header)',
         height: mobile ? 56 : 70
       }}>
         <div style={{ display: 'flex', alignItems: 'center', gap: '8px', zIndex: 1 }}>
@@ -279,7 +279,7 @@ export default function ProjectDetail() {
                 <Card
                   size="small"
                   style={{
-                    background: 'rgba(255,255,255,0.95)',
+                    background: 'var(--color-bg-container)',
                     borderRadius: '6px',
                     border: 'none',
                     minWidth: '80px',
@@ -289,10 +289,10 @@ export default function ProjectDetail() {
                   styles={{ body: { padding: '8px' } }}
                 >
                   <Statistic
-                    title={<span style={{ fontSize: '11px', color: '#666' }}>大纲</span>}
+                    title={<span style={{ fontSize: '11px', color: 'var(--color-text-secondary)' }}>大纲</span>}
                     value={outlines.length}
                     suffix="条"
-                    valueStyle={{ fontSize: '16px', fontWeight: 600, color: '#667eea' }}
+                    valueStyle={{ fontSize: '16px', fontWeight: 600, color: 'var(--color-primary)' }}
                   />
                 </Card>
               </Col>
@@ -300,7 +300,7 @@ export default function ProjectDetail() {
                 <Card
                   size="small"
                   style={{
-                    background: 'rgba(255,255,255,0.95)',
+                    background: 'var(--color-bg-container)',
                     borderRadius: '6px',
                     border: 'none',
                     minWidth: '80px',
@@ -310,10 +310,10 @@ export default function ProjectDetail() {
                   styles={{ body: { padding: '8px' } }}
                 >
                   <Statistic
-                    title={<span style={{ fontSize: '11px', color: '#666' }}>角色</span>}
+                    title={<span style={{ fontSize: '11px', color: 'var(--color-text-secondary)' }}>角色</span>}
                     value={characters.length}
                     suffix="个"
-                    valueStyle={{ fontSize: '16px', fontWeight: 600, color: '#52c41a' }}
+                    valueStyle={{ fontSize: '16px', fontWeight: 600, color: 'var(--color-success)' }}
                   />
                 </Card>
               </Col>
@@ -321,7 +321,7 @@ export default function ProjectDetail() {
                 <Card
                   size="small"
                   style={{
-                    background: 'rgba(255,255,255,0.95)',
+                    background: 'var(--color-bg-container)',
                     borderRadius: '6px',
                     border: 'none',
                     minWidth: '80px',
@@ -331,10 +331,10 @@ export default function ProjectDetail() {
                   styles={{ body: { padding: '8px' } }}
                 >
                   <Statistic
-                    title={<span style={{ fontSize: '11px', color: '#666' }}>章节</span>}
+                    title={<span style={{ fontSize: '11px', color: 'var(--color-text-secondary)' }}>章节</span>}
                     value={chapters.length}
                     suffix="章"
-                    valueStyle={{ fontSize: '16px', fontWeight: 600, color: '#1890ff' }}
+                    valueStyle={{ fontSize: '16px', fontWeight: 600, color: 'var(--color-info)' }}
                   />
                 </Card>
               </Col>
@@ -342,7 +342,7 @@ export default function ProjectDetail() {
                 <Card
                   size="small"
                   style={{
-                    background: 'rgba(255,255,255,0.95)',
+                    background: 'var(--color-bg-container)',
                     borderRadius: '6px',
                     border: 'none',
                     minWidth: '80px',
@@ -352,10 +352,10 @@ export default function ProjectDetail() {
                   styles={{ body: { padding: '8px' } }}
                 >
                   <Statistic
-                    title={<span style={{ fontSize: '11px', color: '#666' }}>已写</span>}
+                    title={<span style={{ fontSize: '11px', color: 'var(--color-text-secondary)' }}>已写</span>}
                     value={currentProject.current_words}
                     suffix="字"
-                    valueStyle={{ fontSize: '16px', fontWeight: 600, color: '#fa8c16' }}
+                    valueStyle={{ fontSize: '16px', fontWeight: 600, color: 'var(--color-warning)' }}
                   />
                 </Card>
               </Col>
@@ -384,15 +384,14 @@ export default function ProjectDetail() {
             trigger={null}
             width={220}
             collapsedWidth={60}
+            className="modern-sider"
             style={{
-              background: '#fff',
               position: 'fixed',
               left: 0,
               top: 70,
               bottom: 0,
               overflow: 'hidden',
-              boxShadow: '2px 0 12px rgba(0,0,0,0.08)',
+              transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-              transition: 'all 0.2s',
               height: 'calc(100vh - 70px)'
             }}
           >
@@ -412,7 +411,7 @@ export default function ProjectDetail() {
         }}>
           <Content
             style={{
-              background: '#f5f7fa',
+              background: 'var(--color-bg-base)',
               padding: mobile ? 12 : 24,
               height: mobile ? 'calc(100vh - 56px)' : 'calc(100vh - 70px)',
               overflow: 'hidden',
@@ -421,10 +420,10 @@ export default function ProjectDetail() {
             }}
           >
             <div style={{
-              background: '#fff',
+              background: 'var(--color-bg-container)',
               padding: mobile ? 12 : 24,
               borderRadius: mobile ? '8px' : '12px',
-              boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
+              boxShadow: 'var(--shadow-card)',
               height: '100%',
               overflow: 'hidden',
               display: 'flex',

frontend/src/pages/ProjectList.tsx

@@ -15,6 +15,7 @@ const { Title, Text, Paragraph } = Typography;
 export default function ProjectList() {
   const navigate = useNavigate();
   const { projects, loading } = useStore();
+  const [modal, contextHolder] = Modal.useModal();
   const [showApiTip, setShowApiTip] = useState(true);
   const [importModalVisible, setImportModalVisible] = useState(false);
   const [exportModalVisible, setExportModalVisible] = useState(false);
@@ -56,7 +57,7 @@ export default function ProjectList() {
 
   const handleDelete = (id: string) => {
     const isMobile = window.innerWidth <= 768;
-    Modal.confirm({
+    modal.confirm({
       title: '确认删除',
       content: '删除项目将同时删除所有相关数据，此操作不可恢复。确定要删除吗？',
       okText: '确定',
@@ -324,34 +325,83 @@ export default function ProjectList() {
     }
   };
 
+  // 计算页脚高度和页面内边距
+  const isMobile = window.innerWidth <= 768;
+  const footerHeight = isMobile ? 48 : 52;
+  const topPadding = isMobile ? 20 : 32;
+  const sidePadding = isMobile ? 16 : 24;
+
   return (
     <div style={{
-      minHeight: '100vh',
+      height: '100vh',
-      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+      display: 'flex',
-      padding: window.innerWidth <= 768 ? '20px 16px' : '40px 24px'
+      flexDirection: 'column',
+      background: 'linear-gradient(180deg, var(--color-bg-base) 0%, #EEF2F3 100%)',
+      overflow: 'hidden'
+    }}>
+      {contextHolder}
+
+      {/* 固定头部区域 */}
+      <div style={{
+        flexShrink: 0,
+        padding: `${topPadding}px ${sidePadding}px 0`,
       }}>
         <div style={{
           maxWidth: 1400,
-        margin: '0 auto',
+          margin: '0 auto'
-        marginBottom: window.innerWidth <= 768 ? 20 : 40
         }}>
+          {/* 现代化头部区域 */}
           <Card
             variant="borderless"
             style={{
-            background: 'rgba(255, 255, 255, 0.95)',
+              background: 'linear-gradient(135deg, var(--color-primary) 0%, #5A9BA5 50%, var(--color-primary-hover) 100%)',
-            borderRadius: window.innerWidth <= 768 ? 12 : 16,
+              borderRadius: window.innerWidth <= 768 ? 16 : 24,
-            boxShadow: '0 8px 32px rgba(0, 0, 0, 0.1)',
+              boxShadow: '0 12px 40px rgba(77, 128, 136, 0.25), 0 4px 12px rgba(0, 0, 0, 0.06)',
+              border: 'none',
+              position: 'relative',
+              overflow: 'hidden'
             }}
           >
-          <Row align="middle" justify="space-between" gutter={[16, 16]}>
+            {/* 装饰性背景元素 */}
+            <div style={{
+              position: 'absolute',
+              top: -60,
+              right: -60,
+              width: 200,
+              height: 200,
+              borderRadius: '50%',
+              background: 'rgba(255, 255, 255, 0.08)',
+              pointerEvents: 'none'
+            }} />
+            <div style={{
+              position: 'absolute',
+              bottom: -40,
+              left: '30%',
+              width: 120,
+              height: 120,
+              borderRadius: '50%',
+              background: 'rgba(255, 255, 255, 0.05)',
+              pointerEvents: 'none'
+            }} />
+            <div style={{
+              position: 'absolute',
+              top: '50%',
+              right: '15%',
+              width: 80,
+              height: 80,
+              borderRadius: '50%',
+              background: 'rgba(255, 255, 255, 0.06)',
+              pointerEvents: 'none'
+            }} />
+            <Row align="middle" justify="space-between" gutter={[16, 16]} style={{ position: 'relative', zIndex: 1 }}>
               <Col xs={24} sm={12} md={10}>
-              <Space direction="vertical" size={4}>
+                <Space direction="vertical" size={8}>
-                <Title level={window.innerWidth <= 768 ? 3 : 2} style={{ margin: 0 }}>
+                  <Title level={window.innerWidth <= 768 ? 3 : 2} style={{ margin: 0, color: '#fff', textShadow: '0 2px 4px rgba(0,0,0,0.1)' }}>
-                  <FireOutlined style={{ color: '#ff4d4f', marginRight: 8 }} />
+                    <FireOutlined style={{ color: 'rgba(255,255,255,0.9)', marginRight: 12 }} />
                     我的创作空间
                   </Title>
-                <Text type="secondary" style={{ fontSize: window.innerWidth <= 768 ? 12 : 14 }}>
+                  <Text style={{ fontSize: window.innerWidth <= 768 ? 13 : 15, color: 'rgba(255,255,255,0.85)' }}>
-                  开启你的小说创作之旅
+                    ✨ 开启你的小说创作之旅
                   </Text>
                 </Space>
               </Col>
@@ -369,12 +419,13 @@ export default function ProjectList() {
                           onClick={() => navigate('/inspiration')}
                           block
                           style={{
-                          borderRadius: 8,
+                            borderRadius: 10,
-                          background: 'linear-gradient(135deg, #ffd700 0%, #ff8c00 100%)',
+                            background: 'rgba(255, 193, 7, 0.95)',
-                          border: 'none',
+                            border: '1px solid rgba(255, 255, 255, 0.3)',
-                          boxShadow: '0 2px 8px rgba(255, 215, 0, 0.4)',
+                            boxShadow: '0 4px 12px rgba(255, 193, 7, 0.35)',
                             color: '#fff',
-                          height: 40
+                            height: 42,
+                            fontWeight: 500
                           }}
                         >
                           灵感模式
@@ -388,11 +439,14 @@ export default function ProjectList() {
                           onClick={() => navigate('/wizard')}
                           block
                           style={{
-                          borderRadius: 8,
+                            borderRadius: 10,
-                          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                            background: 'rgba(255, 255, 255, 0.2)',
-                          border: 'none',
+                            border: '1px solid rgba(255, 255, 255, 0.4)',
-                          boxShadow: '0 2px 8px rgba(102, 126, 234, 0.4)',
+                            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
-                          height: 40
+                            color: '#fff',
+                            height: 42,
+                            fontWeight: 500,
+                            backdropFilter: 'blur(8px)'
                           }}
                         >
                           向导创建
@@ -409,11 +463,14 @@ export default function ProjectList() {
                           onClick={() => navigate('/settings')}
                           block
                           style={{
-                          borderRadius: 8,
+                            borderRadius: 10,
-                          borderColor: '#d9d9d9',
+                            background: 'rgba(255, 255, 255, 0.15)',
+                            border: '1px solid rgba(255, 255, 255, 0.3)',
                             boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
-                          height: 36,
+                            height: 38,
-                          padding: '0 8px'
+                            padding: '0 8px',
+                            color: '#fff',
+                            backdropFilter: 'blur(8px)'
                           }}
                         >
                           设置
@@ -461,10 +518,13 @@ export default function ProjectList() {
                             icon={<MoreOutlined />}
                             block
                             style={{
-                            borderRadius: 8,
+                              borderRadius: 10,
-                            borderColor: '#d9d9d9',
+                              background: 'rgba(255, 255, 255, 0.15)',
+                              border: '1px solid rgba(255, 255, 255, 0.3)',
                               boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
-                            height: 36
+                              height: 38,
+                              color: '#fff',
+                              backdropFilter: 'blur(8px)'
                             }}
                           >
                             更多
@@ -487,11 +547,14 @@ export default function ProjectList() {
                       icon={<BulbOutlined />}
                       onClick={() => navigate('/inspiration')}
                       style={{
-                      borderRadius: 8,
+                        borderRadius: 12,
-                      background: 'linear-gradient(135deg, #ffd700 0%, #ff8c00 100%)',
+                        background: 'rgba(255, 193, 7, 0.95)',
-                      border: 'none',
+                        border: '1px solid rgba(255, 255, 255, 0.3)',
-                      boxShadow: '0 2px 8px rgba(255, 215, 0, 0.4)',
+                        boxShadow: '0 4px 16px rgba(255, 193, 7, 0.4)',
-                      color: '#fff'
+                        color: '#fff',
+                        fontWeight: 600,
+                        height: 44,
+                        transition: 'all 0.3s ease'
                       }}
                     >
                       灵感模式
@@ -502,10 +565,15 @@ export default function ProjectList() {
                       icon={<RocketOutlined />}
                       onClick={() => navigate('/wizard')}
                       style={{
-                      borderRadius: 8,
+                        borderRadius: 12,
-                      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                        background: 'rgba(255, 255, 255, 0.2)',
-                      border: 'none',
+                        border: '1px solid rgba(255, 255, 255, 0.4)',
-                      boxShadow: '0 2px 8px rgba(102, 126, 234, 0.4)'
+                        boxShadow: '0 4px 16px rgba(0, 0, 0, 0.15)',
+                        color: '#fff',
+                        fontWeight: 500,
+                        height: 44,
+                        backdropFilter: 'blur(10px)',
+                        transition: 'all 0.3s ease'
                       }}
                     >
                       向导创建
@@ -516,21 +584,15 @@ export default function ProjectList() {
                       icon={<SettingOutlined />}
                       onClick={() => navigate('/settings')}
                       style={{
-                      borderRadius: 8,
+                        borderRadius: 12,
-                      borderColor: '#d9d9d9',
+                        background: 'rgba(255, 255, 255, 0.15)',
-                      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
+                        border: '1px solid rgba(255, 255, 255, 0.3)',
+                        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+                        color: '#fff',
+                        height: 44,
+                        backdropFilter: 'blur(10px)',
                         transition: 'all 0.3s ease'
                       }}
-                    onMouseEnter={(e) => {
-                      e.currentTarget.style.borderColor = '#667eea';
-                      e.currentTarget.style.color = '#667eea';
-                      e.currentTarget.style.boxShadow = '0 2px 12px rgba(102, 126, 234, 0.3)';
-                    }}
-                    onMouseLeave={(e) => {
-                      e.currentTarget.style.borderColor = '#d9d9d9';
-                      e.currentTarget.style.color = 'rgba(0, 0, 0, 0.88)';
-                      e.currentTarget.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.08)';
-                    }}
                     >
                       API设置
                     </Button>
@@ -573,21 +635,15 @@ export default function ProjectList() {
                         size="large"
                         icon={<MoreOutlined />}
                         style={{
-                        borderRadius: 8,
+                          borderRadius: 12,
-                        borderColor: '#d9d9d9',
+                          background: 'rgba(255, 255, 255, 0.15)',
-                        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
+                          border: '1px solid rgba(255, 255, 255, 0.3)',
+                          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+                          color: '#fff',
+                          height: 44,
+                          backdropFilter: 'blur(10px)',
                           transition: 'all 0.3s ease'
                         }}
-                      onMouseEnter={(e) => {
-                        e.currentTarget.style.borderColor = '#1890ff';
-                        e.currentTarget.style.color = '#1890ff';
-                        e.currentTarget.style.boxShadow = '0 2px 12px rgba(24, 144, 255, 0.3)';
-                      }}
-                      onMouseLeave={(e) => {
-                        e.currentTarget.style.borderColor = '#d9d9d9';
-                        e.currentTarget.style.color = 'rgba(0, 0, 0, 0.88)';
-                        e.currentTarget.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.08)';
-                      }}
                       >
                         更多
                       </Button>
@@ -652,37 +708,104 @@ export default function ProjectList() {
             )}
 
             {projects.length > 0 && (
-            <Row gutter={[16, 16]} style={{ marginTop: window.innerWidth <= 768 ? 16 : 24 }}>
+              <Row gutter={[isMobile ? 8 : 16, 16]} style={{ marginTop: isMobile ? 16 : 28, position: 'relative', zIndex: 1 }}>
-              <Col xs={24} sm={8}>
+                <Col xs={8} sm={8}>
-                <Card variant="borderless" style={{ background: '#f0f5ff', borderRadius: 12 }}>
+                  <Card
+                    variant="borderless"
+                    style={{
+                      background: 'rgba(255, 255, 255, 0.2)',
+                      borderRadius: isMobile ? 12 : 16,
+                      border: '1px solid rgba(255, 255, 255, 0.3)',
+                      backdropFilter: 'blur(10px)',
+                      boxShadow: '0 4px 16px rgba(0, 0, 0, 0.08)',
+                      padding: isMobile ? '8px 4px' : '24px'
+                    }}
+                    styles={{ body: { padding: isMobile ? '4px' : '24px' } }}
+                  >
                     <Statistic
-                    title={<span style={{ fontSize: window.innerWidth <= 768 ? 12 : 14, color: '#595959' }}>总项目数</span>}
+                      title={
+                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: isMobile ? 4 : 8 }}>
+                          <span style={{ fontSize: isMobile ? 16 : 14, color: 'rgba(255,255,255,0.9)', marginRight: isMobile ? 0 : 8 }}>📚</span>
+                          {!isMobile && <span style={{ color: 'rgba(255,255,255,0.8)' }}>总项目数</span>}
+                          {isMobile && <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.8)', marginTop: 2 }}>项目</div>}
+                        </div>
+                      }
                       value={projects.length}
-                    prefix={<BookOutlined style={{ color: '#1890ff' }} />}
+                      valueStyle={{
-                    suffix="个"
+                        color: '#fff',
-                    valueStyle={{ color: '#1890ff', fontSize: window.innerWidth <= 768 ? 20 : 28, fontWeight: 'bold' }}
+                        fontSize: isMobile ? 18 : 32,
+                        fontWeight: 'bold',
+                        textShadow: '0 1px 2px rgba(0,0,0,0.1)',
+                        textAlign: 'center'
+                      }}
                     />
                   </Card>
                 </Col>
-              <Col xs={24} sm={8}>
+                <Col xs={8} sm={8}>
-                <Card variant="borderless" style={{ background: '#f6ffed', borderRadius: 12 }}>
+                  <Card
+                    variant="borderless"
+                    style={{
+                      background: 'rgba(255, 255, 255, 0.2)',
+                      borderRadius: isMobile ? 12 : 16,
+                      border: '1px solid rgba(255, 255, 255, 0.3)',
+                      backdropFilter: 'blur(10px)',
+                      boxShadow: '0 4px 16px rgba(0, 0, 0, 0.08)',
+                      padding: isMobile ? '8px 4px' : '24px'
+                    }}
+                    styles={{ body: { padding: isMobile ? '4px' : '24px' } }}
+                  >
                     <Statistic
-                    title={<span style={{ fontSize: window.innerWidth <= 768 ? 12 : 14, color: '#595959' }}>创作中</span>}
+                      title={
+                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: isMobile ? 4 : 8 }}>
+                          <span style={{ fontSize: isMobile ? 16 : 14, color: 'rgba(255,255,255,0.9)', marginRight: isMobile ? 0 : 8 }}>✍️</span>
+                          {!isMobile && <span style={{ color: 'rgba(255,255,255,0.8)' }}>创作中</span>}
+                          {isMobile && <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.8)', marginTop: 2 }}>创作</div>}
+                        </div>
+                      }
                       value={activeProjects}
-                    prefix={<EditOutlined style={{ color: '#52c41a' }} />}
+                      valueStyle={{
-                    suffix="个"
+                        color: '#fff',
-                    valueStyle={{ color: '#52c41a', fontSize: window.innerWidth <= 768 ? 20 : 28, fontWeight: 'bold' }}
+                        fontSize: isMobile ? 18 : 32,
+                        fontWeight: 'bold',
+                        textShadow: '0 1px 2px rgba(0,0,0,0.1)',
+                        textAlign: 'center'
+                      }}
                     />
                   </Card>
                 </Col>
-              <Col xs={24} sm={8}>
+                <Col xs={8} sm={8}>
-                <Card variant="borderless" style={{ background: '#fff7e6', borderRadius: 12 }}>
+                  <Card
+                    variant="borderless"
+                    style={{
+                      background: 'rgba(255, 255, 255, 0.2)',
+                      borderRadius: isMobile ? 12 : 16,
+                      border: '1px solid rgba(255, 255, 255, 0.3)',
+                      backdropFilter: 'blur(10px)',
+                      boxShadow: '0 4px 16px rgba(0, 0, 0, 0.08)',
+                      padding: isMobile ? '8px 4px' : '24px'
+                    }}
+                    styles={{ body: { padding: isMobile ? '4px' : '24px' } }}
+                  >
                     <Statistic
-                    title={<span style={{ fontSize: window.innerWidth <= 768 ? 12 : 14, color: '#595959' }}>总字数</span>}
+                      title={
+                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: isMobile ? 4 : 8 }}>
+                          <span style={{ fontSize: isMobile ? 16 : 14, color: 'rgba(255,255,255,0.9)', marginRight: isMobile ? 0 : 8 }}>📝</span>
+                          {!isMobile && <span style={{ color: 'rgba(255,255,255,0.8)' }}>总字数</span>}
+                          {isMobile && <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.8)', marginTop: 2 }}>字数</div>}
+                        </div>
+                      }
                       value={totalWords}
-                    prefix={<FileTextOutlined style={{ color: '#faad14' }} />}
+                      formatter={(value) => {
-                    suffix="字"
+                        const val = Number(value);
-                    valueStyle={{ color: '#faad14', fontSize: window.innerWidth <= 768 ? 20 : 28, fontWeight: 'bold' }}
+                        return isMobile && val > 10000 ? `${(val / 10000).toFixed(1)}w` : val;
+                      }}
+                      valueStyle={{
+                        color: '#fff',
+                        fontSize: isMobile ? 18 : 32,
+                        fontWeight: 'bold',
+                        textShadow: '0 1px 2px rgba(0,0,0,0.1)',
+                        textAlign: 'center'
+                      }}
                     />
                   </Card>
                 </Col>
@@ -690,16 +813,25 @@ export default function ProjectList() {
             )}
           </Card>
         </div>
+      </div>
 
+      {/* 可滚动的项目列表区域 */}
+      <div style={{
+        flex: 1,
+        overflow: 'auto',
+        padding: `${isMobile ? 16 : 24}px ${sidePadding}px`,
+        paddingBottom: footerHeight + (isMobile ? 24 : 32),
+      }}>
         <div style={{ maxWidth: 1400, margin: '0 auto' }}>
           <Spin spinning={loading}>
             {!Array.isArray(projects) || projects.length === 0 ? (
               <Card
                 variant="borderless"
                 style={{
-                background: 'rgba(255, 255, 255, 0.95)',
+                  background: 'var(--color-bg-container)',
                   borderRadius: 16,
-                boxShadow: '0 8px 32px rgba(0, 0, 0, 0.1)',
+                  boxShadow: 'var(--shadow-card)',
+                  border: '1px solid var(--color-border-secondary)'
                 }}
               >
                 <Empty
@@ -715,9 +847,10 @@ export default function ProjectList() {
                           icon={<BulbOutlined />}
                           onClick={() => navigate('/inspiration')}
                           style={{
-                          background: 'linear-gradient(135deg, #ffd700 0%, #ff8c00 100%)',
+                            background: 'var(--color-warning)',
                             border: 'none',
-                          color: '#fff'
+                            color: '#fff',
+                            boxShadow: '0 2px 8px rgba(227, 173, 54, 0.2)'
                           }}
                         >
                           灵感模式
@@ -727,6 +860,11 @@ export default function ProjectList() {
                           size="large"
                           icon={<RocketOutlined />}
                           onClick={() => navigate('/wizard')}
+                          style={{
+                            background: 'var(--color-primary)',
+                            border: 'none',
+                            boxShadow: '0 2px 8px rgba(77, 128, 136, 0.2)'
+                          }}
                         >
                           向导创建
                         </Button>
@@ -758,20 +896,52 @@ export default function ProjectList() {
                           styles={{ body: { padding: 0, overflow: 'hidden' } }}
                           {...cardHoverHandlers}
                         >
+                          {/* 项目卡片头部 - 添加装饰元素 */}
                           <div style={{
-                          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                            background: 'linear-gradient(135deg, var(--color-primary) 0%, #5A9BA5 60%, var(--color-primary-hover) 100%)',
-                          padding: window.innerWidth <= 768 ? '16px' : '24px',
+                            padding: window.innerWidth <= 768 ? '18px 16px' : '24px',
-                          position: 'relative'
+                            position: 'relative',
+                            overflow: 'hidden'
                           }}>
-                          <Space direction="vertical" size={8} style={{ width: '100%' }}>
+                            {/* 装饰性圆圈 */}
-                            <div style={{ display: 'flex', alignItems: 'center', gap: window.innerWidth <= 768 ? 8 : 12 }}>
+                            <div style={{
-                              <BookOutlined style={{ fontSize: window.innerWidth <= 768 ? 20 : 28, color: '#fff' }} />
+                              position: 'absolute',
-                              <Title level={window.innerWidth <= 768 ? 5 : 4} style={{ margin: 0, color: '#fff', flex: 1 }} ellipsis>
+                              top: -20,
+                              right: -20,
+                              width: 80,
+                              height: 80,
+                              borderRadius: '50%',
+                              background: 'rgba(255, 255, 255, 0.1)',
+                              pointerEvents: 'none'
+                            }} />
+                            <Space direction="vertical" size={8} style={{ width: '100%', position: 'relative', zIndex: 1 }}>
+                              <div style={{ display: 'flex', alignItems: 'center', gap: window.innerWidth <= 768 ? 10 : 12 }}>
+                                <div style={{
+                                  width: window.innerWidth <= 768 ? 36 : 44,
+                                  height: window.innerWidth <= 768 ? 36 : 44,
+                                  borderRadius: 12,
+                                  background: 'rgba(255, 255, 255, 0.2)',
+                                  display: 'flex',
+                                  alignItems: 'center',
+                                  justifyContent: 'center',
+                                  backdropFilter: 'blur(4px)'
+                                }}>
+                                  <BookOutlined style={{ fontSize: window.innerWidth <= 768 ? 18 : 22, color: '#fff' }} />
+                                </div>
+                                <Title level={window.innerWidth <= 768 ? 5 : 4} style={{ margin: 0, color: '#fff', flex: 1, textShadow: '0 1px 2px rgba(0,0,0,0.1)' }} ellipsis>
                                   {project.title}
                                 </Title>
                               </div>
                               {project.genre && (
-                              <Tag color="rgba(255,255,255,0.3)" style={{ color: '#fff', border: 'none' }}>
+                                <Tag
+                                  color="rgba(255,255,255,0.2)"
+                                  style={{
+                                    color: '#fff',
+                                    border: '1px solid rgba(255,255,255,0.3)',
+                                    borderRadius: 6,
+                                    backdropFilter: 'blur(4px)'
+                                  }}
+                                >
                                   {project.genre}
                                 </Tag>
                               )}
@@ -809,11 +979,12 @@ export default function ProjectList() {
                               <Col span={12}>
                                 <div style={{
                                   textAlign: 'center',
-                                padding: '12px 0',
+                                  padding: '14px 0',
-                                background: '#f5f5f5',
+                                  background: 'linear-gradient(135deg, #E8F4FC 0%, #F0F9FF 100%)',
-                                borderRadius: 8
+                                  borderRadius: 12,
+                                  border: '1px solid rgba(24, 144, 255, 0.15)'
                                 }}>
-                                <div style={{ fontSize: 20, fontWeight: 'bold', color: '#1890ff' }}>
+                                  <div style={{ fontSize: 22, fontWeight: 'bold', color: 'var(--color-primary)' }}>
                                     {project.current_words >= 1000000
                                       ? (project.current_words / 1000000).toFixed(1) + 'M'
                                       : project.current_words >= 1000
@@ -827,11 +998,12 @@ export default function ProjectList() {
                               <Col span={12}>
                                 <div style={{
                                   textAlign: 'center',
-                                padding: '12px 0',
+                                  padding: '14px 0',
-                                background: '#f5f5f5',
+                                  background: 'linear-gradient(135deg, #F0FDF4 0%, #ECFDF5 100%)',
-                                borderRadius: 8
+                                  borderRadius: 12,
+                                  border: '1px solid rgba(82, 196, 26, 0.15)'
                                 }}>
-                                <div style={{ fontSize: 20, fontWeight: 'bold', color: '#52c41a' }}>
+                                  <div style={{ fontSize: 22, fontWeight: 'bold', color: 'var(--color-success)' }}>
                                     {project.target_words
                                       ? (project.target_words >= 1000000
                                         ? (project.target_words / 1000000).toFixed(1) + 'M'
@@ -847,18 +1019,18 @@ export default function ProjectList() {
                             </Row>
 
                             <div style={{
-                            marginTop: 16, 
+                              marginTop: 18,
                               paddingTop: 16,
-                            borderTop: '1px solid #f0f0f0',
+                              borderTop: '1px solid rgba(0, 0, 0, 0.06)',
                               display: 'flex',
                               justifyContent: 'space-between',
                               alignItems: 'center'
                             }}>
-                            <Text type="secondary" style={{ fontSize: 12 }}>
+                              <Text type="secondary" style={{ fontSize: 12, display: 'flex', alignItems: 'center', gap: 4 }}>
-                              <CalendarOutlined style={{ marginRight: 4 }} />
+                                <CalendarOutlined style={{ color: 'var(--color-primary)' }} />
                                 {formatDate(project.updated_at)}
                               </Text>
-                            <Space size={8}>
+                              <Space size={4}>
                                 <Tooltip title="编辑">
                                   <Button
                                     type="text"
@@ -868,6 +1040,11 @@ export default function ProjectList() {
                                       e.stopPropagation();
                                       handleEditProject(project);
                                     }}
+                                    style={{
+                                      borderRadius: 8,
+                                      color: 'var(--color-primary)',
+                                      transition: 'all 0.2s ease'
+                                    }}
                                   />
                                 </Tooltip>
                                 <Tooltip title="删除">
@@ -880,6 +1057,10 @@ export default function ProjectList() {
                                       e.stopPropagation();
                                       handleDelete(project.id);
                                     }}
+                                    style={{
+                                      borderRadius: 8,
+                                      transition: 'all 0.2s ease'
+                                    }}
                                   />
                                 </Tooltip>
                               </Space>
@@ -1235,5 +1416,6 @@ export default function ProjectList() {
 
         <ChangelogFloatingButton />
       </div>
+    </div>
   );
 }

frontend/src/pages/ProjectWizardNew.tsx

@@ -195,7 +195,7 @@ export default function ProjectWizardNew() {
                 <Card
                   hoverable
                   style={{
-                    borderColor: form.getFieldValue('outline_mode') === 'one-to-one' ? '#1890ff' : '#d9d9d9',
+                    borderColor: form.getFieldValue('outline_mode') === 'one-to-one' ? 'var(--color-primary)' : 'var(--color-border)',
                     borderWidth: 2,
                     height: '100%',
                   }}
@@ -204,7 +204,7 @@ export default function ProjectWizardNew() {
                   <Radio value="one-to-one" style={{ width: '100%' }}>
                     <Space direction="vertical" size={4} style={{ width: '100%' }}>
                       <div style={{ fontSize: 16, fontWeight: 'bold' }}>
-                        <CheckCircleOutlined style={{ marginRight: 8, color: '#52c41a' }} />
+                        <CheckCircleOutlined style={{ marginRight: 8, color: 'var(--color-success)' }} />
                         传统模式 (1→1)
                       </div>
                       <div style={{ fontSize: 12, color: '#666' }}>
@@ -222,7 +222,7 @@ export default function ProjectWizardNew() {
                 <Card
                   hoverable
                   style={{
-                    borderColor: form.getFieldValue('outline_mode') === 'one-to-many' ? '#1890ff' : '#d9d9d9',
+                    borderColor: form.getFieldValue('outline_mode') === 'one-to-many' ? 'var(--color-primary)' : 'var(--color-border)',
                     borderWidth: 2,
                     height: '100%',
                   }}
@@ -231,7 +231,7 @@ export default function ProjectWizardNew() {
                   <Radio value="one-to-many" style={{ width: '100%' }}>
                     <Space direction="vertical" size={4} style={{ width: '100%' }}>
                       <div style={{ fontSize: 16, fontWeight: 'bold' }}>
-                        <CheckCircleOutlined style={{ marginRight: 8, color: '#52c41a' }} />
+                        <CheckCircleOutlined style={{ marginRight: 8, color: 'var(--color-success)' }} />
                         细化模式 (1→N) 推荐
                       </div>
                       <div style={{ fontSize: 12, color: '#666' }}>
@@ -321,17 +321,15 @@ export default function ProjectWizardNew() {
   return (
     <div style={{
       minHeight: '100vh',
-      background: currentStep === 'generating' 
+      background: 'var(--color-bg-base)',
-        ? 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
-        : '#f5f7fa',
     }}>
       {/* 顶部标题栏 - 固定不滚动 */}
       <div style={{
         position: 'sticky',
         top: 0,
         zIndex: 100,
-        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        background: 'var(--color-primary)',
-        boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+        boxShadow: 'var(--shadow-header)',
       }}>
         <div style={{
           maxWidth: 1200,

frontend/src/pages/PromptTemplates.tsx

@@ -193,50 +193,87 @@ export default function PromptTemplates() {
   return (
     <div style={{
       minHeight: '100vh',
-      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+      background: 'linear-gradient(180deg, var(--color-bg-base) 0%, #EEF2F3 100%)',
-      padding: isMobile ? '20px 16px' : '40px 24px'
+      padding: isMobile ? '20px 16px' : '40px 24px',
+      display: 'flex',
+      flexDirection: 'column',
     }}>
-      {/* 头部卡片 */}
       <div style={{
         maxWidth: 1400,
         margin: '0 auto',
-        marginBottom: isMobile ? 20 : 40
+        width: '100%',
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
       }}>
+        {/* 顶部导航卡片 */}
         <Card
           variant="borderless"
           style={{
-            background: 'rgba(255, 255, 255, 0.95)',
+            background: 'linear-gradient(135deg, var(--color-primary) 0%, #5A9BA5 50%, var(--color-primary-hover) 100%)',
-            borderRadius: isMobile ? 12 : 16,
+            borderRadius: isMobile ? 16 : 24,
-            boxShadow: '0 8px 32px rgba(0, 0, 0, 0.1)',
+            boxShadow: '0 12px 40px rgba(77, 128, 136, 0.25), 0 4px 12px rgba(0, 0, 0, 0.06)',
+            marginBottom: isMobile ? 20 : 24,
+            border: 'none',
+            position: 'relative',
+            overflow: 'hidden'
           }}
         >
-          <Row align="middle" justify="space-between" gutter={[16, 16]}>
+          {/* 装饰性背景元素 */}
+          <div style={{ position: 'absolute', top: -60, right: -60, width: 200, height: 200, borderRadius: '50%', background: 'rgba(255, 255, 255, 0.08)', pointerEvents: 'none' }} />
+          <div style={{ position: 'absolute', bottom: -40, left: '30%', width: 120, height: 120, borderRadius: '50%', background: 'rgba(255, 255, 255, 0.05)', pointerEvents: 'none' }} />
+          <div style={{ position: 'absolute', top: '50%', right: '15%', width: 80, height: 80, borderRadius: '50%', background: 'rgba(255, 255, 255, 0.06)', pointerEvents: 'none' }} />
+
+          <Row align="middle" justify="space-between" gutter={[16, 16]} style={{ position: 'relative', zIndex: 1 }}>
             <Col xs={24} sm={12} md={14}>
               <Space direction="vertical" size={4}>
-                <Space align="center">
+                <Title level={isMobile ? 3 : 2} style={{ margin: 0, color: '#fff', textShadow: '0 2px 4px rgba(0,0,0,0.1)' }}>
-                  <Button
+                  <FileSearchOutlined style={{ color: 'rgba(255,255,255,0.9)', marginRight: 8 }} />
-                    type="text"
-                    icon={<ArrowLeftOutlined />}
-                    onClick={() => navigate('/projects')}
-                    size={isMobile ? 'small' : 'middle'}
-                  />
-                  <Title level={isMobile ? 3 : 2} style={{ margin: 0 }}>
-                    <FileSearchOutlined style={{ color: '#667eea', marginRight: 8 }} />
                   提示词模板管理
                 </Title>
-                </Space>
+                <Text style={{ fontSize: isMobile ? 12 : 14, color: 'rgba(255,255,255,0.85)', marginLeft: isMobile ? 40 : 48 }}>
-                <Text type="secondary" style={{ fontSize: isMobile ? 12 : 14, marginLeft: isMobile ? 40 : 48 }}>
                   自定义AI生成提示词，打造个性化创作体验
                 </Text>
               </Space>
             </Col>
             <Col xs={24} sm={12} md={10}>
               <Space wrap style={{ justifyContent: isMobile ? 'flex-start' : 'flex-end', width: '100%' }}>
+                <Button
+                  icon={<ArrowLeftOutlined />}
+                  onClick={() => navigate('/projects')}
+                  style={{
+                    borderRadius: 12,
+                    background: 'rgba(255, 255, 255, 0.15)',
+                    border: '1px solid rgba(255, 255, 255, 0.3)',
+                    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+                    color: '#fff',
+                    backdropFilter: 'blur(10px)',
+                    transition: 'all 0.3s ease'
+                  }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.background = 'rgba(255, 255, 255, 0.25)';
+                    e.currentTarget.style.transform = 'translateY(-1px)';
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.background = 'rgba(255, 255, 255, 0.15)';
+                    e.currentTarget.style.transform = 'none';
+                  }}
+                >
+                  返回项目
+                </Button>
                 <Button
                   icon={<DownloadOutlined />}
                   onClick={handleExport}
                   size={isMobile ? 'small' : 'middle'}
-                  style={{ borderRadius: 8 }}
+                  style={{
+                    borderRadius: 12,
+                    background: 'rgba(255, 255, 255, 0.15)',
+                    border: '1px solid rgba(255, 255, 255, 0.3)',
+                    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+                    color: '#fff',
+                    backdropFilter: 'blur(10px)',
+                    transition: 'all 0.3s ease'
+                  }}
                 >
                   导出配置
                 </Button>
@@ -248,7 +285,14 @@ export default function PromptTemplates() {
                   <Button
                     icon={<UploadOutlined />}
                     size={isMobile ? 'small' : 'middle'}
-                    style={{ borderRadius: 8 }}
+                    style={{
+                      borderRadius: 12,
+                      background: 'rgba(255, 255, 255, 0.15)',
+                      border: '1px solid rgba(255, 255, 255, 0.3)',
+                      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+                      color: '#fff',
+                      backdropFilter: 'blur(10px)',
+                    }}
                   >
                     导入配置
                   </Button>
@@ -261,7 +305,7 @@ export default function PromptTemplates() {
           <Alert
             message={
               <Space align="center">
-                <InfoCircleOutlined style={{ fontSize: 16, color: '#1890ff' }} />
+                <InfoCircleOutlined style={{ fontSize: 16, color: 'var(--color-primary)' }} />
                 <Text strong style={{ fontSize: isMobile ? 13 : 14 }}>使用说明</Text>
               </Space>
             }
@@ -280,15 +324,14 @@ export default function PromptTemplates() {
             style={{
               marginTop: isMobile ? 16 : 24,
               borderRadius: 12,
-              background: 'linear-gradient(135deg, #e6f7ff 0%, #f0f5ff 100%)',
+              background: 'var(--color-info-bg)',
-              border: '1px solid #91d5ff'
+              border: '1px solid var(--color-info-border)'
             }}
           />
         </Card>
-      </div>
 
         {/* 主内容区 */}
-      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
+        <div style={{ flex: 1 }}>
           <Spin spinning={loading}>
             {/* 分类标签 */}
             {categories.length > 0 && (
@@ -322,7 +365,7 @@ export default function PromptTemplates() {
                 variant="borderless"
                 style={{
                   background: 'rgba(255, 255, 255, 0.95)',
-                borderRadius: 16,
+                  borderRadius: isMobile ? 12 : 16,
                   boxShadow: '0 8px 32px rgba(0, 0, 0, 0.1)',
                 }}
               >
@@ -345,14 +388,14 @@ export default function PromptTemplates() {
                       {/* 头部 */}
                       <div style={{
                         background: template.is_system_default
-                        ? 'linear-gradient(135deg, #a8a8a8 0%, #636363 100%)'
+                          ? 'var(--color-bg-layout)'
-                        : 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                          : 'var(--color-primary)',
                         padding: isMobile ? '16px' : '20px',
                         position: 'relative'
                       }}>
                         <Space direction="vertical" size={8} style={{ width: '100%' }}>
                           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                          <Title level={isMobile ? 5 : 4} style={{ margin: 0, color: '#fff', flex: 1 }} ellipsis>
+                            <Title level={isMobile ? 5 : 4} style={{ margin: 0, color: template.is_system_default ? 'var(--color-text-primary)' : '#fff', flex: 1 }} ellipsis>
                               {template.template_name}
                             </Title>
                             {!template.is_system_default && (
@@ -365,10 +408,10 @@ export default function PromptTemplates() {
                             )}
                           </div>
                           <Space wrap>
-                          <Tag color="rgba(255,255,255,0.3)" style={{ color: '#fff', border: 'none' }}>
+                            <Tag color={template.is_system_default ? 'default' : 'rgba(255,255,255,0.3)'} style={{ color: template.is_system_default ? 'var(--color-text-secondary)' : '#fff', border: 'none' }}>
                               {template.category}
                             </Tag>
-                          <Tag color="rgba(255,255,255,0.3)" style={{ color: '#fff', border: 'none' }}>
+                            <Tag color={template.is_system_default ? 'default' : 'rgba(255,255,255,0.3)'} style={{ color: template.is_system_default ? 'var(--color-text-secondary)' : '#fff', border: 'none' }}>
                               {template.is_system_default ? '系统默认' : '已自定义'}
                             </Tag>
                           </Space>
@@ -426,6 +469,7 @@ export default function PromptTemplates() {
             )}
           </Spin>
         </div>
+      </div>
 
       {/* 编辑对话框 */}
       <Modal

frontend/src/pages/Settings.tsx

@@ -238,7 +238,7 @@ export default function SettingsPage() {
   return (
     <div style={{
       minHeight: '100vh',
-      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+      background: 'var(--color-bg-base)',
       padding: isMobile ? '16px 12px' : '40px 24px'
     }}>
       <div style={{
@@ -248,9 +248,9 @@ export default function SettingsPage() {
         <Card
           variant="borderless"
           style={{
-            background: 'rgba(255, 255, 255, 0.95)',
+            background: 'var(--color-bg-container)',
             borderRadius: isMobile ? 12 : 16,
-            boxShadow: '0 8px 32px rgba(0, 0, 0, 0.1)',
+            boxShadow: 'var(--shadow-card)',
           }}
           styles={{
             body: {
@@ -281,7 +281,7 @@ export default function SettingsPage() {
                     fontSize: isMobile ? '18px' : undefined
                   }}
                 >
-                  <SettingOutlined style={{ marginRight: 8, color: '#667eea' }} />
+                  <SettingOutlined style={{ marginRight: 8, color: 'var(--color-primary)' }} />
                   {isMobile ? 'API 设置' : 'AI API 设置'}
                 </Title>
               </Space>
@@ -341,7 +341,7 @@ export default function SettingsPage() {
                     <Space size={4}>
                       <span>API 提供商</span>
                       <Tooltip title="选择你的AI服务提供商">
-                        <InfoCircleOutlined style={{ color: '#8c8c8c', fontSize: isMobile ? '12px' : '14px' }} />
+                        <InfoCircleOutlined style={{ color: 'var(--color-text-secondary)', fontSize: isMobile ? '12px' : '14px' }} />
                       </Tooltip>
                     </Space>
                   }
@@ -362,7 +362,7 @@ export default function SettingsPage() {
                     <Space size={4}>
                       <span>API 密钥</span>
                       <Tooltip title="你的API密钥，将加密存储">
-                        <InfoCircleOutlined style={{ color: '#8c8c8c', fontSize: isMobile ? '12px' : '14px' }} />
+                        <InfoCircleOutlined style={{ color: 'var(--color-text-secondary)', fontSize: isMobile ? '12px' : '14px' }} />
                       </Tooltip>
                     </Space>
                   }
@@ -381,7 +381,7 @@ export default function SettingsPage() {
                     <Space size={4}>
                       <span>API 地址</span>
                       <Tooltip title="API的基础URL地址">
-                        <InfoCircleOutlined style={{ color: '#8c8c8c', fontSize: isMobile ? '12px' : '14px' }} />
+                        <InfoCircleOutlined style={{ color: 'var(--color-text-secondary)', fontSize: isMobile ? '12px' : '14px' }} />
                       </Tooltip>
                     </Space>
                   }
@@ -402,7 +402,7 @@ export default function SettingsPage() {
                     <Space size={4}>
                       <span>模型名称</span>
                       <Tooltip title="AI模型的名称，如 gpt-4, gpt-3.5-turbo">
-                        <InfoCircleOutlined style={{ color: '#8c8c8c', fontSize: isMobile ? '12px' : '14px' }} />
+                        <InfoCircleOutlined style={{ color: 'var(--color-text-secondary)', fontSize: isMobile ? '12px' : '14px' }} />
                       </Tooltip>
                     </Space>
                   }
@@ -424,7 +424,7 @@ export default function SettingsPage() {
                       <>
                         {menu}
                         {fetchingModels && (
-                          <div style={{ padding: '8px 12px', color: '#8c8c8c', textAlign: 'center', fontSize: isMobile ? '12px' : '14px' }}>
+                          <div style={{ padding: '8px 12px', color: 'var(--color-text-secondary)', textAlign: 'center', fontSize: isMobile ? '12px' : '14px' }}>
                             <Spin size="small" /> 正在获取模型列表...
                           </div>
                         )}
@@ -434,7 +434,7 @@ export default function SettingsPage() {
                           </div>
                         )}
                         {!fetchingModels && modelOptions.length === 0 && !modelsFetched && (
-                          <div style={{ padding: '8px 12px', color: '#8c8c8c', textAlign: 'center', fontSize: isMobile ? '12px' : '14px' }}>
+                          <div style={{ padding: '8px 12px', color: 'var(--color-text-secondary)', textAlign: 'center', fontSize: isMobile ? '12px' : '14px' }}>
                             点击输入框自动获取模型列表
                           </div>
                         )}
@@ -446,7 +446,7 @@ export default function SettingsPage() {
                           <Spin size="small" /> 加载中...
                         </div>
                       ) : (
-                        <div style={{ padding: '8px 12px', color: '#8c8c8c', textAlign: 'center', fontSize: isMobile ? '12px' : '14px' }}>
+                        <div style={{ padding: '8px 12px', color: 'var(--color-text-secondary)', textAlign: 'center', fontSize: isMobile ? '12px' : '14px' }}>
                           未找到匹配的模型
                         </div>
                       )
@@ -506,7 +506,7 @@ export default function SettingsPage() {
                     <Space size={4}>
                       <span>温度参数</span>
                       <Tooltip title="控制输出的随机性，值越高越随机（0.0-2.0）">
-                        <InfoCircleOutlined style={{ color: '#8c8c8c', fontSize: isMobile ? '12px' : '14px' }} />
+                        <InfoCircleOutlined style={{ color: 'var(--color-text-secondary)', fontSize: isMobile ? '12px' : '14px' }} />
                       </Tooltip>
                     </Space>
                   }
@@ -530,7 +530,7 @@ export default function SettingsPage() {
                     <Space size={4}>
                       <span>最大 Token 数</span>
                       <Tooltip title="单次请求的最大token数量">
-                        <InfoCircleOutlined style={{ color: '#8c8c8c', fontSize: isMobile ? '12px' : '14px' }} />
+                        <InfoCircleOutlined style={{ color: 'var(--color-text-secondary)', fontSize: isMobile ? '12px' : '14px' }} />
                       </Tooltip>
                     </Space>
                   }
@@ -554,9 +554,9 @@ export default function SettingsPage() {
                     message={
                       <Space>
                         {testResult.success ? (
-                          <CheckCircleOutlined style={{ color: '#52c41a', fontSize: isMobile ? '16px' : '18px' }} />
+                          <CheckCircleOutlined style={{ color: 'var(--color-success)', fontSize: isMobile ? '16px' : '18px' }} />
                         ) : (
-                          <CloseCircleOutlined style={{ color: '#ff4d4f', fontSize: isMobile ? '16px' : '18px' }} />
+                          <CloseCircleOutlined style={{ color: 'var(--color-error)', fontSize: isMobile ? '16px' : '18px' }} />
                         )}
                         <span style={{ fontSize: isMobile ? '14px' : '16px', fontWeight: 500 }}>
                           {testResult.message}
@@ -585,7 +585,7 @@ export default function SettingsPage() {
                                 <div style={{ color: '#595959' }}>{testResult.response_preview}</div>
                               </div>
                             )}
-                            <div style={{ color: '#52c41a', fontSize: isMobile ? '12px' : '13px', marginTop: '4px' }}>
+                            <div style={{ color: 'var(--color-success)', fontSize: isMobile ? '12px' : '13px', marginTop: '4px' }}>
                               ✓ API 配置正确，可以正常使用
                             </div>
                           </Space>
@@ -604,7 +604,7 @@ export default function SettingsPage() {
                               </div>
                             )}
                             {testResult.error_type && (
-                              <div style={{ fontSize: isMobile ? '11px' : '12px', color: '#8c8c8c' }}>
+                              <div style={{ fontSize: isMobile ? '11px' : '12px', color: 'var(--color-text-secondary)' }}>
                                 错误类型: {testResult.error_type}
                               </div>
                             )}
@@ -649,7 +649,7 @@ export default function SettingsPage() {
                         loading={loading}
                         block
                         style={{
-                            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                          background: 'var(--color-primary)',
                           border: 'none',
                           height: '44px'
                         }}
@@ -663,8 +663,8 @@ export default function SettingsPage() {
                         loading={testingApi}
                         block
                         style={{
-                            borderColor: '#52c41a',
+                          borderColor: 'var(--color-success)',
-                            color: '#52c41a',
+                          color: 'var(--color-success)',
                           fontWeight: 500,
                           height: '44px'
                         }}
@@ -729,8 +729,8 @@ export default function SettingsPage() {
                           onClick={handleTestConnection}
                           loading={testingApi}
                           style={{
-                            borderColor: '#52c41a',
+                            borderColor: 'var(--color-success)',
-                            color: '#52c41a',
+                            color: 'var(--color-success)',
                             fontWeight: 500,
                             minWidth: '100px'
                           }}
@@ -754,7 +754,7 @@ export default function SettingsPage() {
                           htmlType="submit"
                           loading={loading}
                           style={{
-                            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                            background: 'var(--color-primary)',
                             border: 'none',
                             minWidth: '120px',
                             fontWeight: 500

frontend/src/pages/Sponsor.tsx

@@ -28,17 +28,17 @@ const sponsorOptions: SponsorOption[] = [
 
 const benefits = [
     {
-        icon: <FileTextOutlined style={{ fontSize: '32px', color: '#1890ff' }} />,
+        icon: <FileTextOutlined style={{ fontSize: '32px', color: 'var(--color-primary)' }} />,
         title: '优先需求响应',
         description: '您的功能需求和问题反馈将获得优先处理'
     },
     {
-        icon: <RocketOutlined style={{ fontSize: '32px', color: '#52c41a' }} />,
+        icon: <RocketOutlined style={{ fontSize: '32px', color: 'var(--color-success)' }} />,
         title: 'Windows一键启动',
         description: '获取免安装EXE程序，双击即可使用'
     },
     {
-        icon: <MessageOutlined style={{ fontSize: '32px', color: '#fa8c16' }} />,
+        icon: <MessageOutlined style={{ fontSize: '32px', color: 'var(--color-warning)' }} />,
         title: '专属技术支持',
         description: '加入赞助者群，获得远程协助和配置指导'
     }
@@ -75,7 +75,7 @@ export default function Sponsor() {
                     <div style={{
                         marginTop: '16px',
                         padding: '16px',
-                        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                        background: 'var(--color-primary)',
                         borderRadius: '12px',
                         color: '#fff'
                     }}>
@@ -91,7 +91,7 @@ export default function Sponsor() {
                 {/* 赞助专属权益 */}
                 <div style={{ marginBottom: '32px' }}>
                     <Title level={3} style={{ textAlign: 'center', marginBottom: '20px' }}>
-                        <CheckCircleOutlined style={{ color: '#52c41a', marginRight: '8px' }} />
+                        <CheckCircleOutlined style={{ color: 'var(--color-success)', marginRight: '8px' }} />
                         赞助专属权益
                     </Title>
 
@@ -139,27 +139,27 @@ export default function Sponsor() {
                                     style={{
                                         textAlign: 'center',
                                         borderRadius: '10px',
-                                        boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
+                                        boxShadow: 'var(--shadow-card)',
                                         cursor: 'pointer',
                                         transition: 'all 0.3s',
-                                        border: '2px solid #f0f0f0'
+                                        border: '2px solid var(--color-border)'
                                     }}
                                     styles={{
                                         body: { padding: '20px 12px' }
                                     }}
                                     onMouseEnter={(e) => {
                                         e.currentTarget.style.transform = 'translateY(-8px)';
-                                        e.currentTarget.style.boxShadow = '0 8px 24px rgba(0,0,0,0.15)';
+                                        e.currentTarget.style.boxShadow = 'var(--shadow-elevated)';
-                                        e.currentTarget.style.borderColor = '#1890ff';
+                                        e.currentTarget.style.borderColor = 'var(--color-primary)';
                                     }}
                                     onMouseLeave={(e) => {
                                         e.currentTarget.style.transform = 'translateY(0)';
-                                        e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.08)';
+                                        e.currentTarget.style.boxShadow = 'var(--shadow-card)';
-                                        e.currentTarget.style.borderColor = '#f0f0f0';
+                                        e.currentTarget.style.borderColor = 'var(--color-border)';
                                     }}
                                 >
                                     <Title level={3} style={{
-                                        color: '#1890ff',
+                                        color: 'var(--color-primary)',
                                         marginBottom: '4px',
                                         fontSize: '28px',
                                         fontWeight: 'bold'

frontend/src/pages/UserManagement.tsx

@@ -59,6 +59,7 @@ export default function UserManagement() {
 
   const [form] = Form.useForm();
   const [editForm] = Form.useForm();
+  const [modal, contextHolder] = Modal.useModal();
 
   // 过滤用户列表
   const filteredUsers = users.filter(user => {
@@ -97,7 +98,7 @@ export default function UserManagement() {
 
       // 如果有默认密码，显示给管理员
       if (res.default_password) {
-        Modal.info({
+        modal.info({
           title: '用户创建成功',
           content: (
             <div>
@@ -180,7 +181,7 @@ export default function UserManagement() {
         newPassword || undefined
       );
 
-      Modal.info({
+      modal.info({
         title: '密码重置成功',
         content: (
           <div>
@@ -226,7 +227,7 @@ export default function UserManagement() {
       width: 150,
       render: (text: string) => (
         <Space>
-          <UserOutlined style={{ color: '#1890ff' }} />
+          <UserOutlined style={{ color: 'var(--color-primary)' }} />
           <Text strong>{text}</Text>
         </Space>
       ),
@@ -314,7 +315,7 @@ export default function UserManagement() {
               icon: isActive ? <StopOutlined /> : <CheckCircleOutlined />,
               danger: isActive,
               onClick: () => {
-                Modal.confirm({
+                modal.confirm({
                   title: `确定${isActive ? '禁用' : '启用'}该用户吗？`,
                   onOk: () => handleToggleStatus(record),
                   okText: '确定',
@@ -328,7 +329,7 @@ export default function UserManagement() {
               icon: <DeleteOutlined />,
               danger: true,
               onClick: () => {
-                Modal.confirm({
+                modal.confirm({
                   title: '确定删除该用户吗？此操作不可恢复！',
                   onOk: () => handleDelete(record),
                   okText: '确定',
@@ -418,12 +419,13 @@ export default function UserManagement() {
   return (
     <div style={{
       height: '100vh',
-      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+      background: 'linear-gradient(180deg, var(--color-bg-base) 0%, #EEF2F3 100%)',
       padding: isMobile ? '20px 16px' : '40px 24px',
       display: 'flex',
       flexDirection: 'column',
       overflow: 'hidden',
     }}>
+      {contextHolder}
       <div style={{
         maxWidth: 1400,
         margin: '0 auto',
@@ -437,20 +439,28 @@ export default function UserManagement() {
         <Card
           variant="borderless"
           style={{
-            background: 'rgba(255, 255, 255, 0.95)',
+            background: 'linear-gradient(135deg, var(--color-primary) 0%, #5A9BA5 50%, var(--color-primary-hover) 100%)',
-            borderRadius: isMobile ? 12 : 16,
+            borderRadius: isMobile ? 16 : 24,
-            boxShadow: '0 8px 32px rgba(0, 0, 0, 0.1)',
+            boxShadow: '0 12px 40px rgba(77, 128, 136, 0.25), 0 4px 12px rgba(0, 0, 0, 0.06)',
             marginBottom: isMobile ? 20 : 24,
+            border: 'none',
+            position: 'relative',
+            overflow: 'hidden'
           }}
         >
-          <Row align="middle" justify="space-between" gutter={[16, 16]}>
+          {/* 装饰性背景元素 */}
+          <div style={{ position: 'absolute', top: -60, right: -60, width: 200, height: 200, borderRadius: '50%', background: 'rgba(255, 255, 255, 0.08)', pointerEvents: 'none' }} />
+          <div style={{ position: 'absolute', bottom: -40, left: '30%', width: 120, height: 120, borderRadius: '50%', background: 'rgba(255, 255, 255, 0.05)', pointerEvents: 'none' }} />
+          <div style={{ position: 'absolute', top: '50%', right: '15%', width: 80, height: 80, borderRadius: '50%', background: 'rgba(255, 255, 255, 0.06)', pointerEvents: 'none' }} />
+
+          <Row align="middle" justify="space-between" gutter={[16, 16]} style={{ position: 'relative', zIndex: 1 }}>
             <Col xs={24} sm={12}>
               <Space direction="vertical" size={4}>
-                <Title level={isMobile ? 3 : 2} style={{ margin: 0 }}>
+                <Title level={isMobile ? 3 : 2} style={{ margin: 0, color: '#fff', textShadow: '0 2px 4px rgba(0,0,0,0.1)' }}>
-                  <TeamOutlined style={{ color: '#fa8c16', marginRight: 8 }} />
+                  <TeamOutlined style={{ color: 'rgba(255,255,255,0.9)', marginRight: 12 }} />
                   用户管理
                 </Title>
-                <Text type="secondary" style={{ fontSize: isMobile ? 12 : 14 }}>
+                <Text style={{ fontSize: isMobile ? 12 : 14, color: 'rgba(255,255,255,0.85)' }}>
                   管理系统用户和权限
                 </Text>
               </Space>
@@ -461,20 +471,21 @@ export default function UserManagement() {
                   icon={<ArrowLeftOutlined />}
                   onClick={() => navigate('/')}
                   style={{
-                    borderRadius: 8,
+                    borderRadius: 12,
-                    borderColor: '#d9d9d9',
+                    background: 'rgba(255, 255, 255, 0.15)',
-                    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
+                    border: '1px solid rgba(255, 255, 255, 0.3)',
+                    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+                    color: '#fff',
+                    backdropFilter: 'blur(10px)',
                     transition: 'all 0.3s ease'
                   }}
                   onMouseEnter={(e) => {
-                    e.currentTarget.style.borderColor = '#667eea';
+                    e.currentTarget.style.background = 'rgba(255, 255, 255, 0.25)';
-                    e.currentTarget.style.color = '#667eea';
+                    e.currentTarget.style.transform = 'translateY(-1px)';
-                    e.currentTarget.style.boxShadow = '0 2px 12px rgba(102, 126, 234, 0.3)';
                   }}
                   onMouseLeave={(e) => {
-                    e.currentTarget.style.borderColor = '#d9d9d9';
+                    e.currentTarget.style.background = 'rgba(255, 255, 255, 0.15)';
-                    e.currentTarget.style.color = 'rgba(0, 0, 0, 0.88)';
+                    e.currentTarget.style.transform = 'none';
-                    e.currentTarget.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.08)';
                   }}
                 >
                   返回主页
@@ -484,10 +495,12 @@ export default function UserManagement() {
                   icon={<PlusOutlined />}
                   onClick={() => setModalVisible(true)}
                   style={{
-                    borderRadius: 8,
+                    borderRadius: 12,
-                    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                    background: 'rgba(255, 193, 7, 0.95)',
-                    border: 'none',
+                    border: '1px solid rgba(255, 255, 255, 0.3)',
-                    boxShadow: '0 2px 8px rgba(102, 126, 234, 0.4)'
+                    boxShadow: '0 4px 16px rgba(255, 193, 7, 0.4)',
+                    color: '#fff',
+                    fontWeight: 600
                   }}
                 >
                   添加用户
@@ -502,9 +515,11 @@ export default function UserManagement() {
         <Card
           variant="borderless"
           style={{
-            background: 'rgba(255, 255, 255, 0.95)',
+            background: 'rgba(255, 255, 255, 0.7)',
-            borderRadius: isMobile ? 12 : 16,
+            borderRadius: isMobile ? 16 : 24,
-            boxShadow: '0 8px 32px rgba(0, 0, 0, 0.1)',
+            border: '1px solid rgba(255, 255, 255, 0.4)',
+            backdropFilter: 'blur(20px)',
+            boxShadow: '0 4px 24px rgba(0, 0, 0, 0.04)',
             flex: 1,
             display: 'flex',
             flexDirection: 'column',
@@ -521,7 +536,7 @@ export default function UserManagement() {
           {/* 搜索栏 */}
           <div style={{
             padding: '16px 24px 0 24px',
-            borderBottom: '1px solid #f0f0f0',
+            borderBottom: '1px solid rgba(0, 0, 0, 0.03)',
           }}>
             <Input
               placeholder="搜索用户名、显示名称或用户ID"
@@ -560,8 +575,8 @@ export default function UserManagement() {
           {/* 固定分页控件 */}
           <div style={{
             padding: '16px 24px 24px 24px',
-            borderTop: '1px solid #f0f0f0',
+            borderTop: '1px solid rgba(0, 0, 0, 0.03)',
-            background: 'rgba(255, 255, 255, 0.95)',
+            background: 'transparent',
             display: 'flex',
             justifyContent: 'center',
           }}>

frontend/src/pages/WorldSetting.tsx

@@ -25,12 +25,13 @@ export default function WorldSetting() {
     rules: string;
   } | null>(null);
   const [isSavingPreview, setIsSavingPreview] = useState(false);
+  const [modal, contextHolder] = Modal.useModal();
 
   // AI重新生成世界观
   const handleRegenerate = async () => {
     if (!currentProject) return;
 
-    Modal.confirm({
+    modal.confirm({
       title: '确认重新生成',
       content: '确定要使用AI重新生成世界观设定吗？这将替换当前的世界观内容。',
       centered: true,
@@ -139,11 +140,11 @@ export default function WorldSetting() {
           backgroundColor: '#fff',
           padding: '16px 0',
           marginBottom: 16,
-          borderBottom: '1px solid #f0f0f0',
+          borderBottom: '1px solid var(--color-border-secondary)',
           display: 'flex',
           alignItems: 'center'
         }}>
-          <GlobalOutlined style={{ fontSize: 24, marginRight: 12, color: '#1890ff' }} />
+          <GlobalOutlined style={{ fontSize: 24, marginRight: 12, color: 'var(--color-primary)' }} />
           <h2 style={{ margin: 0 }}>世界设定</h2>
         </div>
 
@@ -164,6 +165,7 @@ export default function WorldSetting() {
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+      {contextHolder}
       {/* 固定头部 */}
       <div style={{
         position: 'sticky',
@@ -178,7 +180,7 @@ export default function WorldSetting() {
         justifyContent: 'space-between'
       }}>
         <div style={{ display: 'flex', alignItems: 'center' }}>
-          <GlobalOutlined style={{ fontSize: 24, marginRight: 12, color: '#1890ff' }} />
+          <GlobalOutlined style={{ fontSize: 24, marginRight: 12, color: 'var(--color-primary)' }} />
           <h2 style={{ margin: 0 }}>世界设定</h2>
         </div>
         <Space>
@@ -249,16 +251,16 @@ export default function WorldSetting() {
           <div style={{ padding: '16px 0' }}>
             {currentProject.world_time_period && (
               <div style={{ marginBottom: 24 }}>
-              <Title level={5} style={{ color: '#1890ff', marginBottom: 12 }}>
+                <Title level={5} style={{ color: 'var(--color-primary)', marginBottom: 12 }}>
                   时间设定
                 </Title>
                 <Paragraph style={{
                   fontSize: 15,
                   lineHeight: 1.8,
                   padding: 16,
-                background: '#f5f5f5',
+                  background: 'var(--color-bg-layout)',
                   borderRadius: 8,
-                borderLeft: '4px solid #1890ff'
+                  borderLeft: '4px solid var(--color-primary)'
                 }}>
                   {currentProject.world_time_period}
                 </Paragraph>
@@ -267,16 +269,16 @@ export default function WorldSetting() {
 
             {currentProject.world_location && (
               <div style={{ marginBottom: 24 }}>
-              <Title level={5} style={{ color: '#52c41a', marginBottom: 12 }}>
+                <Title level={5} style={{ color: 'var(--color-success)', marginBottom: 12 }}>
                   地点设定
                 </Title>
                 <Paragraph style={{
                   fontSize: 15,
                   lineHeight: 1.8,
                   padding: 16,
-                background: '#f5f5f5',
+                  background: 'var(--color-bg-layout)',
                   borderRadius: 8,
-                borderLeft: '4px solid #52c41a'
+                  borderLeft: '4px solid var(--color-success)'
                 }}>
                   {currentProject.world_location}
                 </Paragraph>
@@ -285,16 +287,16 @@ export default function WorldSetting() {
 
             {currentProject.world_atmosphere && (
               <div style={{ marginBottom: 24 }}>
-              <Title level={5} style={{ color: '#faad14', marginBottom: 12 }}>
+                <Title level={5} style={{ color: 'var(--color-warning)', marginBottom: 12 }}>
                   氛围设定
                 </Title>
                 <Paragraph style={{
                   fontSize: 15,
                   lineHeight: 1.8,
                   padding: 16,
-                background: '#f5f5f5',
+                  background: 'var(--color-bg-layout)',
                   borderRadius: 8,
-                borderLeft: '4px solid #faad14'
+                  borderLeft: '4px solid var(--color-warning)'
                 }}>
                   {currentProject.world_atmosphere}
                 </Paragraph>
@@ -303,16 +305,16 @@ export default function WorldSetting() {
 
             {currentProject.world_rules && (
               <div style={{ marginBottom: 0 }}>
-              <Title level={5} style={{ color: '#f5222d', marginBottom: 12 }}>
+                <Title level={5} style={{ color: 'var(--color-error)', marginBottom: 12 }}>
                   规则设定
                 </Title>
                 <Paragraph style={{
                   fontSize: 15,
                   lineHeight: 1.8,
                   padding: 16,
-                background: '#f5f5f5',
+                  background: 'var(--color-bg-layout)',
                   borderRadius: 8,
-                borderLeft: '4px solid #f5222d'
+                  borderLeft: '4px solid var(--color-error)'
                 }}>
                   {currentProject.world_rules}
                 </Paragraph>
@@ -440,14 +442,14 @@ export default function WorldSetting() {
       >
         {newWorldData && (
           <div style={{ maxHeight: '60vh', overflowY: 'auto' }}>
-            <div style={{ marginBottom: 24, padding: 16, background: '#fff7e6', border: '1px solid #ffd591', borderRadius: 8 }}>
+            <div style={{ marginBottom: 24, padding: 16, background: 'var(--color-warning-bg)', border: '1px solid var(--color-warning-border)', borderRadius: 8 }}>
               <Typography.Text type="warning" strong>
                 ⚠️ 注意：点击"确认替换"将会用新内容替换当前的世界观设定
               </Typography.Text>
             </div>
 
             <div style={{ marginBottom: 24 }}>
-              <Title level={5} style={{ color: '#1890ff', marginBottom: 12 }}>
+              <Title level={5} style={{ color: 'var(--color-primary)', marginBottom: 12 }}>
                 时间设定
               </Title>
               <Paragraph style={{