Skip to content

Commit c840092

Browse files
qdrivenqdriven
committed
feat(ui): modernize UI design with improved aesthetics
- Update color palette with modern dark theme - Add gradient effects and glow animations - Improve card components with hover effects - Enhance Terminal component with better styling - Add glass morphism effects to headers - Improve typography and spacing - Add loading animations and transitions - Update Home, SeriesDetail, TutorialDetail pages with new design
1 parent f9595cc commit c840092

File tree

10 files changed

+6644
-497
lines changed

10 files changed

+6644
-497
lines changed

‎apps/desktop/src-tauri/Cargo.lock‎

Lines changed: 5463 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎apps/desktop/src/components/Home.tsx‎

Lines changed: 168 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useAppStore } from '../store/useAppStore';
22
import { SeriesCard } from './tutorial/SeriesCard';
33
import { TutorialCard } from './tutorial/TutorialCard';
4-
import { FolderOpen, FileText, Plus } from 'lucide-react';
4+
import { FolderOpen, FileText, Plus, Sparkles, TrendingUp, Clock, ArrowRight, Zap } from 'lucide-react';
55

66
interface HomeProps {
77
onSeriesClick: (seriesId: string) => void;
@@ -11,106 +11,184 @@ interface HomeProps {
1111
}
1212

1313
export function Home({ onSeriesClick, onTutorialClick, onImportClick, onAddDirectoryClick }: HomeProps) {
14-
const { series, tutorials, getFilteredTutorials } = useAppStore();
14+
const { series, getFilteredTutorials } = useAppStore();
1515

1616
const filteredTutorials = getFilteredTutorials();
17-
const recentTutorials = tutorials.slice(0, 6);
17+
const recentTutorials = filteredTutorials.slice(0, 6);
18+
19+
const stats = [
20+
{ label: '教程总数', value: filteredTutorials.length, icon: FileText, color: 'from-accent to-secondary' },
21+
{ label: '系列课程', value: series.length, icon: FolderOpen, color: 'from-emerald-500 to-teal-500' },
22+
{ label: '学习时长', value: '120+', icon: Clock, color: 'from-amber-500 to-orange-500' },
23+
];
1824

1925
return (
20-
<div className="h-full overflow-auto p-6 space-y-8">
26+
<div className="h-full overflow-auto">
2127
{/* Hero Section */}
22-
<div className="text-center py-8">
23-
<h1 className="text-3xl font-bold text-text-primary mb-3">
24-
可执行教程
25-
</h1>
26-
<p className="text-text-secondary max-w-2xl mx-auto">
27-
边学边做，让技术学习变得简单有趣。每个教程都包含可执行的命令，
28-
点击运行即可在终端中看到实时结果。
29-
</p>
30-
</div>
31-
32-
{/* Featured Series */}
33-
<section>
34-
<div className="flex items-center justify-between mb-4">
35-
<h2 className="text-lg font-semibold text-text-primary flex items-center gap-2">
36-
<FolderOpen size={20} className="text-primary" />
37-
推荐系列
38-
</h2>
39-
<button
40-
onClick={() => {}}
41-
className="text-sm text-primary hover:underline"
42-
>
43-
查看全部 →
44-
</button>
45-
</div>
28+
<div className="relative overflow-hidden">
29+
{/* Background Gradient */}
30+
<div className="absolute inset-0 bg-gradient-to-br from-accent/10 via-transparent to-secondary/10" />
31+
<div className="absolute top-0 right-0 w-96 h-96 bg-accent/20 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2" />
32+
<div className="absolute bottom-0 left-0 w-64 h-64 bg-secondary/20 rounded-full blur-3xl translate-y-1/2 -translate-x-1/2" />
4633

47-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
48-
{series.map((s) => (
49-
<SeriesCard
50-
key={s.id}
51-
series={s}
52-
tutorials={tutorials.filter((t) => t.series === s.id)}
53-
onClick={() => onSeriesClick(s.id)}
54-
/>
55-
))}
34+
<div className="relative px-8 py-12">
35+
<div className="max-w-4xl">
36+
{/* Badge */}
37+
<div className="inline-flex items-center gap-2 px-4 py-2 bg-accent/10 border border-accent/20 rounded-full mb-6">
38+
<Sparkles size={16} className="text-accent" />
39+
<span className="text-sm text-accent font-medium">交互式学习平台</span>
40+
</div>
41+
42+
<h1 className="text-4xl md:text-5xl font-bold text-text-primary mb-4">
43+
可执行
44+
<span className="text-gradient"> 教程</span>
45+
</h1>
46+
<p className="text-lg text-text-secondary max-w-2xl leading-relaxed">
47+
边学边做，让技术学习变得简单有趣。每个教程都包含可执行的命令，
48+
点击运行即可在终端中看到实时结果。
49+
</p>
50+
51+
{/* Stats */}
52+
<div className="flex flex-wrap gap-4 mt-8">
53+
{stats.map((stat, index) => (
54+
<div
55+
key={stat.label}
56+
className="flex items-center gap-3 px-5 py-3 bg-bg-card/50 backdrop-blur-sm border border-border-primary rounded-2xl"
57+
style={{ animationDelay: `${index * 100}ms` }}
58+
>
59+
<div className={`w-10 h-10 rounded-xl bg-gradient-to-br ${stat.color} flex items-center justify-center shadow-glow`}>
60+
<stat.icon size={20} className="text-white" />
61+
</div>
62+
<div>
63+
<div className="text-2xl font-bold text-text-primary">{stat.value}</div>
64+
<div className="text-xs text-text-muted">{stat.label}</div>
65+
</div>
66+
</div>
67+
))}
68+
</div>
69+
</div>
5670
</div>
57-
</section>
71+
</div>
5872

59-
{/* Recent Tutorials */}
60-
<section>
61-
<div className="flex items-center justify-between mb-4">
62-
<h2 className="text-lg font-semibold text-text-primary flex items-center gap-2">
63-
<FileText size={20} className="text-primary" />
64-
最近教程
65-
</h2>
66-
<button
67-
onClick={() => {}}
68-
className="text-sm text-primary hover:underline"
69-
>
70-
查看全部 →
71-
</button>
72-
</div>
73-
74-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
75-
{(filteredTutorials.length > 0 ? filteredTutorials : recentTutorials).map((tutorial) => (
76-
<TutorialCard
77-
key={tutorial.id}
78-
tutorial={tutorial}
79-
onClick={() => onTutorialClick(tutorial.id)}
80-
/>
81-
))}
82-
</div>
73+
<div className="px-8 pb-8 space-y-10">
74+
{/* Featured Series */}
75+
<section>
76+
<div className="flex items-center justify-between mb-6">
77+
<div className="flex items-center gap-3">
78+
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-accent to-secondary flex items-center justify-center shadow-glow">
79+
<TrendingUp size={20} className="text-white" />
80+
</div>
81+
<div>
82+
<h2 className="text-xl font-bold text-text-primary">推荐系列</h2>
83+
<p className="text-sm text-text-muted">精选学习路径</p>
84+
</div>
85+
</div>
86+
<button className="flex items-center gap-2 px-4 py-2 text-sm text-accent hover:text-accent-hover transition-colors group">
87+
查看全部
88+
<ArrowRight size={16} className="group-hover:translate-x-1 transition-transform" />
89+
</button>
90+
</div>
91+
92+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
93+
{series.map((s, index) => (
94+
<SeriesCard
95+
key={s.id}
96+
series={s}
97+
tutorials={filteredTutorials.filter((t) => t.series === s.id)}
98+
onClick={() => onSeriesClick(s.id)}
99+
index={index}
100+
/>
101+
))}
102+
</div>
103+
</section>
83104

84-
{filteredTutorials.length === 0 && recentTutorials.length === 0 && (
85-
<div className="text-center py-12 text-text-muted">
86-
没有找到匹配的教程
105+
{/* Recent Tutorials */}
106+
<section>
107+
<div className="flex items-center justify-between mb-6">
108+
<div className="flex items-center gap-3">
109+
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-emerald-500 to-teal-500 flex items-center justify-center shadow-glow">
110+
<FileText size={20} className="text-white" />
111+
</div>
112+
<div>
113+
<h2 className="text-xl font-bold text-text-primary">
114+
{filteredTutorials.length > 0 ? '搜索结果' : '最近教程'}
115+
</h2>
116+
<p className="text-sm text-text-muted">
117+
{filteredTutorials.length > 0 ? `找到 ${filteredTutorials.length} 个教程` : '最新发布的内容'}
118+
</p>
119+
</div>
120+
</div>
87121
</div>
88-
)}
89-
</section>
90-
91-
{/* Quick Actions */}
92-
<section className="border-t border-bg-tertiary pt-6">
93-
<h2 className="text-lg font-semibold text-text-primary mb-4">
94-
快速操作
95-
</h2>
96-
<div className="flex flex-wrap gap-4">
97-
<button
98-
onClick={onAddDirectoryClick}
99-
className="flex items-center gap-2 px-4 py-2 bg-bg-secondary border border-bg-tertiary rounded-lg text-text-primary hover:border-primary/50 transition-colors"
100-
>
101-
<FolderOpen size={18} className="text-primary" />
102-
<span>添加本地目录</span>
103-
</button>
104122

105-
<button
106-
onClick={onImportClick}
107-
className="flex items-center gap-2 px-4 py-2 bg-bg-secondary border border-bg-tertiary rounded-lg text-text-primary hover:border-primary/50 transition-colors"
108-
>
109-
<Plus size={18} className="text-primary" />
110-
<span>导入教程</span>
111-
</button>
112-
</div>
113-
</section>
123+
{recentTutorials.length > 0 ? (
124+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
125+
{recentTutorials.map((tutorial, index) => (
126+
<TutorialCard
127+
key={tutorial.id}
128+
tutorial={tutorial}
129+
onClick={() => onTutorialClick(tutorial.id)}
130+
index={index}
131+
/>
132+
))}
133+
</div>
134+
) : (
135+
<div className="text-center py-16 bg-bg-card rounded-2xl border border-border-primary border-dashed">
136+
<FileText size={48} className="mx-auto mb-4 text-text-muted opacity-50" />
137+
<p className="text-text-muted">没有找到匹配的教程</p>
138+
<button
139+
onClick={() => {}}
140+
className="mt-4 text-accent hover:underline text-sm"
141+
>
142+
清除搜索条件
143+
</button>
144+
</div>
145+
)}
146+
</section>
147+
148+
{/* Quick Actions */}
149+
<section className="relative overflow-hidden">
150+
<div className="absolute inset-0 bg-gradient-to-r from-accent/5 to-secondary/5 rounded-2xl" />
151+
<div className="relative p-6 rounded-2xl border border-border-primary">
152+
<div className="flex items-center gap-3 mb-4">
153+
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-500 to-orange-500 flex items-center justify-center shadow-glow">
154+
<Zap size={20} className="text-white" />
155+
</div>
156+
<div>
157+
<h2 className="text-xl font-bold text-text-primary">快速操作</h2>
158+
<p className="text-sm text-text-muted">扩展你的学习内容</p>
159+
</div>
160+
</div>
161+
162+
<div className="flex flex-wrap gap-4">
163+
<button
164+
onClick={onAddDirectoryClick}
165+
className="group flex items-center gap-3 px-6 py-4 bg-bg-card border border-border-primary rounded-xl text-text-primary hover:border-accent/50 hover:shadow-glow transition-all"
166+
>
167+
<div className="w-12 h-12 rounded-xl bg-accent/10 flex items-center justify-center group-hover:bg-accent/20 transition-colors">
168+
<FolderOpen size={24} className="text-accent" />
169+
</div>
170+
<div className="text-left">
171+
<span className="font-semibold block">添加本地目录</span>
172+
<span className="text-sm text-text-muted">导入本地教程文件夹</span>
173+
</div>
174+
</button>
175+
176+
<button
177+
onClick={onImportClick}
178+
className="group flex items-center gap-3 px-6 py-4 bg-bg-card border border-border-primary rounded-xl text-text-primary hover:border-secondary/50 hover:shadow-glow transition-all"
179+
>
180+
<div className="w-12 h-12 rounded-xl bg-secondary/10 flex items-center justify-center group-hover:bg-secondary/20 transition-colors">
181+
<Plus size={24} className="text-secondary" />
182+
</div>
183+
<div className="text-left">
184+
<span className="font-semibold block">导入教程</span>
185+
<span className="text-sm text-text-muted">从文件或URL导入</span>
186+
</div>
187+
</button>
188+
</div>
189+
</div>
190+
</section>
191+
</div>
114192
</div>
115193
);
116194
}

0 commit comments

Comments
 (0)