feat(deploy): 添加 Docker 部署配置与 SSR 优化

- 添加 Dockerfile.static、docker-compose.server.yml 和 nginx-internal.conf
- 优化 Hero 统计数据为 SSR 渲染,提升首屏性能
- 更新案例数据为政府单位数字化解决方案
- 统计数据改为动态计算,基于案例数据和当前年份
- 修复计数器动画初始状态问题
This commit is contained in:
张翔
2026-04-21 15:51:03 +08:00
parent 933a831ab3
commit de94e931af
13 changed files with 459 additions and 176 deletions
@@ -152,7 +152,7 @@ export function HeroFeatures({ isVisible }: HeroContentProps) {
}
export function HeroStats() {
const [statsVisible, setStatsVisible] = useState(false);
const [statsVisible, setStatsVisible] = useState(true);
const shouldReduceMotion = useReducedMotion();
useEffect(() => {
+4 -3
View File
@@ -2,7 +2,8 @@
import { useEffect, useRef, useState } from 'react';
import dynamic from 'next/dynamic';
import { HeroContent, HeroTitle, HeroDescription, HeroButtons, HeroFeatures, HeroStats } from './hero-section-atoms';
import { HeroContent, HeroTitle, HeroDescription, HeroButtons, HeroFeatures } from './hero-section-atoms';
import type { ReactNode } from 'react';
const InkBackground = dynamic(
() => import('@/components/ui/ink-decoration').then(mod => ({ default: mod.InkBackground })),
@@ -19,7 +20,7 @@ const SubtleDots = dynamic(
{ ssr: false }
);
export function HeroSection() {
export function HeroSection({ heroStats }: { heroStats: ReactNode }) {
const [isVisible, setIsVisible] = useState(false);
const sectionRef = useRef<HTMLElement>(null);
@@ -64,7 +65,7 @@ export function HeroSection() {
<HeroDescription isVisible={isVisible} />
<HeroButtons isVisible={isVisible} />
<HeroFeatures isVisible={isVisible} />
<HeroStats />
{heroStats}
</div>
</div>
</section>
@@ -0,0 +1,23 @@
import { STATS } from '@/lib/constants';
export function HeroStatsSSR() {
return (
<div className="pt-16 border-t border-[#E2E8F0]">
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12">
{STATS.map((stat) => (
<div
key={stat.label}
className="group cursor-default text-center"
>
<div className="text-4xl sm:text-5xl font-bold text-[#C41E3A] mb-3">
{stat.value}
</div>
<div className="text-sm text-[#718096] group-hover:text-[#4A5568] transition-colors">
{stat.label}
</div>
</div>
))}
</div>
</div>
);
}