Skip to content

Commit 9ab91df

Browse files
CodFrmclaude
CodFrm
and
claude
committed
⚡ 启用 Ant Design CSS Variables 模式，消除冗余内联样式
- 新增 src/lib/antd-theme.ts 提取共享主题配置（token/components） - ConfigProvider 启用 cssVar 模式，使用固定 key (light/dark) 保证静态与运行时类名一致 - prebuild 静态提取包含自定义 token 的 CSS 变量版本 - 移除 AntdRegistry，消除 SSR 重复注入的 <style id="antd-cssinjs"> 块 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent cad2e74 commit 9ab91df

5 files changed

Lines changed: 257 additions & 148 deletions

File tree

‎scripts/prebuild.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,33 @@ import fs from 'fs';
33
import path from 'path';
44
import { ConfigProvider, theme } from 'antd';
55
import { extractStyle } from '@ant-design/static-style-extract';
6+
import {
7+
lightToken,
8+
darkToken,
9+
getComponents,
10+
getCssVarConfig,
11+
} from '../src/lib/antd-theme';
612

713
const outputPath = './public/styles/antd.min.css';
814

915
const css = extractStyle((node) => (
1016
<>
1117
<ConfigProvider
1218
theme={{
19+
cssVar: getCssVarConfig('light'),
1320
algorithm: theme.defaultAlgorithm,
21+
token: lightToken,
22+
components: getComponents('light'),
1423
}}
1524
>
1625
{node}
1726
</ConfigProvider>
1827
<ConfigProvider
1928
theme={{
29+
cssVar: getCssVarConfig('dark'),
2030
algorithm: theme.darkAlgorithm,
31+
token: darkToken,
32+
components: getComponents('dark'),
2133
}}
2234
>
2335
{node}

‎src/app/[locale]/script-show-page/[id]/statistic/components/ScriptStatsClient.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,13 @@ import React, { useState } from 'react';
3131
import { useScript } from '../../components/ScriptContext';
3232
import dynamic from 'next/dynamic';
3333

34-
const Line = dynamic(() => import('@ant-design/charts').then((mod) => mod.Line), {
35-
ssr: false,
36-
loading: () => <div style={{ height: 300 }} />,
37-
});
34+
const Line = dynamic(
35+
() => import('@ant-design/charts').then((mod) => mod.Line),
36+
{
37+
ssr: false,
38+
loading: () => <div style={{ height: 300 }} />,
39+
},
40+
);
3841
const Column = dynamic(
3942
() => import('@ant-design/charts').then((mod) => mod.Column),
4043
{ ssr: false, loading: () => <div style={{ height: 300 }} /> },

‎src/components/LocalizedServerThemeWrapper.tsx‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import type { ThemeMode } from '@/lib/cookies';
55
import { THEME_COOKIE_NAME, THEME_MODE_COOKIE_NAME } from '@/lib/cookies';
66
import NavigationProgress from './NavigationProgress';
77
import { DayjsLocaleProvider } from './DayjsLocaleProvider';
8-
import { AntdRegistry } from '@ant-design/nextjs-registry';
98
import { SWRProvider } from '@/lib/swr-config';
109
import { NextIntlClientProvider } from 'next-intl';
1110
import { getMessages } from 'next-intl/server';
@@ -80,15 +79,13 @@ export async function LocalizedServerThemeWrapper({
8079
>
8180
<NavigationProgress />
8281
<ThemeProvider initialMode={serverTheme}>
83-
<AntdRegistry>
84-
<SWRProvider>
85-
<NextIntlClientProvider messages={messages}>
86-
<DayjsLocaleProvider>
87-
<UserProvider user={user}>{children}</UserProvider>
88-
</DayjsLocaleProvider>
89-
</NextIntlClientProvider>
90-
</SWRProvider>
91-
</AntdRegistry>
82+
<SWRProvider>
83+
<NextIntlClientProvider messages={messages}>
84+
<DayjsLocaleProvider>
85+
<UserProvider user={user}>{children}</UserProvider>
86+
</DayjsLocaleProvider>
87+
</NextIntlClientProvider>
88+
</SWRProvider>
9289
</ThemeProvider>
9390
</body>
9491
</html>

‎src/contexts/ThemeClientContext.tsx‎

Lines changed: 12 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import type { ThemeConfig } from 'antd';
55
import { ConfigProvider, theme } from 'antd';
66
import type { ThemeMode } from '@/lib/cookies';
77
import { setThemeCookie } from '@/lib/cookies';
8+
import { getToken, getComponents, getCssVarConfig } from '@/lib/antd-theme';
89

910
interface ThemeContextType {
1011
themeMode: ThemeMode;
@@ -34,141 +35,18 @@ export const ThemeClientProvider: React.FC<ThemeClientProviderProps> = ({
3435
initialMode || { mode: 'auto', theme: 'light' },
3536
);
3637

37-
const antdTheme: ThemeConfig = useMemo(() => ({
38-
algorithm:
39-
themeMode.theme === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm,
40-
token: {
41-
// 主色调 - GitHub风格蓝色
42-
colorPrimary: themeMode.theme === 'dark' ? '#58a6ff' : '#0d6efd',
43-
44-
// 背景色 - GitHub风格背景，增强层次感
45-
colorBgContainer: themeMode.theme === 'dark' ? '#161b22' : '#ffffff',
46-
colorBgElevated: themeMode.theme === 'dark' ? '#161b22' : '#ffffff',
47-
colorBgLayout: themeMode.theme === 'dark' ? '#0d1117' : '#f6f8fa',
48-
colorBgSpotlight: themeMode.theme === 'dark' ? '#21262d' : '#f0f3f6',
49-
50-
// 文本色 - GitHub风格文本对比度
51-
colorText: themeMode.theme === 'dark' ? '#f8f8f2' : '#24292f',
52-
colorTextSecondary: themeMode.theme === 'dark' ? '#8b949e' : '#57606a',
53-
colorTextTertiary: themeMode.theme === 'dark' ? '#6e7681' : '#8b949e',
54-
colorTextDescription: themeMode.theme === 'dark' ? '#6e7681' : '#8b949e',
55-
56-
// 边框色 - GitHub风格边框
57-
colorBorder: themeMode.theme === 'dark' ? '#30363d' : '#d0d7de',
58-
colorBorderSecondary: themeMode.theme === 'dark' ? '#21262d' : '#d8dee4',
59-
60-
// 分割线
61-
colorSplit: themeMode.theme === 'dark' ? '#30363d' : '#d0d7de',
62-
63-
// 成功、警告、错误色 - 保持原有的语义化颜色
64-
colorSuccess: '#22c55e',
65-
colorWarning: '#f59e0b',
66-
colorError: '#ef4444',
67-
colorInfo: themeMode.theme === 'dark' ? '#58a6ff' : '#0d6efd',
68-
69-
// 链接色
70-
colorLink: themeMode.theme === 'dark' ? '#58a6ff' : '#0969da',
71-
colorLinkHover: themeMode.theme === 'dark' ? '#4f95e5' : '#0550ae',
72-
73-
// 字体 - 使用 Geist 字体
74-
fontFamily: `"Geist", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif`,
75-
fontSize: 14,
76-
77-
// 圆角 - 现代化圆角设计
78-
borderRadius: 8,
79-
borderRadiusLG: 12,
80-
borderRadiusSM: 6,
81-
borderRadiusXS: 4,
82-
83-
// 阴影 - 现代化阴影系统
84-
boxShadow:
85-
themeMode.theme === 'dark'
86-
? '0 1px 2px 0 rgba(0, 0, 0, 0.4), 0 1px 3px 0 rgba(0, 0, 0, 0.3)'
87-
: '0 1px 2px 0 rgba(17, 24, 39, 0.05), 0 1px 3px 0 rgba(17, 24, 39, 0.1)',
88-
boxShadowSecondary:
38+
const antdTheme: ThemeConfig = useMemo(
39+
() => ({
40+
cssVar: getCssVarConfig(themeMode.theme),
41+
algorithm:
8942
themeMode.theme === 'dark'
90-
? '0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.4)'
91-
: '0 4px 6px -1px rgba(17, 24, 39, 0.1), 0 2px 4px -1px rgba(17, 24, 39, 0.06)',
92-
93-
// 动画时长
94-
motionDurationSlow: '0.3s',
95-
motionDurationMid: '0.2s',
96-
motionDurationFast: '0.1s',
97-
},
98-
components: {
99-
// 按钮组件 - GitHub风格按钮
100-
Button: {
101-
colorPrimary: themeMode.theme === 'dark' ? '#58a6ff' : '#0d6efd',
102-
colorPrimaryHover: themeMode.theme === 'dark' ? '#4f95e5' : '#0b5ed7',
103-
colorPrimaryActive: themeMode.theme === 'dark' ? '#4184e4' : '#0a52be',
104-
primaryShadow:
105-
themeMode.theme === 'dark'
106-
? '0 2px 0 rgba(88, 166, 255, 0.1)'
107-
: '0 2px 0 rgba(13, 110, 253, 0.1)',
108-
},
109-
110-
// 卡片组件 - GitHub风格卡片
111-
Card: {
112-
colorBorderSecondary:
113-
themeMode.theme === 'dark' ? '#30363d' : '#d0d7de',
114-
colorBgContainer: themeMode.theme === 'dark' ? '#161b22' : '#ffffff',
115-
},
116-
117-
// 菜单组件 - GitHub风格菜单
118-
Menu: {
119-
colorBgContainer: themeMode.theme === 'dark' ? '#161b22' : '#ffffff',
120-
colorItemBgSelected: themeMode.theme === 'dark' ? '#21262d' : '#ebf5ff',
121-
colorItemBgHover: themeMode.theme === 'dark' ? '#21262d' : '#f6f8fa',
122-
colorItemTextSelected:
123-
themeMode.theme === 'dark' ? '#58a6ff' : '#0969da',
124-
},
125-
126-
// 输入框组件 - GitHub风格输入框
127-
Input: {
128-
colorBgContainer: themeMode.theme === 'dark' ? '#161b22' : '#ffffff',
129-
colorBorder: themeMode.theme === 'dark' ? '#30363d' : '#d0d7de',
130-
activeBorderColor: themeMode.theme === 'dark' ? '#58a6ff' : '#0d6efd',
131-
hoverBorderColor: themeMode.theme === 'dark' ? '#58a6ff' : '#0d6efd',
132-
},
133-
134-
// 表格组件 - GitHub风格表格
135-
Table: {
136-
colorBgContainer: themeMode.theme === 'dark' ? '#161b22' : '#ffffff',
137-
colorBorderSecondary:
138-
themeMode.theme === 'dark' ? '#30363d' : '#d0d7de',
139-
colorFillAlter: themeMode.theme === 'dark' ? '#21262d' : '#f6f8fa',
140-
},
141-
142-
// 模态框组件 - 现代化模态框
143-
Modal: {
144-
colorBgElevated: themeMode.theme === 'dark' ? '#161b22' : '#ffffff',
145-
colorBgMask:
146-
themeMode.theme === 'dark'
147-
? 'rgba(13, 17, 23, 0.6)'
148-
: 'rgba(0, 0, 0, 0.45)',
149-
},
150-
151-
// 提示组件 - 现代化提示
152-
Tooltip: {
153-
colorBgSpotlight: themeMode.theme === 'dark' ? '#30363d' : '#1f2937',
154-
colorText: themeMode.theme === 'dark' ? '#f8f8f2' : '#ffffff',
155-
},
156-
157-
// 标签组件 - 现代化标签
158-
Tag: {
159-
colorFill: themeMode.theme === 'dark' ? '#21262d' : '#f3f4f6',
160-
colorText: themeMode.theme === 'dark' ? '#8b949e' : '#4b5563',
161-
colorBorder: themeMode.theme === 'dark' ? '#30363d' : '#e5e7eb',
162-
},
163-
164-
// 分页组件 - 现代化分页
165-
Pagination: {
166-
colorPrimary: themeMode.theme === 'dark' ? '#58a6ff' : '#3b82f6',
167-
colorPrimaryHover: themeMode.theme === 'dark' ? '#4f95e5' : '#2563eb',
168-
colorBgContainer: themeMode.theme === 'dark' ? '#161b22' : '#ffffff',
169-
},
170-
},
171-
}), [themeMode.theme]);
43+
? theme.darkAlgorithm
44+
: theme.defaultAlgorithm,
45+
token: getToken(themeMode.theme),
46+
components: getComponents(themeMode.theme),
47+
}),
48+
[themeMode.theme],
49+
);
17250

17351
useEffect(() => {
17452
// 记录到cookie

0 commit comments

Comments
 (0)