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

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

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>
+  );
+}