Files
xiaoxia-saas/apps/web/src/main.tsx
T
CI Test e5c01890f4
CI/CD Pipeline / Validate Code Quality And Tests (push) Waiting to run
CI/CD Pipeline / Validate Code Quality And Tests (pull_request) Waiting to run
feat: 全面对齐 V21 设计系统 - Indigo主色/大圆角/毛玻璃/渐变背景
2026-06-26 21:16:21 +08:00

99 lines
2.3 KiB
TypeScript

/**
* 更新主入口,引入全局样式
* V21 设计系统配置
*/
import React from 'react';
import ReactDOM from 'react-dom/client';
import { RouterProvider } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ConfigProvider } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import router from './router';
import './index.css';
import './styles/global.css';
// 创建 React Query 客户端
const queryClient = new QueryClient({
defaultOptions: {
queries: {
retry: 1,
refetchOnWindowFocus: false,
staleTime: 5 * 60 * 1000, // 5 分钟
gcTime: 10 * 60 * 1000, // 10 分钟
},
},
});
// V21 Ant Design 主题配置 - Indigo 主色 / 大圆角
const theme = {
token: {
// 主色调 - Indigo
colorPrimary: '#4f46e5',
colorSuccess: '#10b981',
colorWarning: '#f59e0b',
colorError: '#ef4444',
colorInfo: '#4f46e5',
// 圆角 - V21 大圆角
borderRadius: 14,
borderRadiusLG: 22,
borderRadiusSM: 10,
// 文字色
colorText: '#0f172a',
colorTextSecondary: '#64748b',
colorTextTertiary: '#94a3b8',
// 背景色
colorBgContainer: '#ffffff',
colorBgLayout: '#f8fafc',
// 边框色
colorBorder: '#e2e8f0',
colorBorderSecondary: '#f1f5f9',
// 阴影
boxShadow: '0 10px 30px rgba(15, 23, 42, 0.06)',
boxShadowSecondary: '0 24px 70px rgba(15, 23, 42, 0.09)',
},
components: {
Button: {
// 按钮圆角
borderRadius: 14,
// 主按钮渐变通过 CSS 实现
colorPrimary: '#4f46e5',
colorPrimaryHover: '#6366f1',
primaryShadow: '0 14px 26px rgba(79, 70, 229, 0.22)',
},
Card: {
borderRadiusLG: 28,
paddingLG: 28,
},
Input: {
borderRadius: 14,
},
Select: {
borderRadius: 14,
},
Modal: {
borderRadiusLG: 28,
},
InputNumber: {
borderRadius: 14,
},
DatePicker: {
borderRadius: 14,
},
},
};
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<QueryClientProvider client={queryClient}>
<ConfigProvider locale={zhCN} theme={theme}>
<RouterProvider router={router} />
</ConfigProvider>
</QueryClientProvider>
</React.StrictMode>
);