novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(website): 三轮视觉改造与页面过渡动画

Browse Source 
改造概要（30项）：
- 第一轮：Hero重构/Section差异化/SocialProof强化/CTA对比度/About架构
- 第二轮：字体优化/背景交替/Solutions差异化/Footer五列/MegaDropdown修复
- 第三轮：卡片交互/表单层级/CTA统一/时间线标记/连接线/三列布局/移动导航/Button微交互/SEO Schema
- P3-2：template.tsx+Framer Motion页面过渡/loading.tsx加载状态
- 清理：删除未用组件/hooks，修复重复移动导航，清理冗余CSS
This commit is contained in:
张翔
2026-05-10 08:20:27 +08:00
parent 747405dc96
commit 37296b5717
133 changed files with 2583 additions and 13487 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(marketing)/news/[slug]/NewsDetailClient.tsx
+23 -20
View File
@@ -6,6 +6,7 @@ import { Badge } from '@/components/ui/badge';
import { PageNav } from '@/components/layout/page-nav';
import { Calendar, ArrowLeft, Newspaper } from 'lucide-react';
import { motion } from 'framer-motion';
import { useReducedMotion } from '@/hooks/use-reduced-motion';
import { NEWS } from '@/lib/constants';
interface NewsDetailClientProps {
@@ -13,28 +14,30 @@ interface NewsDetailClientProps {
}
export function NewsDetailClient({ news }: NewsDetailClientProps) {
const shouldReduceMotion = useReducedMotion();
const fadeUp = shouldReduceMotion ? {} : { initial: { opacity: 0, y: 20 } };
const relatedNews = NEWS
.filter((n) => n.id !== news.id && n.category === news.category)
.slice(0, 3);
return (
<div className="min-h-screen bg-white">
<div className="min-h-screen bg-[var(--color-bg-primary)]">
<section className="pt-32 pb-12">
<div className="container-wide">
<PageNav items={[{ label: '新闻动态', href: '/news' }, { label: news.title }]} />
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
{...fadeUp}
animate={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
className="max-w-4xl mt-6"
>
<Badge className="mb-4 bg-[#C41E3A]/10 text-[#C41E3A] hover:bg-[#C41E3A]/20 border-0">
<Badge className="mb-4 bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary)]/20 border-0">
{news.category}
</Badge>
<h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#1C1C1C] mb-4 tracking-tight">
<h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[var(--color-text-primary)] mb-4 tracking-tight">
{news.title}
</h1>
<div className="flex items-center gap-4 text-[#595959] text-sm">
<div className="flex items-center gap-4 text-[var(--color-text-muted)] text-sm">
<div className="flex items-center gap-1.5">
<Calendar className="w-4 h-4" />
{news.date}
@@ -47,8 +50,8 @@ export function NewsDetailClient({ news }: NewsDetailClientProps) {
<section className="pb-16">
<div className="container-wide">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
{...fadeUp}
whileInView={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5 }}
className="max-w-4xl"
@@ -62,24 +65,24 @@ export function NewsDetailClient({ news }: NewsDetailClientProps) {
/>
</div>
) : (
<div className="aspect-video bg-gradient-to-br from-[#FEF2F4] to-[#F5F5F5] rounded-xl mb-8 flex items-center justify-center">
<Newspaper className="w-16 h-16 text-[#C41E3A]/30" />
<div className="aspect-video bg-gradient-to-br from-[var(--color-brand-primary-bg)] to-[var(--color-bg-tertiary)] rounded-xl mb-8 flex items-center justify-center">
<Newspaper className="w-16 h-16 text-[var(--color-brand-primary)]/30" />
</div>
)}
<div className="border-l-4 border-[#C41E3A] pl-6 mb-8">
<p className="text-lg text-[#595959] leading-relaxed">
<div className="border-l-4 border-[var(--color-brand-primary)] pl-6 mb-8">
<p className="text-lg text-[var(--color-text-muted)] leading-relaxed">
{news.excerpt}
</p>
</div>
<div className="text-[#1C1C1C] leading-relaxed whitespace-pre-line">
<div className="text-[var(--color-text-primary)] leading-relaxed whitespace-pre-line">
{news.content}
</div>
{relatedNews.length > 0 && (
<div className="mt-16 pt-12 border-t border-[#E5E5E5]">
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-8">相关新闻</h2>
<div className="mt-16 pt-12 border-t border-[var(--color-border)]">
<h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-8">相关新闻</h2>
<div className="grid md:grid-cols-3 gap-6">
{relatedNews.map((related) => (
<StaticLink key={related.id} href={`/news/${related.id}`}>
@@ -92,16 +95,16 @@ export function NewsDetailClient({ news }: NewsDetailClientProps) {
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
/>
) : (
<div className="w-full h-full bg-gradient-to-br from-[#FEF2F4] to-[#F5F5F5] flex items-center justify-center">
<Newspaper className="w-8 h-8 text-[#C41E3A]/30" />
<div className="w-full h-full bg-gradient-to-br from-[var(--color-brand-primary-bg)] to-[var(--color-bg-tertiary)] flex items-center justify-center">
<Newspaper className="w-8 h-8 text-[var(--color-brand-primary)]/30" />
</div>
)}
</div>
<Badge variant="secondary" className="mb-2 text-xs">{related.category}</Badge>
<h3 className="text-base font-semibold text-[#1C1C1C] mb-1 line-clamp-2 group-hover:text-[#C41E3A] transition-colors">
<h3 className="text-base font-semibold text-[var(--color-text-primary)] mb-1 line-clamp-2 group-hover:text-[var(--color-brand-primary)] transition-colors">
{related.title}
</h3>
<p className="text-sm text-[#595959] line-clamp-2">{related.excerpt}</p>
<p className="text-sm text-[var(--color-text-muted)] line-clamp-2">{related.excerpt}</p>
</div>
</StaticLink>
))}
@@ -117,7 +120,7 @@ export function NewsDetailClient({ news }: NewsDetailClientProps) {
</Button>
</StaticLink>
<StaticLink href="/contact">
<Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white">
<Button size="lg" className="bg-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-hover)] text-white">
联系我们
</Button>
</StaticLink>
src/app/(marketing)/news/page.tsx
+26 -23
View File
@@ -2,6 +2,7 @@
import { useState, useMemo, ChangeEvent } from 'react';
import { motion } from 'framer-motion';
import { useReducedMotion } from '@/hooks/use-reduced-motion';
import { NEWS, COMPANY_INFO } from '@/lib/constants';
import { Badge } from '@/components/ui/badge';
import { Input } from '@/components/ui/input';
@@ -14,6 +15,8 @@ const categories = ['全部', '公司新闻', '研发动态'];
const ITEMS_PER_PAGE = 9;
export default function NewsListPage() {
const shouldReduceMotion = useReducedMotion();
const fadeUp = shouldReduceMotion ? {} : { initial: { opacity: 0, y: 20 } };
const [selectedCategory, setSelectedCategory] = useState('全部');
const [searchQuery, setSearchQuery] = useState('');
const [currentPage, setCurrentPage] = useState(1);
@@ -50,21 +53,21 @@ export default function NewsListPage() {
};
return (
<div className="min-h-screen bg-white">
<div className="min-h-screen bg-[var(--color-bg-primary)]">
<section className="pt-32 pb-16">
<div className="container-wide">
<PageNav items={[{ label: '新闻动态' }]} />
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
{...fadeUp}
animate={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
className="max-w-3xl"
>
<p className="text-sm font-medium text-[#C41E3A] mb-4 tracking-wide uppercase">News</p>
<h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6 tracking-tight">
<p className="text-sm font-medium text-[var(--color-brand-primary)] mb-4 tracking-wide uppercase">News</p>
<h1 className="text-4xl md:text-5xl font-bold text-[var(--color-text-primary)] mb-6 tracking-tight">
新闻动态
</h1>
<p className="text-lg text-[#595959] leading-relaxed">
<p className="text-lg text-[var(--color-text-muted)] leading-relaxed">
了解{COMPANY_INFO.displayName}最新动态，把握行业发展脉搏
</p>
</motion.div>
@@ -74,8 +77,8 @@ export default function NewsListPage() {
<section className="pb-16">
<div className="container-wide">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
{...fadeUp}
whileInView={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5 }}
className="mb-8 space-y-4"
@@ -88,7 +91,7 @@ export default function NewsListPage() {
onClick={() => handleCategoryChange(category)}
className={
selectedCategory === category
? 'bg-[#C41E3A] hover:bg-[#A01830] text-white'
? 'bg-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-hover)] text-white'
: ''
}
>
@@ -98,7 +101,7 @@ export default function NewsListPage() {
</div>
<div className="relative max-w-md">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[#595959] w-5 h-5" />
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[var(--color-text-muted)] w-5 h-5" />
<Input
type="text"
placeholder="搜索新闻..."
@@ -112,8 +115,8 @@ export default function NewsListPage() {
{paginatedNews.length === 0 ? (
<div className="text-center py-20">
<Newspaper className="w-12 h-12 text-[#E5E5E5] mx-auto mb-4" />
<p className="text-lg text-[#595959]">没有找到相关新闻</p>
<Newspaper className="w-12 h-12 text-[var(--color-border)] mx-auto mb-4" />
<p className="text-lg text-[var(--color-text-muted)]">没有找到相关新闻</p>
</div>
) : (
<>
@@ -121,15 +124,15 @@ export default function NewsListPage() {
{paginatedNews.map((newsItem, index) => (
<motion.div
key={newsItem.id}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
{...fadeUp}
whileInView={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: index * 0.1 }}
>
<StaticLink href={`/news/${newsItem.id}`}>
<div className="group h-full bg-white rounded-xl border border-[#E5E5E5] overflow-hidden hover:border-[#C41E3A]/30 hover:shadow-md transition-all duration-300">
<div className="group h-full bg-[var(--color-bg-primary)] rounded-xl border border-[var(--color-border)] overflow-hidden hover:border-[var(--color-brand-primary)]/30 hover:shadow-md transition-all duration-300">
{newsItem.image ? (
<div className="aspect-video bg-[#F5F5F5] overflow-hidden">
<div className="aspect-video bg-[var(--color-bg-tertiary)] overflow-hidden">
<img
src={newsItem.image}
alt={newsItem.title}
@@ -137,25 +140,25 @@ export default function NewsListPage() {
/>
</div>
) : (
<div className="aspect-video bg-gradient-to-br from-[#FEF2F4] to-[#F5F5F5] flex items-center justify-center">
<Newspaper className="w-12 h-12 text-[#C41E3A]/30" />
<div className="aspect-video bg-gradient-to-br from-[var(--color-brand-primary-bg)] to-[var(--color-bg-tertiary)] flex items-center justify-center">
<Newspaper className="w-12 h-12 text-[var(--color-brand-primary)]/30" />
</div>
)}
<div className="p-6">
<div className="flex items-center gap-2 mb-3">
<Badge variant="secondary" className="text-xs">{newsItem.category}</Badge>
<div className="flex items-center gap-1 text-xs text-[#595959]">
<div className="flex items-center gap-1 text-xs text-[var(--color-text-muted)]">
<Calendar className="w-3 h-3" />
{newsItem.date}
</div>
</div>
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-2 line-clamp-2 group-hover:text-[#C41E3A] transition-colors">
<h3 className="text-lg font-semibold text-[var(--color-text-primary)] mb-2 line-clamp-2 group-hover:text-[var(--color-brand-primary)] transition-colors">
{newsItem.title}
</h3>
<p className="text-sm text-[#595959] line-clamp-3 mb-4">
<p className="text-sm text-[var(--color-text-muted)] line-clamp-3 mb-4">
{newsItem.excerpt}
</p>
<div className="flex items-center text-[#C41E3A] text-sm font-medium">
<div className="flex items-center text-[var(--color-brand-primary)] text-sm font-medium">
阅读更多
<ArrowRight className="ml-1 w-4 h-4 group-hover:translate-x-1 transition-transform" />
</div>
@@ -184,7 +187,7 @@ export default function NewsListPage() {
onClick={() => handlePageChange(page)}
className={
currentPage === page
? 'bg-[#C41E3A] hover:bg-[#A01830] text-white'
? 'bg-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-hover)] text-white'
: ''
}
>