李金
6 months ago
5 changed files with 140 additions and 130 deletions
-
94src/components/config-provider/index.tsx
-
22src/components/glass/index.tsx
-
108src/components/icon/picker/PickerPanel.tsx
-
21src/pages/dashboard/index.tsx
-
25tsconfig.json
@ -1,63 +1,63 @@ |
|||
import { ConfigProvider as AntdConfigProvider, ConfigProviderProps as AntdConfigProviderProps } from 'antd' |
|||
import { AntdToken, ThemeAppearance, useAntdToken, useThemeMode } from 'antd-style' |
|||
import { AntdToken, ThemeAppearance, useThemeMode } from 'antd-style' |
|||
import type { OverrideToken } from 'antd/es/theme/interface' |
|||
import type { FC, ReactNode } from 'react' |
|||
import { ThemeProvider, createProAntdTheme, getProToken } from '@/theme' |
|||
|
|||
export const useProAntdTheme = (appearance: ThemeAppearance) => { |
|||
const token = useAntdToken() |
|||
const themeConfig = createProAntdTheme(appearance) |
|||
|
|||
const controlToken: Partial<AntdToken> = { |
|||
// colorBgContainer: token?.colorFillQuaternary,
|
|||
// colorBorder: 'transparent',
|
|||
// controlOutline: 'transparent',
|
|||
} |
|||
|
|||
themeConfig.components = { |
|||
Input: controlToken, |
|||
InputNumber: controlToken, |
|||
Select: controlToken, |
|||
Tree: { |
|||
colorBgContainer: 'transparent', |
|||
directoryNodeSelectedBg: '#e1f0ff', |
|||
directoryNodeSelectedColor: 'rgb(22, 62, 124)', |
|||
}, |
|||
TreeSelect: controlToken, |
|||
} |
|||
|
|||
return themeConfig |
|||
// const token = useAntdToken()
|
|||
const themeConfig = createProAntdTheme(appearance) |
|||
|
|||
const controlToken: Partial<AntdToken> = { |
|||
// colorBgContainer: token?.colorFillQuaternary,
|
|||
// colorBorder: 'transparent',
|
|||
// controlOutline: 'transparent',
|
|||
} |
|||
|
|||
themeConfig.components = { |
|||
Input: controlToken, |
|||
InputNumber: controlToken, |
|||
Select: controlToken, |
|||
Tree: { |
|||
colorBgContainer: 'transparent', |
|||
directoryNodeSelectedBg: '#e1f0ff', |
|||
directoryNodeSelectedColor: 'rgb(22, 62, 124)', |
|||
}, |
|||
TreeSelect: controlToken, |
|||
} |
|||
|
|||
return themeConfig |
|||
} |
|||
|
|||
export interface ConfigProviderProps extends AntdConfigProviderProps { |
|||
componentToken?: OverrideToken; |
|||
children: ReactNode; |
|||
componentToken?: OverrideToken; |
|||
children: ReactNode; |
|||
} |
|||
|
|||
export const ConfigProvider: FC<ConfigProviderProps> = ({ children, componentToken, ...props }) => { |
|||
const { appearance, themeMode } = useThemeMode() |
|||
const proTheme = useProAntdTheme(appearance) |
|||
proTheme.components = { ...proTheme.components, ...componentToken } |
|||
|
|||
return ( |
|||
<AntdConfigProvider theme={proTheme} {...props}> |
|||
<ThemeProvider |
|||
appearance={appearance} |
|||
themeMode={themeMode} |
|||
// 以下都是自定义主题
|
|||
theme={createProAntdTheme} |
|||
customToken={getProToken} |
|||
> |
|||
{children} |
|||
</ThemeProvider> |
|||
</AntdConfigProvider> |
|||
) |
|||
const { appearance, themeMode } = useThemeMode() |
|||
const proTheme = useProAntdTheme(appearance) |
|||
proTheme.components = { ...proTheme.components, ...componentToken } |
|||
|
|||
return ( |
|||
<AntdConfigProvider theme={proTheme} {...props}> |
|||
<ThemeProvider |
|||
appearance={appearance} |
|||
themeMode={themeMode} |
|||
// 以下都是自定义主题
|
|||
theme={createProAntdTheme} |
|||
customToken={getProToken} |
|||
> |
|||
{children} |
|||
</ThemeProvider> |
|||
</AntdConfigProvider> |
|||
) |
|||
} |
|||
|
|||
export const withProvider = (Component) => (props) => { |
|||
return ( |
|||
<ConfigProvider> |
|||
<Component {...props} /> |
|||
</ConfigProvider> |
|||
) |
|||
return ( |
|||
<ConfigProvider> |
|||
<Component {...props} /> |
|||
</ConfigProvider> |
|||
) |
|||
} |
Write
Preview
Loading…
Cancel
Save
Reference in new issue