refactor: 迁移前端 antd 组件至 v6 规范 API,消除废弃用法
- 迁移静态 message 到 App.useApp() 模式,使 message 感知 ConfigProvider 上下文 - Button type/danger 迁移为 variant/color 新 API - Space direction 迁移为 vertical 布尔属性 - Select.Option 子组件迁移为 options 属性 - AppLayout 硬编码颜色替换为 antd design token - 优化 useThemeConfig:default/dark 改为静态导出,减少不必要的 hook 调用 - 同步更新 openspec 主规范文档
This commit is contained in:
@@ -1,10 +1,10 @@
|
||||
import { theme } from 'antd';
|
||||
import type { ConfigProviderProps } from 'antd';
|
||||
|
||||
const useDarkTheme = (): ConfigProviderProps => ({
|
||||
const darkConfig: ConfigProviderProps = {
|
||||
theme: {
|
||||
algorithm: theme.darkAlgorithm,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export default useDarkTheme;
|
||||
export default darkConfig;
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { theme } from 'antd';
|
||||
import type { ConfigProviderProps } from 'antd';
|
||||
|
||||
const useDefaultTheme = (): ConfigProviderProps => ({
|
||||
const defaultConfig: ConfigProviderProps = {
|
||||
theme: {
|
||||
algorithm: theme.defaultAlgorithm,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export default useDefaultTheme;
|
||||
export default defaultConfig;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { useMemo } from 'react';
|
||||
import type { ConfigProviderProps } from 'antd';
|
||||
import useDefaultTheme from './default';
|
||||
import useDarkTheme from './dark';
|
||||
import defaultConfig from './default';
|
||||
import darkConfig from './dark';
|
||||
import useMuiTheme from './mui';
|
||||
import useShadcnTheme from './shadcn';
|
||||
import useBootstrapTheme from './bootstrap';
|
||||
@@ -25,23 +26,22 @@ export const themeOptions: ThemeOption[] = [
|
||||
const themeIdSet = new Set<ThemeId>(themeOptions.map((opt) => opt.id));
|
||||
|
||||
export function useThemeConfig(themeId: ThemeId): ConfigProviderProps {
|
||||
const defaultConfig = useDefaultTheme();
|
||||
const darkConfig = useDarkTheme();
|
||||
const muiConfig = useMuiTheme();
|
||||
const shadcnConfig = useShadcnTheme();
|
||||
const bootstrapConfig = useBootstrapTheme();
|
||||
const glassConfig = useGlassTheme();
|
||||
|
||||
const configs: Record<ThemeId, ConfigProviderProps> = {
|
||||
default: defaultConfig,
|
||||
dark: darkConfig,
|
||||
mui: muiConfig,
|
||||
shadcn: shadcnConfig,
|
||||
bootstrap: bootstrapConfig,
|
||||
glass: glassConfig,
|
||||
};
|
||||
|
||||
return configs[themeId] ?? configs.default;
|
||||
return useMemo(() => {
|
||||
const configs: Record<ThemeId, ConfigProviderProps> = {
|
||||
default: defaultConfig,
|
||||
dark: darkConfig,
|
||||
mui: muiConfig,
|
||||
shadcn: shadcnConfig,
|
||||
bootstrap: bootstrapConfig,
|
||||
glass: glassConfig,
|
||||
};
|
||||
return configs[themeId] ?? configs.default;
|
||||
}, [themeId, muiConfig, shadcnConfig, bootstrapConfig, glassConfig]);
|
||||
}
|
||||
|
||||
export function isValidThemeId(value: string): value is ThemeId {
|
||||
|
||||
Reference in New Issue
Block a user