qc-EnterpriseWeChat-Pro/src/Hook/useNewToken.tsx

import { ConfigProvider, GlobalToken, theme, ThemeConfig } from "antd"
import { useMemo } from "react"
/**
 * 全局色使用
 * **/
const { darkAlgorithm, compactAlgorithm, useToken } = theme
/** 常用配置字段
 * colorTextBase 基础文字颜色
 * colorBgBase 基础背景色
 * colorPrimary 主题色
 * fontSize 文字大小
 * borderRadius 圆角
 * colorInfo 信息色
 * colorError 错误色
 * colorWarning 警告色
 * colorSuccess 成功色
 * */
let themeConfig = {
    v: '1.0',
    type: 'light',//dark || 
    acPrimary: 'default',
    "acTextColor": "rgba(74,74,74,1)",
	"acLayout": "rgba(12,37,61,1)",
	"acContainer": "rgba(247,247,247,1)",
	"dfcolorBorder": "rgba(134,140,148,0.5)",
	"dfcolorBorderSecondary": "rgb(228, 228, 228)", //"rgba(152,196,245,0)",
	"dfcolorTextQuaternary": "rgba(0, 0, 0, 0.25)",
	"dfContentBgColor": "rgba(255,255,255,1)",
	"dfcolorLink": "#1677ff",
	"cardColorBorder": "#d5d5d5",
	"cardColorBorderSecondary": "rgba(155,155,155,0.1)",
	"cardColorBgContainer": "rgba(247,247,247,1)",
	"tableColorBgContainer": "rgb(255, 255, 255)",
	"tablePaddingXS": 4,
	"colorBgElevated": "rgba(255,255,255,1)",
	"colorBgMask": "rgba(0,0,0,0.45)",
	"myBgUrl": "",
	"colorInfo": "rgba(22,119,255,1)",
	"colorInfoBg": "rgba(250,173,20,0)",
	"colorInfoBorder": "rgba(255,255,255,0)",
	"colorError": "#ff4d4f",
	"colorErrorBg": "#fff2f0",
	"colorErrorBorder": "#ffccc7",
	"colorSuccess": "#52c41a",
	"colorSuccessBg": "#f6ffed",
	"colorSuccessBorder": "#b7eb8f",
	"colorWarning": "rgba(250,173,20,1)",
	"colorWarningBg": "#fffbe6",
	"colorWarningBorder": "#ffe58f",
	"controlItemBgActive": "rgba(0,21,40,0)",
	"controlItemBgActiveTable": "#e6f4ff",
	"controlItemBgActiveHover": "rgba(186,224,255,1)",
	"colorFillAlter": "rgba(0, 0, 0, 0.02)",
	"colorPrimaryBgHover": "rgba(186,224,255,0.4)",
	"colorMenuText": "rgba(255,255,255,1)",
    // acTextColor: '#000',//基础文字颜色
    // acLayout: 'rgba(247, 247, 247, 0.5)',//路由背景
    // acContainer: 'rgba(247, 247, 247, 0.6)',//输入容器背景
    // dfcolorBorder: 'rgba(175,175,175,1)',//外部边框颜色
    // dfcolorBorderSecondary: '#f0f0f0',//内部边框色
    // dfcolorTextQuaternary: 'rgba(0, 0, 0, 0.25)',//输入提示色
    // dfContentBgColor: 'rgba(247, 247, 247, 0.6)',//背景色
    // dfcolorLink: '#1677ff',//链接色
    // cardColorBorder: '#d5d5d5',//卡片外部边框色
    // cardColorBorderSecondary: '#d5d5d5',//卡片内部边框色
    // cardColorBgContainer: 'rgba(247, 247, 247, 0)',//卡片背景色
    // tableColorBgContainer: 'rgba(247, 247, 247, 0)',//表格背景色
    // tablePaddingXS: 4,//表格内边距
    // colorBgElevated: 'rgba(255,255,255,1)',//弹窗背景色
    // colorBgMask: 'rgba(0, 0, 0, 0.45)',//弹窗遮罩层颜色
    // myBgUrl: 'https://p9.qhimg.com/bdm/2560_1600_0/t01efb6b0204ffcaf78.jpg',//'https://p9.qhimg.com/bdm/2560_1600_0/t01efb6b0204ffcaf78.jpg'
    // colorInfo: '#1677ff',//用于表示操作信息的 Token 序列，如 Alert 、Tag、 Progress 
    // colorInfoBg: '#e6f4ff',//信息背景色
    // colorInfoBorder: '#91caff',//信息边框色
    // colorError: '#ff4d4f',//失败背景色
    // colorErrorBg: '#fff2f0',//失败色
    // colorErrorBorder: '#ffccc7',//失败边框色
    // colorSuccess: '#52c41a',//成功色
    // colorSuccessBg: '#f6ffed',//成功背景色
    // colorSuccessBorder: '#b7eb8f',//成功边框色
    // colorWarning: '#faad14',//警戒色
    // colorWarningBg: '#fffbe6',//警戒背景色
    // colorWarningBorder: '#ffe58f',//警戒边框色
    // controlItemBgActive: '#e6f4ff',//menu被选中的背景色
    // controlItemBgActiveTable: '#e6f4ff',//table选中背景色
    // controlItemBgActiveHover: '#bae0ff',//table在被选中时的背景色
    // colorFillAlter: 'rgba(0, 0, 0, 0.02)',//Table控制区hover背景色
    // colorPrimaryBgHover: '#bae0ff',//主题悬浮色,
    // colorMenuText:'#000',//菜单文字颜色
    bgUrl: {
        green: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*XpGeRoZKGycAAAAAAAAAAAAAARQnAQ',
        yellow: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*1yydQLzw5nYAAAAAAAAAAAAAARQnAQ',
        orange: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*VWFOTbEyU9wAAAAAAAAAAAAAARQnAQ',
        red: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*w6xcR7MriwEAAAAAAAAAAAAAARQnAQ',
        pink: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*DGZXS4YOGp0AAAAAAAAAAAAAARQnAQ',
        purple: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*FMluR4vJhaQAAAAAAAAAAAAAARQnAQ',
    },
    colorPrimary: {
        default: '#1677FF',
        green: '#00B96B',
        yellow: '#F2BD27',
        orange: '#F4801A',
        red: '#E0282E',
        pink: '#ED4192',
        purple: '#9E339F'
    },
    fontfamilystyle:false,//字体样式
    default: {
        token: {
            'colorTextWhite': '#FFFFFF',
            colorPrimary: '#1677FF',
            // colorBgContainer: 'rgba(247, 247, 247, 0.6)',//容器背景
            colorBgContainer: '#FFFFFF',//容器背景
            colorBgLayout: 'rgba(247, 247, 247, 0.5)',//路由背景
            colorTextBase: '#000',//基础文字色
            "wireframe": true,
            "fontSize": 14,
            "colortRansparency": 'rgba(247, 247, 247, 0)',//自定义透明色
            colorBorder: '#d5d5d5',//边框色
            colorBorderSecondary: "#f0f0f0",//内部边框色
            colorTextQuaternary: 'rgba(0, 0, 0, 0.25)',//输入提示色
            colorLink: "#1677ff",//链接色
        },
        components: {
            Table: {
                colorBgContainer: 'rgba(247, 247, 247, 0)',
                paddingXS: 4,
            },
            Aside: {
                borderRadiusSM: 0,
            },
            Layout: {
                borderRadiusSM: 0,
            },
            Menu: {
                borderRadiusSM: 0,
            },
            Card: {

            },
        },
        algorithm: []
    },
    dark: {
        token: {
            'colorTextWhite': '#FFFFFF',
            colorPrimary: '#00B96B',
            "wireframe": true,
            "borderRadius": 6,
            "fontSize": 12,
            "colortRansparency": 'rgba(247, 247, 247, 0)',//自定义透明色
            lineHeight: 2,
        },
        components: {
            Card: {
            },
            Table: {
            },
            Button: {
                lineHeight: 1.4,
            }
        },
        algorithm: []
    },
    algorithm: [compactAlgorithm]
}
/**扩展自定义字段*/
export interface NewGlobalToken extends GlobalToken {
    /**透明色*/
    colortRansparency?: string,
    colorTextWhite?: string
}
type Props = {
    theme: ThemeConfig | undefined,
    children: JSX.Element
}
export default function useNewToken() {
    const { token }: { token: NewGlobalToken } = useToken()
    const MyConfigProvider = (props: Props) => useMemo(() => {
        return <ConfigProvider
            theme={props.theme}
        >
            {props.children}
        </ConfigProvider>
    }, [])
    return { token, themeConfig, darkAlgorithm, MyConfigProvider }
}