Skip to content

Commit c1bf343

Browse files
AIwork4meAIwork4me
committed
fix: 亮暗色切换功能 + Hero 区布局优化
问题 2: 无法切换亮暗色 - 添加 darkMode: 'class' 到 Tailwind 配置 - 定义亮色/暗色主题 CSS 变量 - 更新 ThemeToggle 组件按钮样式 问题 5: Hero 区按钮下方空白过大 - 减少 Hero 区 padding (pt-24/28/32) - 向下箭头更紧凑 (mt-8) - 移除底部渐变遮罩 - 添加主题切换过渡动画 改进: - 亮暗色主题切换平滑过渡 (0.3s ease) - Hero 区布局更紧凑 - 向下箭头使用 primary 色，更明显
1 parent 97ac418 commit c1bf343

4 files changed

Lines changed: 71 additions & 26 deletions

File tree

‎platform/src/app/[locale]/page.tsx‎

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,25 @@ function Hero() {
88
const t = useTranslations('hero')
99

1010
return (
11-
<section className="relative overflow-hidden bg-gradient-to-br from-surface via-surface to-surface-container py-32 sm:py-40 md:py-44">
11+
<section className="relative overflow-hidden bg-gradient-to-br from-surface via-surface to-surface-container pb-16">
1212
{/* 背景装饰：柔和的径向渐变 */}
1313
<div className="absolute inset-0 bg-gradient-radial from-primary/10 via-transparent to-transparent opacity-80" />
14-
14+
1515
{/* 额外的光晕效果 - 响应式尺寸 */}
1616
<div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[clamp(400px,50vw,800px)] h-[clamp(200px,25vw,400px)] bg-primary/5 blur-3xl rounded-full" />
17-
18-
{/* 主内容区 - 固定 padding-top，不再居中 */}
19-
<div className="relative z-10 text-center px-[clamp(1.5rem,4vw,3rem)] max-w-5xl mx-auto pt-32 sm:pt-40 md:pt-44">
17+
18+
{/* 主内容区 - 减少顶部间距 */}
19+
<div className="relative z-10 text-center px-[clamp(1.5rem,4vw,3rem)] max-w-5xl mx-auto pt-24 sm:pt-28 md:pt-32">
2020
{/* 主标题：响应式 32px - 80px */}
2121
<h1 className="text-responsive-hero font-bold text-on-surface mb-8 tracking-tight animate-fade-in-up">
2222
{t('title')}
2323
</h1>
24-
24+
2525
{/* 副标题：响应式 16px - 24px */}
2626
<p className="text-responsive-subtitle text-on-surface-variant mb-12 max-w-3xl mx-auto font-normal animate-fade-in-up" style={{ animationDelay: '100ms' }}>
2727
{t('subtitle')}
2828
</p>
29-
29+
3030
{/* CTA 按钮 - 响应式尺寸 */}
3131
<a
3232
href="#outline"
@@ -55,15 +55,14 @@ function Hero() {
5555
>
5656
{t('cta')}
5757
</a>
58-
59-
{/* 向下滚动提示 - 增强可见性 */}
60-
<div className="mt-16 animate-bounce">
58+
59+
{/* 向下滚动提示 - 更紧凑 */}
60+
<div className="mt-8 animate-bounce">
6161
<a
6262
href="#outline"
63-
className="inline-flex items-center gap-2 text-on-surface-variant hover:text-primary transition-all group"
63+
className="inline-flex items-center gap-2 text-primary hover:text-primary-light transition-all group"
6464
aria-label="向下浏览课程大纲"
6565
>
66-
<span className="text-sm">查看课程大纲</span>
6766
<svg
6867
className="w-6 h-6"
6968
fill="none"
@@ -80,9 +79,6 @@ function Hero() {
8079
</a>
8180
</div>
8281
</div>
83-
84-
{/* 底部渐变遮罩，柔和过渡到下一个区块 */}
85-
<div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-surface to-transparent" />
8682
</section>
8783
)
8884
}

‎platform/src/app/globals.css‎

Lines changed: 47 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,56 @@ html {
88
}
99

1010
body {
11-
background-color: #0A0A0A; /* EvoClaw 风格：更深的黑 */
12-
color: #E5E5E5;
1311
font-feature-settings: 'kern' 1, 'liga' 1;
1412
-webkit-font-smoothing: antialiased;
1513
-moz-osx-font-smoothing: grayscale;
14+
transition: background-color 0.3s ease, color 0.3s ease;
15+
}
16+
17+
/* 暗色主题（默认） */
18+
.dark,
19+
:root {
20+
--bg-primary: #0F0D13;
21+
--bg-surface: #0A0A0A;
22+
--bg-container: #1A1A1A;
23+
--text-primary: #E5E5E5;
24+
--text-secondary: #999999;
25+
--border-color: #333333;
26+
--accent-color: #6750A4;
27+
}
28+
29+
/* 亮色主题 */
30+
.light {
31+
--bg-primary: #FFFBFE;
32+
--bg-surface: #FEF7FF;
33+
--bg-container: #F5F5F5;
34+
--text-primary: #1C1B1F;
35+
--text-secondary: #49454F;
36+
--border-color: #CAC4D0;
37+
--accent-color: #6750A4;
38+
}
39+
40+
/* 应用主题变量 */
41+
body {
42+
background-color: var(--bg-primary);
43+
color: var(--text-primary);
44+
}
45+
46+
/* 亮色主题下的组件调整 */
47+
.light .bg-surface {
48+
background-color: var(--bg-surface) !important;
49+
}
50+
51+
.light .bg-surface-container {
52+
background-color: var(--bg-container) !important;
53+
}
54+
55+
.light .text-on-surface-variant {
56+
color: var(--text-secondary) !important;
57+
}
58+
59+
.light .border-outline-variant {
60+
border-color: var(--border-color) !important;
1661
}
1762

1863
/* ===== 选中文字样式 ===== */

‎platform/src/components/ThemeToggle.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useTheme } from 'next-themes'
44
import { useEffect, useState } from 'react'
55

66
export function ThemeToggle() {
7-
const { resolvedTheme, setTheme } = useTheme()
7+
const { theme, setTheme, resolvedTheme } = useTheme()
88
const [mounted, setMounted] = useState(false)
99

1010
useEffect(() => setMounted(true), [])
@@ -13,13 +13,16 @@ export function ThemeToggle() {
1313
return <div className="w-6 h-6" /> // 占位，避免布局抖动
1414
}
1515

16+
const currentTheme = resolvedTheme || theme
17+
1618
return (
1719
<button
18-
onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
19-
className="text-onsurface-variant hover:text-onsurface transition-colors text-[14px] cursor-pointer"
20-
aria-label={resolvedTheme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
20+
onClick={() => setTheme(currentTheme === 'dark' ? 'light' : 'dark')}
21+
className="text-on-surface-variant hover:text-on-surface transition-colors text-[20px] cursor-pointer px-2 py-1 rounded-lg hover:bg-surface-container-high"
22+
aria-label={currentTheme === 'dark' ? '切换到亮色模式' : '切换到暗色模式'}
23+
title={currentTheme === 'dark' ? '切换到亮色模式' : '切换到暗色模式'}
2124
>
22-
{resolvedTheme === 'dark' ? '☀️' : '🌙'}
25+
{currentTheme === 'dark' ? '☀️' : '🌙'}
2326
</button>
2427
)
2528
}

‎platform/tailwind.config.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { Config } from 'tailwindcss'
22

33
const config: Config = {
4+
darkMode: 'class',
45
content: [
56
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
67
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
@@ -19,7 +20,7 @@ const config: Config = {
1920
'container-light': '#6750A4',
2021
'container-dark': '#381E72',
2122
},
22-
23+
2324
// M3 Surface（暗色主题 - EvoClaw 风格）
2425
surface: {
2526
DEFAULT: '#0F0D13',
@@ -30,17 +31,17 @@ const config: Config = {
3031
'container-high': '#2B2930',
3132
'container-highest': '#36343B',
3233
},
33-
34+
3435
// M3 On-Surface
3536
'on-surface': '#E5E5E5',
3637
'on-surface-variant': '#999999',
37-
38+
3839
// M3 Outline
3940
outline: {
4041
DEFAULT: '#666666',
4142
variant: '#333333',
4243
},
43-
44+
4445
// M3 Semantic
4546
success: '#4ADE80',
4647
danger: '#F87171',

0 commit comments

Comments
 (0)