xiaoxia-saas/apps/web/src/main.tsx

/**
 * 更新主入口，引入全局样式
 * 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, App as AntApp } 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: 24,
    borderRadiusSM: 8,

    // 文字色
    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}>
        <AntApp>
          <RouterProvider router={router} />
        </AntApp>
      </ConfigProvider>
    </QueryClientProvider>
  </React.StrictMode>,
)