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

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

docs/plans/2026-02-27-website-comprehensive-optimization.md

@@ -23,7 +23,7 @@
 - Modify: `src/app/(marketing)/products/page.tsx:1-20`
 - Modify: `src/app/(marketing)/solutions/page.tsx:1-20`
 - Modify: `src/app/(marketing)/contact/page.tsx:1-20`
-- Modify: `src/app/news/page.tsx:1-20`
+- Modify: `src/app/(marketing)/news/page.tsx:1-20`
 
 **Step 1: 创建面包屑导航组件**
 
@@ -713,7 +713,7 @@ export const TouchButton = forwardRef<
     <Button
       ref={ref}
       {...props}
-      className={`${props.className || ''} min-h-[44px] min-w-[44px]`}
+      className={`${props.className || ''} min-h-11 min-w-11`}
       style={{
         WebkitTapHighlightColor: 'transparent',
         ...props.style,
@@ -976,7 +976,7 @@ git commit -m "feat: implement comprehensive SEO optimization with structured da
 - Modify: `src/app/(marketing)/products/page.tsx:1-20`
 - Modify: `src/app/(marketing)/solutions/page.tsx:1-20`
 - Modify: `src/app/(marketing)/contact/page.tsx:1-20`
-- Modify: `src/app/news/page.tsx:1-20`
+- Modify: `src/app/(marketing)/news/page.tsx:1-20`
 
 **Step 1: 统一页面标题组件**
 
@@ -992,7 +992,7 @@ interface PageHeaderProps {
 
 export function PageHeader({ badge, title, description }: PageHeaderProps) {
   return (
-    <div className="bg-gradient-to-br from-[#FFFBF5] to-white py-16">
+    <div className="bg-linear-to-br from-[#FFFBF5] to-white py-16">
       <div className="container-wide">
         {badge && (
           <Badge className="mb-4">{badge}</Badge>
@@ -1041,7 +1041,7 @@ export function ContentCard({
       <Card className="h-full hover:shadow-xl transition-all duration-300 border-[#E5E5E5] hover:border-[#C41E3A]">
         <CardContent className="p-0">
           {image && (
-            <div className="aspect-video bg-gradient-to-br from-[#C41E3A]/10 to-[#1C1C1C]/10 flex items-center justify-center">
+            <div className="aspect-video bg-linear-to-br from-[#C41E3A]/10 to-[#1C1C1C]/10 flex items-center justify-center">
               <span className="text-4xl">📰</span>
             </div>
           )}

package.json

@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev -p 3001",
+    "dev": "next dev -p 3000",
     "build": "next build",
-    "start": "next start -p 3001",
+    "start": "next start -p 3000",
     "lint": "eslint"
   },
   "dependencies": {

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="我们以伙伴的身份，陪您走过数字化转型的每一步"

src/components/layout/header.tsx

@@ -1,12 +1,12 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { Menu, X } from 'lucide-react';
-import { motion, AnimatePresence } from 'framer-motion';
+import { AnimatePresence, motion } from 'framer-motion';
 import { Button } from '@/components/ui/button';
-import { COMPANY_INFO, NAVIGATION } from '@/lib/constants';
+import { COMPANY_INFO, NAVIGATION, type NavigationItem } from '@/lib/constants';
 import { useFocusTrap } from '@/hooks/use-focus-trap';
 
 export function Header() {
@@ -15,25 +15,58 @@ export function Header() {
   const [activeSection, setActiveSection] = useState('home');
   const pathname = usePathname();
   const focusTrapRef = useFocusTrap<HTMLDivElement>(isOpen);
+  const sectionCacheRef = useRef(new Map<string, { offsetTop: number; offsetHeight: number }>());
+  const activeSectionRef = useRef(activeSection);
+  const isManualNavigationRef = useRef(false);
+  const manualNavTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   useEffect(() => {
+    activeSectionRef.current = activeSection;
+  }, [activeSection]);
+
+  useEffect(() => {
+    let ticking = false;
+    
+    const updateSectionCache = () => {
+      const sections = ['home', 'services', 'products', 'cases', 'about', 'news', 'contact'];
+      sections.forEach(sectionId => {
+        const element = document.getElementById(sectionId);
+        if (element) {
+          sectionCacheRef.current.set(sectionId, {
+            offsetTop: element.offsetTop,
+            offsetHeight: element.offsetHeight
+          });
+        }
+      });
+    };
+
+    updateSectionCache();
+    
     const handleScroll = () => {
-      setIsScrolled(window.scrollY > 20);
-      
-      if (pathname === '/') {
-        const sections = ['home', 'services', 'products', 'cases', 'about', 'news', 'contact'];
-        const scrollPosition = window.scrollY + 100;
-        
-        for (const sectionId of sections) {
-          const element = document.getElementById(sectionId);
-          if (element) {
-            const { offsetTop, offsetHeight } = element;
-            if (scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight) {
-              setActiveSection(sectionId);
-              break;
+      if (!ticking) {
+        requestAnimationFrame(() => {
+          setIsScrolled(window.scrollY > 20);
+          
+          if (pathname === '/' && !isManualNavigationRef.current) {
+            const scrollPosition = window.scrollY + 100;
+            const sections = ['home', 'services', 'products', 'cases', 'about', 'news', 'contact'];
+            let currentSection = 'home';
+            
+            for (const sectionId of sections) {
+              const cached = sectionCacheRef.current.get(sectionId);
+              if (cached && scrollPosition >= cached.offsetTop && scrollPosition < cached.offsetTop + cached.offsetHeight) {
+                currentSection = sectionId;
+                break;
+              }
+            }
+            
+            if (currentSection !== activeSectionRef.current) {
+              setActiveSection(currentSection);
             }
           }
-        }
+          ticking = false;
+        });
+        ticking = true;
       }
     };
 
@@ -45,11 +78,16 @@ export function Header() {
 
     window.addEventListener('scroll', handleScroll, { passive: true });
     window.addEventListener('keydown', handleGlobalKeyDown);
+    window.addEventListener('resize', updateSectionCache);
     handleScroll();
 
     return () => {
       window.removeEventListener('scroll', handleScroll);
       window.removeEventListener('keydown', handleGlobalKeyDown);
+      window.removeEventListener('resize', updateSectionCache);
+      if (manualNavTimeoutRef.current) {
+        clearTimeout(manualNavTimeoutRef.current);
+      }
     };
   }, [pathname, isOpen]);
 
@@ -63,14 +101,32 @@ export function Header() {
     }
   }, [isOpen]);
 
-  const isActive = (item: typeof NAVIGATION[number]) => {
+  const handleNavClick = useCallback((item: NavigationItem) => {
+    if (pathname === '/' && item.href.startsWith('/#')) {
+      setActiveSection(item.id);
+      isManualNavigationRef.current = true;
+      
+      if (manualNavTimeoutRef.current) {
+        clearTimeout(manualNavTimeoutRef.current);
+      }
+      
+      manualNavTimeoutRef.current = setTimeout(() => {
+        isManualNavigationRef.current = false;
+      }, 800);
+    }
+    setIsOpen(false);
+  }, [pathname]);
+
+  const isActive = useCallback((item: NavigationItem) => {
     if (pathname === '/') {
       return activeSection === item.id;
     }
     
     const navPath = item.href.split('#')[0];
     return pathname === navPath || pathname.startsWith(navPath + '/');
-  };
+  }, [pathname, activeSection]);
+
+  const navigationItems = useMemo(() => NAVIGATION, []);
 
   return (
     <>
@@ -98,10 +154,11 @@ export function Header() {
             </Link>
 
             <nav className="hidden md:flex items-center gap-1" role="navigation" aria-label="主导航">
-              {NAVIGATION.map((item) => (
+              {navigationItems.map((item) => (
                 <Link
                   key={item.id}
                   href={item.href}
+                  onClick={() => handleNavClick(item)}
                   className={`
                     relative px-3 py-1.5 text-sm font-medium
                     transition-all duration-300
@@ -113,13 +170,16 @@ export function Header() {
                   aria-current={isActive(item) ? 'page' : undefined}
                 >
                   {item.label}
-                  {isActive(item) && (
-                    <motion.span 
-                      layoutId="activeNav"
-                      className="absolute bottom-0 left-1/2 -translate-x-1/2 w-6 h-0.5 bg-[#C41E3A] rounded-full"
-                      transition={{ type: "spring", stiffness: 380, damping: 30 }}
-                    />
-                  )}
+                  <span 
+                    className={`
+                      absolute bottom-0 left-1/2 -translate-x-1/2 w-6 h-0.5 bg-[#C41E3A] rounded-full
+                      transition-all duration-200 ease-out
+                      ${isActive(item) 
+                        ? 'opacity-100 scale-x-100' 
+                        : 'opacity-0 scale-x-0'
+                      }
+                    `}
+                  />
                 </Link>
               ))}
             </nav>
@@ -172,7 +232,7 @@ export function Header() {
               aria-label="移动端导航"
             >
               <nav className="container-wide py-4">
-                {NAVIGATION.map((item, index) => (
+                {navigationItems.map((item, index) => (
                   <motion.div
                     key={item.id}
                     initial={{ x: -20, opacity: 0 }}
@@ -181,7 +241,7 @@ export function Header() {
                   >
                     <Link
                       href={item.href}
-                      onClick={() => setIsOpen(false)}
+                      onClick={() => handleNavClick(item)}
                       className={`
                         block px-4 py-3 text-base font-medium
                         transition-all duration-300

src/components/sections/news-section.tsx

@@ -2,16 +2,17 @@
 
 import { motion } from 'framer-motion';
 import { useInView } from 'framer-motion';
-import { useRef } from 'react';
+import { useRef, useMemo } from 'react';
 import Link from 'next/link';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
-import { TouchSwipe } from '@/components/ui/touch-swipe';
 import { ArrowRight, Calendar } from 'lucide-react';
 import { NEWS } from '@/lib/constants';
 
 export function NewsSection() {
   const ref = useRef(null);
   const isInView = useInView(ref, { once: true, margin: '-100px' });
+  
+  const displayedNews = useMemo(() => NEWS.slice(0, 4), []);
 
   return (
     <section id="news" className="py-24 bg-[#F5F5F5]" ref={ref}>
@@ -19,7 +20,7 @@ export function NewsSection() {
         <motion.div 
           initial={{ opacity: 0, y: 20 }}
           animate={isInView ? { opacity: 1, y: 0 } : {}}
-          transition={{ duration: 0.6 }}
+          transition={{ duration: 0.5 }}
           className="text-center max-w-3xl mx-auto mb-16"
         >
           <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#1C1C1C] mb-6">
@@ -30,53 +31,43 @@ export function NewsSection() {
           </p>
         </motion.div>
 
-        <TouchSwipe
-          onSwipeLeft={() => {
-            // 切换到下一页新闻
-          }}
-          onSwipeRight={() => {
-            // 切换到上一页新闻
-          }}
-          className="md:hidden"
-        >
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
-            {NEWS.slice(0, 4).map((news, idx) => (
-              <motion.div
-                key={news.id}
-                initial={{ opacity: 0, y: 20 }}
-                animate={isInView ? { opacity: 1, y: 0 } : {}}
-                transition={{ duration: 0.5, delay: 0.1 + idx * 0.1 }}
-              >
-                <Card className="h-full flex flex-col group cursor-pointer border-[#E5E5E5] hover:border-[#1C1C1C]">
-                  <CardHeader>
-                    <div className="flex items-center gap-2 mb-3">
-                      <span className="inline-block px-2 py-0.5 rounded-full bg-[#F5F5F5] text-[#1C1C1C] text-xs font-medium">
-                        {news.category}
-                      </span>
-                      <span className="text-sm text-[#5C5C5C] flex items-center gap-1">
-                        <Calendar className="w-3 h-3" />
-                        {news.date}
-                      </span>
-                    </div>
-                    <CardTitle className="text-xl leading-tight">{news.title}</CardTitle>
-                  </CardHeader>
-                  <CardContent className="flex-1 flex flex-col">
-                    <CardDescription className="text-base leading-relaxed mb-6 flex-1">
-                      {news.excerpt}
-                    </CardDescription>
-                    <a
-                      href={`/news/${news.id}`}
-                      className="inline-flex items-center text-sm font-medium text-[#1C1C1C] hover:text-[#C41E3A] transition-colors group/link"
-                    >
-                      阅读更多
-                      <ArrowRight className="ml-1 w-4 h-4 transition-transform group-hover/link:translate-x-1" />
-                    </a>
-                  </CardContent>
-                </Card>
-              </motion.div>
-            ))}
-          </div>
-        </TouchSwipe>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
+          {displayedNews.map((news, idx) => (
+            <motion.div
+              key={news.id}
+              initial={{ opacity: 0, y: 20 }}
+              animate={isInView ? { opacity: 1, y: 0 } : {}}
+              transition={{ duration: 0.4, delay: idx * 0.08 }}
+            >
+              <Card className="h-full flex flex-col group cursor-pointer border-[#E5E5E5] hover:border-[#1C1C1C]">
+                <CardHeader>
+                  <div className="flex items-center gap-2 mb-3">
+                    <span className="inline-block px-2 py-0.5 rounded-full bg-[#F5F5F5] text-[#1C1C1C] text-xs font-medium">
+                      {news.category}
+                    </span>
+                    <span className="text-sm text-[#5C5C5C] flex items-center gap-1">
+                      <Calendar className="w-3 h-3" />
+                      {news.date}
+                    </span>
+                  </div>
+                  <CardTitle className="text-xl leading-tight">{news.title}</CardTitle>
+                </CardHeader>
+                <CardContent className="flex-1 flex flex-col">
+                  <CardDescription className="text-base leading-relaxed mb-6 flex-1">
+                    {news.excerpt}
+                  </CardDescription>
+                  <a
+                    href={`/news/${news.id}`}
+                    className="inline-flex items-center text-sm font-medium text-[#1C1C1C] hover:text-[#C41E3A] transition-colors group/link"
+                  >
+                    阅读更多
+                    <ArrowRight className="ml-1 w-4 h-4 transition-transform group-hover/link:translate-x-1" />
+                  </a>
+                </CardContent>
+              </Card>
+            </motion.div>
+          ))}
+        </div>
 
         <motion.div 
           initial={{ opacity: 0, y: 20 }}

src/components/ui/back-button.tsx

@@ -10,7 +10,8 @@ export function BackButton() {
   return (
     <Button 
       variant="ghost" 
-      className="text-[#5C5C5C] hover:text-[#C41E3A] hover:bg-[#C41E3A]/10"
+      size="sm"
+      className="text-[#5C5C5C] hover:text-[#C41E3A] hover:bg-transparent h-auto py-2 px-3"
       onClick={() => router.back()}
     >
       <ArrowLeft className="w-4 h-4 mr-2" />

src/components/ui/flip-clock.tsx

@@ -0,0 +1,149 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+interface FlipCardProps {
+  value: number;
+  label: string;
+  maxDigits?: number;
+}
+
+interface FlipDigitProps {
+  digit: number;
+  prevDigit: number;
+}
+
+function FlipDigit({ digit, prevDigit }: FlipDigitProps) {
+  return (
+    <div className="relative w-14 h-20 sm:w-16 sm:h-24 md:w-20 md:h-28 perspective-1000">
+      {/* 背景卡片 - 静态显示当前数字 */}
+      <div className="absolute inset-0 bg-gradient-to-b from-white via-white to-gray-50 rounded-lg shadow-xl overflow-hidden border border-gray-200">
+        {/* 上半部分 */}
+        <div className="absolute top-0 left-0 right-0 h-1/2 bg-gradient-to-b from-white to-gray-50 border-b border-gray-300 overflow-hidden">
+          <div className="absolute inset-0 flex items-center justify-center text-4xl sm:text-5xl md:text-6xl font-bold text-[#C41E3A]">
+            {digit}
+          </div>
+        </div>
+        {/* 下半部分 */}
+        <div className="absolute bottom-0 left-0 right-0 h-1/2 bg-gradient-to-b from-white to-gray-50 overflow-hidden">
+          <div className="absolute inset-0 flex items-center justify-center text-4xl sm:text-5xl md:text-6xl font-bold text-[#C41E3A]">
+            {digit}
+          </div>
+        </div>
+      </div>
+      
+      {/* 翻转动画层 */}
+      <AnimatePresence custom={true}>
+        {/* 上半部分翻转 */}
+        <motion.div
+          key={`top-${prevDigit}`}
+          initial={{ rotateX: 0 }}
+          animate={{ rotateX: -180 }}
+          exit={{ rotateX: -180 }}
+          transition={{ duration: 0.6, ease: [0.4, 0, 0.2, 1] }}
+          className="absolute inset-0 bg-gradient-to-b from-white to-gray-50 rounded-t-lg overflow-hidden border-t border-l border-r border-gray-200"
+          style={{ 
+            transformOrigin: 'bottom',
+            backfaceVisibility: 'hidden',
+          }}
+        >
+          <div className="absolute inset-0 flex items-center justify-center text-4xl sm:text-5xl md:text-6xl font-bold text-[#C41E3A]">
+            {prevDigit}
+          </div>
+        </motion.div>
+        
+        {/* 下半部分翻转 */}
+        <motion.div
+          key={`bottom-${digit}`}
+          initial={{ rotateX: 180 }}
+          animate={{ rotateX: 0 }}
+          exit={{ rotateX: 0 }}
+          transition={{ duration: 0.6, ease: [0.4, 0, 0.2, 1] }}
+          className="absolute inset-0 bg-gradient-to-b from-white to-gray-50 rounded-b-lg overflow-hidden border-b border-l border-r border-gray-200"
+          style={{ 
+            transformOrigin: 'top',
+            backfaceVisibility: 'hidden',
+          }}
+        >
+          <div className="absolute inset-0 flex items-center justify-center text-4xl sm:text-5xl md:text-6xl font-bold text-[#C41E3A]">
+            {digit}
+          </div>
+        </motion.div>
+      </AnimatePresence>
+      
+      {/* 中间分割线和装饰 */}
+      <div className="absolute top-1/2 left-0 right-0 h-px bg-gray-400 transform -translate-y-1/2" />
+      <div className="absolute top-0 left-0 right-0 h-px bg-gray-300/50" />
+      <div className="absolute bottom-0 left-0 right-0 h-px bg-gray-300/50" />
+      
+      {/* 侧面阴影增强立体感 */}
+      <div className="absolute inset-0 rounded-lg shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)] pointer-events-none" />
+    </div>
+  );
+}
+
+function FlipCard({ value, label, maxDigits = 2 }: FlipCardProps) {
+  const [prevValue, setPrevValue] = useState(value);
+  const [currentValue, setCurrentValue] = useState(value);
+
+  useEffect(() => {
+    if (value !== currentValue) {
+      setPrevValue(currentValue);
+      setCurrentValue(value);
+    }
+  }, [value]);
+
+  // 将数字转换为数组，每个数字一位
+  const formatNumber = (num: number) => {
+    const str = num.toString().padStart(maxDigits, '0');
+    return str.split('').map(c => parseInt(c));
+  };
+
+  const currentDigits = formatNumber(currentValue);
+  const prevDigits = formatNumber(prevValue);
+
+  return (
+    <div className="flex flex-col items-center">
+      <div className="flex gap-1 sm:gap-2 mb-3">
+        {currentDigits.map((digit, index) => (
+          <FlipDigit
+            key={index}
+            digit={digit}
+            prevDigit={prevDigits[index] ?? digit}
+          />
+        ))}
+      </div>
+      <div className="text-sm sm:text-base text-[#5C5C5C] font-medium">{label}</div>
+    </div>
+  );
+}
+
+interface FlipClockProps {
+  years: number;
+  months: number;
+  days: number;
+}
+
+export function FlipClock({ years, months, days }: FlipClockProps) {
+  return (
+    <div className="bg-[#FFFBF5] rounded-2xl p-8 border border-[#E5E5E5]">
+      <h2 className="text-2xl font-bold text-[#1C1C1C] mb-6">运营时长</h2>
+      <p className="text-[#5C5C5C] mb-6 leading-relaxed">
+        自 <span className="font-semibold text-[#1C1C1C]">2026 年 1 月 15 日</span> 成立以来
+      </p>
+      
+      <div className="flex flex-wrap justify-center items-center gap-4 sm:gap-6 mb-6">
+        <FlipCard value={years} label="年" maxDigits={2} />
+        <div className="text-2xl sm:text-3xl font-bold text-[#C41E3A]">:</div>
+        <FlipCard value={months} label="个月" maxDigits={2} />
+        <div className="text-2xl sm:text-3xl font-bold text-[#C41E3A]">:</div>
+        <FlipCard value={days} label="天" maxDigits={3} />
+      </div>
+      
+      <p className="text-[#5C5C5C] leading-relaxed font-medium">
+        持续为客户提供优质的数字化转型服务
+      </p>
+    </div>
+  );
+}

src/lib/constants.ts

@@ -1,3 +1,27 @@
+// Type Definitions
+export type NewsCategory = '公司新闻' | '产品发布' | '合作动态' | '行业资讯';
+
+export interface NewsItem {
+  id: string;
+  title: string;
+  excerpt: string;
+  date: string;
+  category: NewsCategory;
+  image: string;
+  content: string;
+}
+
+export interface NavigationItem {
+  id: string;
+  label: string;
+  href: string;
+}
+
+export interface StatItem {
+  value: string;
+  label: string;
+}
+
 // Company Information
 export const COMPANY_INFO = {
   name: '四川睿新致远科技有限公司',
@@ -12,7 +36,7 @@ export const COMPANY_INFO = {
 } as const;
 
 // Navigation Items - 混合导航（首页滚动，详情页跳转）
-export const NAVIGATION = [
+export const NAVIGATION: NavigationItem[] = [
   { id: 'home', label: '首页', href: '/#home' },
   { id: 'services', label: '核心业务', href: '/#services' },
   { id: 'products', label: '产品服务', href: '/#products' },
@@ -20,15 +44,15 @@ export const NAVIGATION = [
   { id: 'about', label: '关于我们', href: '/#about' },
   { id: 'news', label: '新闻动态', href: '/#news' },
   { id: 'contact', label: '联系我们', href: '/#contact' },
-] as const;
+];
 
 // Stats Data
-export const STATS = [
-  { value: '50+', label: '企业客户' },
-  { value: '100+', label: '成功案例' },
-  { value: '200+', label: '项目交付' },
-  { value: '8+', label: '年行业经验' },
-] as const;
+export const STATS: StatItem[] = [
+  { value: '10+', label: '企业客户' },
+  { value: '20+', label: '成功案例' },
+  { value: '30+', label: '项目交付' },
+  { value: '12+', label: '年行业经验' },
+];
 
 // Services Data
 export const SERVICES = [
@@ -319,7 +343,7 @@ export const PRODUCTS = [
 ] as const;
 
 // News Data
-export const NEWS = [
+export const NEWS: NewsItem[] = [
   {
     id: '1',
     title: '四川睿新致远科技有限公司正式成立',
@@ -433,7 +457,7 @@ export const NEWS = [
 
 公司表示，将持续优化网站功能和内容，将其打造为展示公司形象、服务客户需求的重要窗口。欢迎广大客户和合作伙伴访问浏览，提出宝贵意见。`,
   },
-] as const;
+];
 
 // Solutions Data
 export const SOLUTIONS = [