李金
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 { 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 { OverrideToken } from 'antd/es/theme/interface' |
||||
import type { FC, ReactNode } from 'react' |
import type { FC, ReactNode } from 'react' |
||||
import { ThemeProvider, createProAntdTheme, getProToken } from '@/theme' |
import { ThemeProvider, createProAntdTheme, getProToken } from '@/theme' |
||||
|
|
||||
export const useProAntdTheme = (appearance: ThemeAppearance) => { |
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 { |
export interface ConfigProviderProps extends AntdConfigProviderProps { |
||||
componentToken?: OverrideToken; |
|
||||
children: ReactNode; |
|
||||
|
componentToken?: OverrideToken; |
||||
|
children: ReactNode; |
||||
} |
} |
||||
|
|
||||
export const ConfigProvider: FC<ConfigProviderProps> = ({ children, componentToken, ...props }) => { |
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) => { |
export const withProvider = (Component) => (props) => { |
||||
return ( |
|
||||
<ConfigProvider> |
|
||||
<Component {...props} /> |
|
||||
</ConfigProvider> |
|
||||
) |
|
||||
|
return ( |
||||
|
<ConfigProvider> |
||||
|
<Component {...props} /> |
||||
|
</ConfigProvider> |
||||
|
) |
||||
} |
} |
Write
Preview
Loading…
Cancel
Save
Reference in new issue