refactor(ui): 优化导航组件和页面布局
- 移除多个页面的面包屑导航组件 - 添加统一的返回按钮组件替代各页面独立实现 - 优化导航栏滚动检测逻辑和动画效果 - 更新常量类型定义和统计数据 - 调整动态导入的SSR配置为false - 添加FlipClock组件展示公司运营时长 - 优化新闻列表页的类型安全和响应式设计
This commit is contained in:
@@ -3,9 +3,8 @@
|
||||
import Link from 'next/link';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Breadcrumb } from '@/components/layout/breadcrumb';
|
||||
import { ArrowLeft, Calendar } from 'lucide-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { BackButton } from '@/components/ui/back-button';
|
||||
import { Calendar } from 'lucide-react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useInView } from 'framer-motion';
|
||||
import { useRef } from 'react';
|
||||
@@ -18,7 +17,6 @@ interface NewsDetailClientProps {
|
||||
export function NewsDetailClient({ news }: NewsDetailClientProps) {
|
||||
const contentRef = useRef(null);
|
||||
const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });
|
||||
const router = useRouter();
|
||||
|
||||
const relatedNews = NEWS
|
||||
.filter((n) => n.id !== news.id && n.category === news.category)
|
||||
@@ -26,18 +24,9 @@ export function NewsDetailClient({ news }: NewsDetailClientProps) {
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<Breadcrumb items={[{ label: '新闻动态', href: '/news' }, { label: news.title, href: `/news/${news.id}` }]} />
|
||||
<div className="relative overflow-hidden bg-gradient-to-b from-[#FAFAFA] to-white">
|
||||
<div className="relative overflow-hidden bg-linear-to-b from-[#FAFAFA] to-white">
|
||||
<div className="container-wide relative z-10 pt-32 pb-20">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-[#5C5C5C] hover:text-[#C41E3A] hover:bg-[#C41E3A]/10"
|
||||
onClick={() => router.back()}
|
||||
type="button"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
返回
|
||||
</Button>
|
||||
<BackButton />
|
||||
<div className="max-w-4xl">
|
||||
<div className="inline-block px-4 py-2 bg-[#C41E3A]/10 rounded-full text-[#C41E3A] text-sm mb-6">
|
||||
{news.category}
|
||||
@@ -63,7 +52,7 @@ export function NewsDetailClient({ news }: NewsDetailClientProps) {
|
||||
className="max-w-4xl"
|
||||
>
|
||||
<article className="prose prose-lg max-w-none">
|
||||
<div className="aspect-video bg-gradient-to-br from-[#C41E3A]/10 to-[#1C1C1C]/10 rounded-lg mb-8 flex items-center justify-center">
|
||||
<div className="aspect-video bg-linear-to-br from-[#C41E3A]/10 to-[#1C1C1C]/10 rounded-lg mb-8 flex items-center justify-center">
|
||||
<span className="text-6xl">📰</span>
|
||||
</div>
|
||||
|
||||
@@ -85,7 +74,7 @@ export function NewsDetailClient({ news }: NewsDetailClientProps) {
|
||||
{relatedNews.map((related) => (
|
||||
<Link key={related.id} href={`/news/${related.id}`}>
|
||||
<div className="group cursor-pointer">
|
||||
<div className="aspect-video bg-gradient-to-br from-[#C41E3A]/10 to-[#1C1C1C]/10 rounded-lg mb-4 flex items-center justify-center group-hover:shadow-lg transition-shadow">
|
||||
<div className="aspect-video bg-linear-to-br from-[#C41E3A]/10 to-[#1C1C1C]/10 rounded-lg mb-4 flex items-center justify-center group-hover:shadow-lg transition-shadow">
|
||||
<span className="text-4xl">📰</span>
|
||||
</div>
|
||||
<Badge variant="secondary" className="mb-2">
|
||||
|
||||
Reference in New Issue
Block a user