refactor: ♻️ 使用Ant Design全局化配置

frontend/src/components/PlayerLayout.tsx

@@ -1,4 +1,4 @@
-import { Layout, Menu, Button, Dropdown } from 'antd';
+import { Layout, Menu, Button, Dropdown, theme } from 'antd';
 import {
   HomeOutlined,
   UserOutlined,
@@ -12,6 +12,9 @@ import { playerAuthService } from '../services/playerAuthService';
 const { Header, Content, Footer } = Layout;
 
 const PlayerLayout = () => {
+  const {
+    token: { colorBgContainer, colorBgLayout },
+  } = theme.useToken();
   const navigate = useNavigate();
   const location = useLocation();
 
@@ -55,7 +58,7 @@ const PlayerLayout = () => {
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'space-between',
-          background: '#001529',
+          background: colorBgLayout,
           padding: '0 24px',
         }}
       >
@@ -93,7 +96,7 @@ const PlayerLayout = () => {
         style={{
           padding: '24px 50px',
           minHeight: 'calc(100vh - 128px)',
-          background: '#f0f2f5',
+          background: colorBgContainer,
         }}
       >
         <div style={{ padding: 24, minHeight: 380, background: 'white', borderRadius: 8 }}>
@@ -103,7 +106,7 @@ const PlayerLayout = () => {
       <Footer
         style={{
           textAlign: 'center',
-          background: '#001529',
+          background: colorBgLayout,
           color: 'rgba(255, 255, 255, 0.65)',
         }}
       >

frontend/src/main.tsx

@@ -1,14 +1,21 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { RouterProvider } from 'react-router-dom';
-import { ConfigProvider } from 'antd';
+import { ConfigProvider, theme } from 'antd';
 import zhCN from 'antd/locale/zh_CN';
 import './index.css';
 import router from './router';
+import { appTheme } from './theme';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <ConfigProvider locale={zhCN}>
+    <ConfigProvider 
+      locale={zhCN} 
+      theme={{
+        algorithm: theme.defaultAlgorithm,
+        ...appTheme,
+      }}
+    >
       <RouterProvider router={router} />
     </ConfigProvider>
   </StrictMode>,

frontend/src/theme/index.ts

@@ -0,0 +1,39 @@
+// 全局主题配置
+import type { ThemeConfig } from 'antd';
+
+// 自定义主题配置
+export const appTheme: ThemeConfig = {
+  token: {
+    // 主色调
+    colorPrimary: '#1890ff',
+    colorSuccess: '#52c41a',
+    colorWarning: '#faad14',
+    colorError: '#ff4d4f',
+    colorInfo: '#1890ff',
+    
+    // 字体设置
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    fontSize: 14,
+    
+    // 圆角
+    borderRadius: 6,
+  },
+  
+  components: {
+    // Layout 组件主题
+    Layout: {
+      headerBg: '#001529', // 顶部导航和侧边栏背景色
+      footerBg: '#001529', // 页脚背景色
+      siderBg: '#001529', // 侧边栏背景色
+    },
+    
+    // Menu 组件主题
+    Menu: {
+      darkItemSelectedBg: '#1890ff', // 菜单激活背景色
+      darkItemHoverBg: 'rgba(24, 144, 255, 0.2)', // 菜单悬停背景色
+      darkItemColor: 'rgba(255, 255, 255, 0.65)', // 菜单项文字颜色
+      darkItemSelectedColor: '#fff', // 菜单激活文字颜色
+      darkItemHoverColor: '#fff', // 菜单悬停文字颜色
+    },
+  },
+};