Skip to content

Commit 5d9c9ff

Browse files
weizwzweizwz
committed
feat: 重新设计文章模块，更简洁一体化
1 parent 54dff21 commit 5d9c9ff

File tree

1 file changed

+80
-38
lines changed

1 file changed

+80
-38
lines changed

‎app/components/BlogArticles.tsx‎

Lines changed: 80 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ interface BlogArticlesProps {
99
articles?: Article[]
1010
}
1111

12-
export function BlogArticles({ title = '我的文章', subtitle = '来自博客的最新动态，发现更多精彩内容', articles = [] }: BlogArticlesProps) {
12+
export function BlogArticles({ title = '最新文章', subtitle = '分享最新的技术趋势、编程技巧和开发心得', articles = [] }: BlogArticlesProps) {
1313

1414

1515
const [currentSlide, setCurrentSlide] = useState(0)
@@ -91,11 +91,49 @@ export function BlogArticles({ title = '我的文章', subtitle = '来自博客
9191
return null
9292
}
9393

94+
// 获取标签样式
95+
const getTagStyle = (category: string) => {
96+
switch (category) {
97+
case '资源':
98+
return 'bg-emerald-100 text-emerald-600'
99+
case '技术':
100+
return 'bg-blue-100 text-blue-600'
101+
case '博客':
102+
return 'bg-purple-100 text-purple-600'
103+
default:
104+
return 'bg-gray-100 text-gray-600'
105+
}
106+
}
107+
94108
return (
95-
<section id='article' className='py-20 bg-white relative overflow-hidden'>
109+
<section id='article' className='pt-20 pb-20 bg-white relative overflow-hidden'>
96110
<div className='max-w-7xl mx-auto px-4 relative z-10'>
97-
<h2 className='text-2xl sm:text-3xl md:text-4xl font-bold text-center mb-3 md:mb-4 px-4'>{title}</h2>
98-
<p className='text-gray-500 text-center mb-8 md:mb-12 text-sm md:text-base px-4'>{subtitle}</p>
111+
112+
{/* Header Section: Title/Subtitle Left, Buttons Right */}
113+
<div className='flex flex-col md:flex-row md:items-end justify-between mb-12 px-4'>
114+
<div className='text-center md:text-left mb-6 md:mb-0'>
115+
<h2 className='text-4xl font-bold mb-4'>{title}</h2>
116+
<p className='text-gray-500'>{subtitle}</p>
117+
</div>
118+
119+
{/* Navigation Buttons (Desktop) */}
120+
<div className='hidden md:flex space-x-4'>
121+
<Button
122+
icon={<LeftOutlined />}
123+
shape='circle'
124+
onClick={prevSlide}
125+
className='flex items-center justify-center border-gray-200 text-gray-500 hover:bg-gray-50 hover:text-gray-900 hover:border-gray-300 transition-all w-10 h-10'
126+
aria-label="Previous slide"
127+
/>
128+
<Button
129+
icon={<RightOutlined />}
130+
shape='circle'
131+
onClick={nextSlide}
132+
className='flex items-center justify-center border-gray-200 text-gray-500 hover:bg-gray-50 hover:text-gray-900 hover:border-gray-300 transition-all w-10 h-10'
133+
aria-label="Next slide"
134+
/>
135+
</div>
136+
</div>
99137

100138
{false ? (
101139
<div className='flex justify-center items-center py-20'>
@@ -112,66 +150,70 @@ export function BlogArticles({ title = '我的文章', subtitle = '来自博客
112150
{articles.map((article) => (
113151
<div
114152
key={article.id}
115-
className={`w-full md:w-1/3 flex-shrink-0 md:px-3`}
153+
className={`w-full md:w-1/3 flex-shrink-0 md:px-4`}
116154
onMouseEnter={() => setIsPaused(true)}
117155
onMouseLeave={() => setIsPaused(false)}>
118-
<div className='bg-white/80 backdrop-blur-sm rounded-2xl md:rounded-3xl border-1 border-slate-200 shadow-md shadow-slate-200 h-full hover:shadow-xl transition-all duration-300 overflow-hidden'>
119-
{/* 文章头部 - 渐变背景 */}
120-
<div className={`${article.styleName} article-icon-bg p-6 relative`}>
121-
<div className='flex items-center justify-between mb-4'>
122-
<span className='inline-block px-3 py-1 bg-white/20 backdrop-blur-sm text-white text-sm font-medium rounded-full'>
123-
{article.category}
124-
</span>
125-
<div className='w-10 h-10 article-icon'></div>
126-
</div>
127-
<div className='min-h-20 flex items-center justify-center mb-4'>
128-
<h3 className='text-4xl text-center font-bold text-white line-clamp-2'>{article.title}</h3>
129-
</div>
156+
<div className='bg-white rounded-[2rem] border border-gray-100 shadow-sm hover:shadow-xl transition-all duration-300 h-full p-8 flex flex-col group relative overflow-hidden text-left'>
157+
158+
{/* Header: Category and Icon */}
159+
<div className='flex justify-between items-center mb-6'>
160+
<span className={`px-3 py-1 rounded-full text-xs font-semibold tracking-wide ${getTagStyle(article.category)}`}>
161+
{article.category}
162+
</span>
163+
<div className={`w-12! h-12! weiz-icon ${article.styleName}`}></div>
164+
</div>
165+
166+
{/* Body: Date, Title, Description */}
167+
<div className='flex-grow flex flex-col items-start mb-6'>
168+
<h3 className='w-full text-xl font-bold text-gray-900 mb-3 line-clamp-1 leading-tight group-hover:text-blue-500 transition-colors'>
169+
{article.title}
170+
</h3>
171+
<p className='text-gray-500 text-sm leading-relaxed line-clamp-3 w-full'>
172+
{article.description}
173+
</p>
130174
</div>
131175

132-
{/* 文章内容 */}
133-
<div className='p-4 md:p-6'>
134-
<p className='leading-relaxed mb-3 md:mb-4 line-clamp-2 text-sm md:text-base'>{article.description}</p>
135-
<div className='flex items-center justify-between'>
136-
<span className='text-sm text-blue-500'>{article.date}</span>
137-
138-
<Button
139-
className='pl-8!'
140-
type='primary'
141-
shape='round'
142-
icon={<ArrowRightOutlined />}
143-
iconPosition='end'
144-
href={article.link}
145-
target='_blank'>
146-
阅读全文
147-
</Button>
176+
{/* Footer: Read More Link */}
177+
<div className='mt-auto pt-4 border-t border-gray-50 w-full flex justify-between items-center'>
178+
<div className='text-xs font-bold text-gray-400 uppercase tracking-wider'>
179+
{article.date}
148180
</div>
181+
<a
182+
href={article.link}
183+
target='_blank'
184+
className='inline-flex items-center text-gray-900 font-semibold text-sm group/link hover:text-blue-600 transition-colors'
185+
>
186+
阅读文章
187+
<ArrowRightOutlined className='ml-2 w-4 h-4 transform group-hover/link:translate-x-1 transition-transform' />
188+
</a>
149189
</div>
190+
150191
</div>
151192
</div>
152193
))}
153194
</div>
154195
</div>
155-
156-
{/* 导航按钮 */}
157-
<div className='flex justify-center'>
196+
197+
{/* Mobile Navigation Buttons (Bottom) */}
198+
<div className='flex md:hidden justify-center mt-4'>
158199
<div className='flex space-x-4'>
159200
<Button
160201
icon={<LeftOutlined />}
161202
shape='circle'
162203
onClick={prevSlide}
163-
className='flex items-center justify-center border-indigo-300 text-indigo-600 hover:bg-indigo-50 hover:border-indigo-400 transition-colors'
204+
className='flex items-center justify-center border-gray-200 text-gray-500 hover:bg-gray-50 hover:text-gray-900 hover:border-gray-300 transition-all'
164205
aria-label="Previous slide"
165206
/>
166207
<Button
167208
icon={<RightOutlined />}
168209
shape='circle'
169210
onClick={nextSlide}
170-
className='flex items-center justify-center border-indigo-300 text-indigo-600 hover:bg-indigo-50 hover:border-indigo-400 transition-colors'
211+
className='flex items-center justify-center border-gray-200 text-gray-500 hover:bg-gray-50 hover:text-gray-900 hover:border-gray-300 transition-all'
171212
aria-label="Next slide"
172213
/>
173214
</div>
174215
</div>
216+
175217
</div>
176218
)}
177219
</div>

0 commit comments

Comments
 (0)