1
0

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:
2026-04-17 00:59:36 +08:00
parent 49818ed4d8
commit 6eeb38c15e
19 changed files with 121 additions and 96 deletions

View File

@@ -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;

View File

@@ -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;

View File

@@ -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 {