chat-admin-web/src/App.tsx

import * as React from 'react';
import { RouterProvider } from 'react-router-dom';
import {
    ConfigProvider as AntdConfigProvider,
    App as AntdApp,
    message,
    notification,
} from 'antd';
import zhCN from 'antd/locale/zh_CN';
import router from '@/router';

interface ConfigProviderProps {
    children: React.ReactNode,
}

// Ant-Design全局化配置
const ConfigProvider: React.FC<ConfigProviderProps> = (props: ConfigProviderProps) => {
    function getDesignToken() {
        // 获取元素
        const root = document.getElementById('root');
        // 获取元素计算样式
        const styles = getComputedStyle(root!);
        // 获取Ant-Design主题-属性
        const colorPrimary = styles.getPropertyValue('--primary-color');
        const colorTextBase = styles.getPropertyValue('--text-color');
        const borderRadiusArray = styles.getPropertyValue('--border-radius').match(/\d+/);

        return {
            colorPrimary: colorPrimary || undefined,
            colorTextBase: colorTextBase || undefined,
            borderRadius: borderRadiusArray ? Number(borderRadiusArray[0]) : undefined,
        }
    }

    const designToken = getDesignToken();

    return (
        <AntdConfigProvider
            // 组件-中文
            locale={zhCN}
            // 警告等级
            warning={{
                strict: true,// 严格模式
            }}
            // 渲染父节点到body上
            getPopupContainer={() => document.body}
            // 设置主题
            theme={{
                token: {
                    colorPrimary: designToken.colorPrimary,// 主题颜色
                    colorTextBase: designToken.colorTextBase,// 文本颜色
                    borderRadius: designToken.borderRadius,// 圆角大小
                },
                components: {
                    Table: {
                        headerBg: '#F7F8FA',
                        headerSplitColor: 'transparent',
                    },
                },
            }}
            /* 组件配置 */
            button={{
                autoInsertSpace: false,// 移除按钮两个汉字之间的空格
            }}
        >
            {props.children}
        </AntdConfigProvider>
    );
}

const App: React.FC = () => {
    // 全局提示
    message.config({
        duration: 2,// 2秒自动关闭
        maxCount: 1,// 最多显示1条
    });

    // 通知提醒
    notification.config({
        duration: 2,// 2秒自动关闭
        maxCount: 1,// 最多显示1条
    });

    // 全局配置
    AntdConfigProvider.config({
        // 静态方法
        holderRender: (children) => (
            <ConfigProvider>
                {children}
            </ConfigProvider>
        )
    });

    return (
        <ConfigProvider>
            <AntdApp style={{ height: '100%', lineHeight: 'normal' }}>
                <RouterProvider router={router} />
            </AntdApp>
        </ConfigProvider>
    );
};

export default App;