refactor(ui): 优化导航组件和页面布局

- 移除多个页面的面包屑导航组件
- 添加统一的返回按钮组件替代各页面独立实现
- 优化导航栏滚动检测逻辑和动画效果
- 更新常量类型定义和统计数据
- 调整动态导入的SSR配置为false
- 添加FlipClock组件展示公司运营时长
- 优化新闻列表页的类型安全和响应式设计

src/app/(marketing)/about/client.tsx

@@ -2,18 +2,38 @@
 
 import { motion } from 'framer-motion';
 import { useInView } from 'framer-motion';
-import { useRef } from 'react';
+import { useRef, useState, useEffect, useMemo } from 'react';
 import { COMPANY_INFO, STATS } from '@/lib/constants';
 import { Card, CardContent } from '@/components/ui/card';
 import { PageHeader } from '@/components/ui/page-header';
-import { Breadcrumb } from '@/components/layout/breadcrumb';
+import { FlipClock } from '@/components/ui/flip-clock';
 import { Lightbulb, Users, Target, Award, MapPin, Mail, Phone } from 'lucide-react';
 
 export function AboutClient() {
   const contentRef = useRef(null);
   const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });
+  const [operationTime, setOperationTime] = useState({ days: 0, months: 0, years: 0 });
 
-  const values = [
+  useEffect(() => {
+    const foundingDate = new Date('2026-01-15');
+    const calculateTime = () => {
+      const now = new Date();
+      const diff = now.getTime() - foundingDate.getTime();
+      
+      const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+      const years = Math.floor(days / 365);
+      const months = Math.floor((days % 365) / 30);
+      
+      setOperationTime({ days, months, years });
+    };
+
+    calculateTime();
+    const timer = setInterval(calculateTime, 60000);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  const values = useMemo(() => [
     {
       icon: Lightbulb,
       title: '创新驱动',
@@ -34,44 +54,33 @@ export function AboutClient() {
       title: '诚信为本',
       description: '坚持透明沟通，信守承诺，以诚信赢得客户信任和尊重',
     },
-  ];
+  ], []);
 
-  const milestones = [
+  const milestones = useMemo(() => [
     {
-      date: '2018年',
+      date: '2026年1月',
       title: '公司成立',
-      description: '睿新致远正式成立，专注于企业数字化转型解决方案',
+      description: '四川睿新致远科技有限公司在成都龙泉驿区正式成立，专注于企业数字化转型解决方案',
     },
     {
-      date: '2019年',
-      title: '业务拓展',
-      description: '成功服务首批20家企业客户，建立行业口碑',
+      date: '2026年1月',
+      title: '团队组建',
+      description: '核心团队到位，技术团队拥有丰富的行业经验和专业技能',
     },
     {
-      date: '2020年',
-      title: '技术突破',
-      description: '自主研发的智能分析平台上线，获得多项技术专利',
+      date: '2026年2月',
+      title: '业务启动',
+      description: '推出企业数字化转型解决方案，开始服务首批客户',
     },
     {
-      date: '2021年',
-      title: '规模扩张',
-      description: '团队规模突破50人，服务客户超过100家',
+      date: '2026年2月',
+      title: '产品发布',
+      description: '自主研发的ERP、CRM等产品陆续上线，为客户提供一站式数字化服务',
     },
-    {
-      date: '2022年',
-      title: '生态建设',
-      description: '建立合作伙伴生态，与多家行业领军企业达成战略合作',
-    },
-    {
-      date: '2023年',
-      title: '品牌升级',
-      description: '全面升级品牌形象，推出新一代智能化产品矩阵',
-    },
-  ];
+  ], []);
 
   return (
     <div className="min-h-screen bg-white">
-      <Breadcrumb items={[{ label: '关于我们', href: '/about' }]} />
       <PageHeader
         title="关于我们"
         description="了解睿新致远的品牌故事。我们不只是技术供应商，更是您数字化转型的成长伙伴。以智慧连接数字趋势，以伙伴身份陪您成长。"
@@ -144,6 +153,12 @@ export function AboutClient() {
             </p>
           </div>
 
+          <FlipClock
+            years={operationTime.years}
+            months={operationTime.months}
+            days={operationTime.days}
+          />
+
           <motion.div
             initial={{ opacity: 0, y: 20 }}
             animate={isContentInView ? { opacity: 1, y: 0 } : {}}
@@ -176,7 +191,7 @@ export function AboutClient() {
                   transition={{ duration: 0.5, delay: 0.4 + idx * 0.1 }}
                   className="flex items-start gap-4 p-6 bg-[#FFFBF5] rounded-xl border border-[#E5E5E5] hover:border-[#1C1C1C] transition-all duration-300"
                 >
-                  <div className="w-12 h-12 rounded-lg bg-[#C41E3A] flex items-center justify-center flex-shrink-0">
+                  <div className="w-12 h-12 rounded-lg bg-[#C41E3A] flex items-center justify-center shrink-0">
                     <value.icon className="w-6 h-6 text-white" />
                   </div>
                   <div>
@@ -204,7 +219,7 @@ export function AboutClient() {
                   transition={{ duration: 0.5, delay: 0.6 + idx * 0.1 }}
                   className="flex flex-col md:flex-row md:items-start gap-4 p-6 bg-[#FFFBF5] rounded-xl border border-[#E5E5E5]"
                 >
-                  <div className="md:w-32 flex-shrink-0">
+                  <div className="md:w-32 shrink-0">
                     <span className="text-sm font-medium text-[#C41E3A]">{milestone.date}</span>
                   </div>
                   <div className="flex-1">

src/app/(marketing)/cases/[id]/client.tsx

@@ -1,12 +1,11 @@
 'use client';
 
 import { useEffect, useRef, useState } from 'react';
-import { useRouter } from 'next/navigation';
 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, CheckCircle2, TrendingUp, Users, Target, Quote, Clock, MessageCircle, Award } from 'lucide-react';
+import { BackButton } from '@/components/ui/back-button';
+import { CheckCircle2, TrendingUp, Users, Target, Quote, Clock, MessageCircle, Award } from 'lucide-react';
 import { CASES } from '@/lib/constants';
 import type { StaticImageData } from 'next/image';
 
@@ -33,7 +32,6 @@ interface CaseDetailClientProps {
 export function CaseDetailClient({ caseItem }: CaseDetailClientProps) {
   const [isVisible, setIsVisible] = useState(false);
   const contentRef = useRef<HTMLDivElement>(null);
-  const router = useRouter();
 
   useEffect(() => {
     const observer = new IntersectionObserver(
@@ -68,18 +66,9 @@ export function CaseDetailClient({ caseItem }: CaseDetailClientProps) {
 
   return (
     <main className="min-h-screen bg-white">
-      <Breadcrumb items={[{ label: '成功案例', href: '/cases' }, { label: caseItem.title, href: `/cases/${caseItem.id}` }]} />
       <div className="relative overflow-hidden bg-gradient-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 mt-8">
             <Badge className="mb-4 bg-[#C41E3A]/10 text-[#C41E3A] hover:bg-[#C41E3A]/20">
               {caseItem.industry}

src/app/(marketing)/cases/page.tsx

@@ -7,7 +7,6 @@ import { useRef } from 'react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { PageHeader } from '@/components/ui/page-header';
-import { Breadcrumb } from '@/components/layout/breadcrumb';
 import { ArrowLeft, ArrowRight, Building2, Calendar, TrendingUp } from 'lucide-react';
 import { CASES } from '@/lib/constants';
 
@@ -17,7 +16,6 @@ export default function CasesPage() {
 
   return (
     <div className="min-h-screen bg-white">
-      <Breadcrumb items={[{ label: '成功案例', href: '/cases' }]} />
       <PageHeader
         title="与谁同行，决定能走多远"
         description="我们与优秀的企业同行，共同成长，共创未来"

src/app/(marketing)/contact/page.tsx

@@ -9,7 +9,6 @@ import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { PageHeader } from '@/components/ui/page-header';
-import { Breadcrumb } from '@/components/layout/breadcrumb';
 import { Mail, Phone, MapPin, Send, Loader2 } from 'lucide-react';
 
 export default function ContactPage() {
@@ -101,7 +100,6 @@ export default function ContactPage() {
 
   return (
     <div className="min-h-screen bg-white">
-      <Breadcrumb items={[{ label: '联系我们', href: '/contact' }]} />
       <PageHeader
         badge="联系我们"
         title="与我们取得联系"

src/app/(marketing)/news/[slug]/NewsDetailClient.tsx

@@ -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">

src/app/(marketing)/news/page.tsx

@@ -1,14 +1,13 @@
 'use client';
 
-import { useState, useMemo, useRef } from 'react';
+import { useState, useMemo, useRef, ChangeEvent } from 'react';
 import { useInView } from 'framer-motion';
-import { NEWS } from '@/lib/constants';
+import { NEWS, NewsItem } from '@/lib/constants';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { PageHeader } from '@/components/ui/page-header';
-import { Breadcrumb } from '@/components/layout/breadcrumb';
 import { Search, Calendar, ArrowRight, ArrowLeft, Filter } from 'lucide-react';
 import Link from 'next/link';
 import { motion } from 'framer-motion';
@@ -33,7 +32,6 @@ export default function NewsListPage() {
 
   return (
     <div className="min-h-screen bg-white">
-      <Breadcrumb items={[{ label: '新闻动态', href: '/news' }]} />
       <PageHeader
         title="新闻动态"
         description="了解睿新致远最新动态，把握行业发展脉搏"
@@ -79,7 +77,7 @@ export default function NewsListPage() {
               type="text"
               placeholder="搜索新闻..."
               value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => setSearchQuery(e.target.value)}
               className="pl-10"
             />
           </div>
@@ -91,7 +89,7 @@ export default function NewsListPage() {
             </div>
           ) : (
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-              {filteredNews.map((news, index) => (
+              {filteredNews.map((news: NewsItem, index: number) => (
                 <motion.div
                   key={news.id}
                   initial={{ opacity: 0, y: 20 }}
@@ -101,7 +99,7 @@ export default function NewsListPage() {
                   <Link href={`/news/${news.id}`}>
                     <Card className="h-full hover:shadow-lg transition-shadow cursor-pointer border-[#E5E5E5] hover:border-[#C41E3A]">
                       <CardContent className="p-0">
-                        <div className="aspect-video bg-gradient-to-br from-[#C41E3A]/10 to-[#1C1C1C]/10 flex items-center justify-center mb-4">
+                        <div className="aspect-video bg-linear-to-br from-[#C41E3A]/10 to-[#1C1C1C]/10 flex items-center justify-center mb-4">
                           <span className="text-4xl">📰</span>
                         </div>
                         <div className="p-6">

src/app/(marketing)/page.tsx

@@ -8,7 +8,7 @@ const ServicesSection = dynamic(
   () => import('@/components/sections/services-section').then(mod => ({ default: mod.ServicesSection })),
   { 
     loading: () => <SectionSkeleton />,
-    ssr: true 
+    ssr: false 
   }
 );
 
@@ -16,7 +16,7 @@ const ProductsSection = dynamic(
   () => import('@/components/sections/products-section').then(mod => ({ default: mod.ProductsSection })),
   { 
     loading: () => <SectionSkeleton />,
-    ssr: true 
+    ssr: false 
   }
 );
 
@@ -24,7 +24,7 @@ const CasesSection = dynamic(
   () => import('@/components/sections/cases-section').then(mod => ({ default: mod.CasesSection })),
   { 
     loading: () => <SectionSkeleton />,
-    ssr: true 
+    ssr: false 
   }
 );
 
@@ -32,7 +32,7 @@ const AboutSection = dynamic(
   () => import('@/components/sections/about-section').then(mod => ({ default: mod.AboutSection })),
   { 
     loading: () => <SectionSkeleton />,
-    ssr: true 
+    ssr: false 
   }
 );
 
@@ -40,7 +40,7 @@ const NewsSection = dynamic(
   () => import('@/components/sections/news-section').then(mod => ({ default: mod.NewsSection })),
   { 
     loading: () => <SectionSkeleton />,
-    ssr: true 
+    ssr: false 
   }
 );
 
@@ -48,7 +48,7 @@ const ContactSection = dynamic(
   () => import('@/components/sections/contact-section').then(mod => ({ default: mod.ContactSection })),
   { 
     loading: () => <SectionSkeleton />,
-    ssr: true 
+    ssr: false 
   }
 );
 

src/app/(marketing)/products/page.tsx

@@ -8,7 +8,6 @@ import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { PageHeader } from '@/components/ui/page-header';
-import { Breadcrumb } from '@/components/layout/breadcrumb';
 import { ArrowRight, ArrowLeft, Check, TrendingUp } from 'lucide-react';
 import { PRODUCTS } from '@/lib/constants';
 
@@ -18,7 +17,6 @@ export default function ProductsPage() {
 
   return (
     <div className="min-h-screen bg-white">
-      <Breadcrumb items={[{ label: '产品服务', href: '/products' }]} />
       <PageHeader
         title="产品服务"
         description="自主研发的企业级产品，助力企业高效运营，实现数字化转型"

src/app/(marketing)/services/[id]/client.tsx

@@ -1,13 +1,11 @@
 'use client';
 
 import { useRef } from 'react';
-import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
-import { Breadcrumb } from '@/components/layout/breadcrumb';
+import { BackButton } from '@/components/ui/back-button';
 import { 
-  ArrowLeft, 
   CheckCircle2, 
   TrendingUp, 
   Users, 
@@ -96,7 +94,6 @@ const outcomes = {
 };
 
 export function ServiceDetailClient({ service }: ServiceDetailClientProps) {
-  const router = useRouter();
   const contentRef = useRef<HTMLDivElement>(null);
 
   const serviceChallenges = challenges[service.id as keyof typeof challenges] ?? [];
@@ -107,18 +104,9 @@ export function ServiceDetailClient({ service }: ServiceDetailClientProps) {
 
   return (
     <main className="min-h-screen bg-white">
-      <Breadcrumb items={[{ label: '核心业务', href: '/services' }, { label: service.title, href: `/services/${service.id}` }]} />
       <div className="relative overflow-hidden bg-gradient-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 mt-8">
             <div className="flex items-center gap-4 mb-6">
               <div className="w-16 h-16 bg-[#C41E3A] rounded-2xl flex items-center justify-center text-white">

src/app/(marketing)/services/page.tsx

@@ -8,7 +8,6 @@ import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { PageHeader } from '@/components/ui/page-header';
 import { ServiceCardSkeleton } from '@/components/ui/loading-skeleton';
-import { Breadcrumb } from '@/components/layout/breadcrumb';
 import { ArrowRight, ArrowLeft, Code, Cloud, BarChart3, Shield } from 'lucide-react';
 import { SERVICES } from '@/lib/constants';
 
@@ -31,7 +30,6 @@ export default function ServicesPage() {
 
   return (
     <div className="min-h-screen bg-white">
-      <Breadcrumb items={[{ label: '核心业务', href: '/services' }]} />
       <PageHeader
         title="核心业务"
         description="专业技术团队，为您提供全方位的数字化解决方案"

src/app/(marketing)/solutions/page.tsx

@@ -5,7 +5,6 @@ import { useInView } from 'framer-motion';
 import { useRef } from 'react';
 import { Button } from '@/components/ui/button';
 import { PageHeader } from '@/components/ui/page-header';
-import { Breadcrumb } from '@/components/layout/breadcrumb';
 import { ArrowRight, Lightbulb, Cpu, Users, CheckCircle2 } from 'lucide-react';
 
 export default function SolutionsPage() {
@@ -14,7 +13,6 @@ export default function SolutionsPage() {
 
   return (
     <div className="min-h-screen bg-white">
-      <Breadcrumb items={[{ label: '解决方案', href: '/solutions' }]} />
       <PageHeader
         title="三种角色，一种身份——您的成长伙伴"
         description="我们以伙伴的身份，陪您走过数字化转型的每一步"