Dev #25

Merged
zhangxiang merged 46 commits from dev into main 2026-09-01 14:55:21 +08:00
26 changed files with 297 additions and 571 deletions
Showing only changes of commit 08a020105f - Show all commits
@@ -2,6 +2,7 @@
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { ScrollReveal } from '@/components/ui/scroll-reveal'; import { ScrollReveal } from '@/components/ui/scroll-reveal';
import { StaticLink } from '@/components/ui/static-link';
import { BrandCalligraphyName } from '@/components/ui/brand-calligraphy-name'; import { BrandCalligraphyName } from '@/components/ui/brand-calligraphy-name';
import { import {
ArrowRight, ArrowRight,
@@ -355,20 +356,20 @@ export default function BrandContent() {
从一次深入的业务诊断开始,开启您的数据驱动之旅。 从一次深入的业务诊断开始,开启您的数据驱动之旅。
</p> </p>
<div className="flex flex-col sm:flex-row gap-4 sm:gap-6"> <div className="flex flex-col sm:flex-row gap-4 sm:gap-6">
<a <StaticLink
href="/contact" href="/contact"
className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90 min-h-[52px]" className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90 min-h-[52px]"
> >
预约咨询 预约咨询
<ArrowRight className="w-5 h-5 transition-transform duration-300 group-hover:translate-x-1" /> <ArrowRight className="w-5 h-5 transition-transform duration-300 group-hover:translate-x-1" />
</a> </StaticLink>
<a <StaticLink
href="/cases" href="/cases"
className="group inline-flex items-center justify-center gap-2 px-10 py-5 font-semibold text-base text-dark-text-primary border border-dark-border hover:border-dark-text-muted transition-all duration-300 min-h-[52px]" className="group inline-flex items-center justify-center gap-2 px-10 py-5 font-semibold text-base text-dark-text-primary border border-dark-border hover:border-dark-text-muted transition-all duration-300 min-h-[52px]"
> >
查看客户案例 查看客户案例
<ChevronRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" /> <ChevronRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
</a> </StaticLink>
</div> </div>
</ScrollReveal> </ScrollReveal>
</div> </div>
@@ -2,6 +2,7 @@
import { useState, useMemo } from 'react'; import { useState, useMemo } from 'react';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { StaticLink } from '@/components/ui/static-link';
import { Building2, ArrowUpRight, Target, Lightbulb, Filter } from 'lucide-react'; import { Building2, ArrowUpRight, Target, Lightbulb, Filter } from 'lucide-react';
import { import {
type CaseStudy, type CaseStudy,
@@ -308,19 +309,19 @@ export default function CasesContentV3({
让我们聊聊您的挑战,看看能创造什么样的成果。 让我们聊聊您的挑战,看看能创造什么样的成果。
</p> </p>
<div className="flex flex-col sm:flex-row gap-4 sm:gap-6"> <div className="flex flex-col sm:flex-row gap-4 sm:gap-6">
<a <StaticLink
href="/contact" href="/contact"
className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation" className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation"
> >
预约咨询 预约咨询
<ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" /> <ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
</a> </StaticLink>
<a <StaticLink
href="/services" href="/services"
className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary hover:border-border-secondary hover:bg-white transition-all duration-300 min-h-[52px] touch-manipulation" className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary hover:border-border-secondary hover:bg-white transition-all duration-300 min-h-[52px] touch-manipulation"
> >
了解服务 了解服务
</a> </StaticLink>
</div> </div>
</motion.div> </motion.div>
</div> </div>
+11 -7
View File
@@ -5,6 +5,7 @@ import Image from 'next/image';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal'; import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
import { StaticLink } from '@/components/ui/static-link';
import { HeroProductVisual } from '@/components/sections/hero-product-visual'; import { HeroProductVisual } from '@/components/sections/hero-product-visual';
import { ArrowRight, Lightbulb, Database, Layers, Code, Puzzle, Server } from 'lucide-react'; import { ArrowRight, Lightbulb, Database, Layers, Code, Puzzle, Server } from 'lucide-react';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
@@ -335,13 +336,13 @@ function TrustSection({ pageCopy }: { pageCopy?: HomePageCopy | null }) {
</div> </div>
))} ))}
</div> </div>
<a <StaticLink
href="/contact" href="/contact"
className="group inline-flex shrink-0 items-center gap-2 text-sm font-semibold text-ink hover:text-brand transition-colors" className="group inline-flex shrink-0 items-center gap-2 text-sm font-semibold text-ink hover:text-brand transition-colors"
> >
<span>{earlyCtaLabel}</span> <span>{earlyCtaLabel}</span>
<ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" /> <ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
</a> </StaticLink>
</div> </div>
</StaggerReveal> </StaggerReveal>
</div> </div>
@@ -398,7 +399,10 @@ function NarrativeSection({ pageCopy }: { pageCopy?: HomePageCopy | null }) {
<StaggerReveal key={act.number} staggerDelay={0.08}> <StaggerReveal key={act.number} staggerDelay={0.08}>
<div className="group relative h-full bg-white p-8 sm:p-10 md:p-12 transition-colors duration-300 hover:bg-bg-secondary"> <div className="group relative h-full bg-white p-8 sm:p-10 md:p-12 transition-colors duration-300 hover:bg-bg-secondary">
<div className="flex items-start justify-between mb-8"> <div className="flex items-start justify-between mb-8">
<span className="text-4xl sm:text-5xl font-black text-text-hint tabular-nums leading-none"> <span
aria-hidden="true"
className="text-4xl sm:text-5xl font-black text-text-hint tabular-nums leading-none"
>
{act.number} {act.number}
</span> </span>
</div> </div>
@@ -524,13 +528,13 @@ function CasesSection({ cases, pageCopy }: { cases?: Record<string, any>[]; page
<p className="text-text-secondary leading-relaxed text-lg mb-8"> <p className="text-text-secondary leading-relaxed text-lg mb-8">
{casesDesc} {casesDesc}
</p> </p>
<a <StaticLink
href="/contact" href="/contact"
className="group inline-flex items-center gap-3 text-ink font-semibold text-sm" className="group inline-flex items-center gap-3 text-ink font-semibold text-sm"
> >
成为首批共创客户 成为首批共创客户
<ArrowRight className="w-4 h-5 transition-transform duration-300 group-hover:translate-x-2 text-text-secondary group-hover:text-brand" /> <ArrowRight className="w-4 h-5 transition-transform duration-300 group-hover:translate-x-2 text-text-secondary group-hover:text-brand" />
</a> </StaticLink>
</ScrollReveal> </ScrollReveal>
<ScrollReveal delay={0.15}> <ScrollReveal delay={0.15}>
<div className="bain-card p-10 sm:p-12 bg-bg-secondary"> <div className="bain-card p-10 sm:p-12 bg-bg-secondary">
@@ -556,13 +560,13 @@ function CasesSection({ cases, pageCopy }: { cases?: Record<string, any>[]; page
</h2> </h2>
</ScrollReveal> </ScrollReveal>
<ScrollReveal delay={0.1}> <ScrollReveal delay={0.1}>
<a <StaticLink
href="/cases" href="/cases"
className="group inline-flex items-center gap-3 text-ink font-semibold text-sm" className="group inline-flex items-center gap-3 text-ink font-semibold text-sm"
> >
查看全部案例 查看全部案例
<ArrowRight className="w-4 h-5 transition-transform duration-300 group-hover:translate-x-2 text-text-secondary group-hover:text-brand" /> <ArrowRight className="w-4 h-5 transition-transform duration-300 group-hover:translate-x-2 text-text-secondary group-hover:text-brand" />
</a> </StaticLink>
</ScrollReveal> </ScrollReveal>
</div> </div>
@@ -2,6 +2,7 @@
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal'; import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
import { StaticLink } from '@/components/ui/static-link';
import { EASE_OUT } from '@/components/ui/page-decoration'; import { EASE_OUT } from '@/components/ui/page-decoration';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { ArrowRight, CheckCircle2 } from 'lucide-react'; import { ArrowRight, CheckCircle2 } from 'lucide-react';
@@ -154,13 +155,13 @@ export function MethodologyContent({ data }: MethodologyContentProps) {
</p> </p>
<div className="flex flex-wrap justify-center gap-6"> <div className="flex flex-wrap justify-center gap-6">
<Button size="xl" asChild> <Button size="xl" asChild>
<a href="/services"> <StaticLink href="/services">
了解我们的服务 了解我们的服务
<ArrowRight className="w-5 h-5 ml-2" /> <ArrowRight className="w-5 h-5 ml-2" />
</a> </StaticLink>
</Button> </Button>
<Button size="xl" variant="outline" asChild> <Button size="xl" variant="outline" asChild>
<a href="/contact">联系我们</a> <StaticLink href="/contact">联系我们</StaticLink>
</Button> </Button>
</div> </div>
</ScrollReveal> </ScrollReveal>
+2 -2
View File
@@ -75,7 +75,7 @@ function NewsCard({ newsItem, index }: { newsItem: NewsItem; index: number }) {
} }
export default function NewsContentV3({ news, pageCopy }: { news?: NewsItem[]; pageCopy?: Record<string, unknown> | null }) { export default function NewsContentV3({ news, pageCopy }: { news?: NewsItem[]; pageCopy?: Record<string, unknown> | null }) {
const NEWS = news ?? []; const NEWS = useMemo(() => news ?? [], [news]);
const [selectedCategory, setSelectedCategory] = useState('全部'); const [selectedCategory, setSelectedCategory] = useState('全部');
const [searchQuery, setSearchQuery] = useState(''); const [searchQuery, setSearchQuery] = useState('');
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
@@ -94,7 +94,7 @@ export default function NewsContentV3({ news, pageCopy }: { news?: NewsItem[]; p
newsItem.excerpt.toLowerCase().includes(searchQuery.toLowerCase()); newsItem.excerpt.toLowerCase().includes(searchQuery.toLowerCase());
return matchesCategory && matchesSearch; return matchesCategory && matchesSearch;
}); });
}, [selectedCategory, searchQuery]); }, [selectedCategory, searchQuery, NEWS]);
const totalPages = Math.ceil(filteredNews.length / ITEMS_PER_PAGE); const totalPages = Math.ceil(filteredNews.length / ITEMS_PER_PAGE);
const paginatedNews = useMemo(() => { const paginatedNews = useMemo(() => {
@@ -1,6 +1,7 @@
'use client'; 'use client';
import { ScrollReveal } from '@/components/ui/scroll-reveal'; import { ScrollReveal } from '@/components/ui/scroll-reveal';
import { StaticLink } from '@/components/ui/static-link';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
import { Calendar, ArrowLeft, Newspaper, ArrowRight } from 'lucide-react'; import { Calendar, ArrowLeft, Newspaper, ArrowRight } from 'lucide-react';
import { SectionLabel, EASE_OUT } from '@/components/ui/page-decoration'; import { SectionLabel, EASE_OUT } from '@/components/ui/page-decoration';
@@ -63,9 +64,9 @@ export default function NewsDetailContentV3({ news, relatedNews = [] }: NewsDeta
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10"> <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
<ScrollReveal> <ScrollReveal>
<nav aria-label="breadcrumb" className="flex items-center gap-2 text-sm text-text-muted mb-8 sm:mb-10"> <nav aria-label="breadcrumb" className="flex items-center gap-2 text-sm text-text-muted mb-8 sm:mb-10">
<a href="/news" className="hover:text-brand transition-colors duration-300"> <StaticLink href="/news" className="hover:text-brand transition-colors duration-300">
新闻动态 新闻动态
</a> </StaticLink>
<span>/</span> <span>/</span>
<span className="text-text-secondary line-clamp-1">{news.title}</span> <span className="text-text-secondary line-clamp-1">{news.title}</span>
</nav> </nav>
@@ -145,20 +146,20 @@ export default function NewsDetailContentV3({ news, relatedNews = [] }: NewsDeta
{/* Navigation */} {/* Navigation */}
<ScrollReveal> <ScrollReveal>
<div className="mt-16 sm:mt-20 flex flex-col sm:flex-row justify-center gap-4"> <div className="mt-16 sm:mt-20 flex flex-col sm:flex-row justify-center gap-4">
<a <StaticLink
href="/news" href="/news"
className="inline-flex items-center justify-center gap-2 px-8 py-4 font-medium text-base text-ink border border-border-primary hover:border-border-secondary hover:bg-bg-secondary transition-all duration-300" className="inline-flex items-center justify-center gap-2 px-8 py-4 font-medium text-base text-ink border border-border-primary hover:border-border-secondary hover:bg-bg-secondary transition-all duration-300"
> >
<ArrowLeft className="w-4 h-4" /> <ArrowLeft className="w-4 h-4" />
返回新闻列表 返回新闻列表
</a> </StaticLink>
<a <StaticLink
href="/contact" href="/contact"
className="group inline-flex items-center justify-center gap-2 px-8 py-4 font-medium text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90" className="group inline-flex items-center justify-center gap-2 px-8 py-4 font-medium text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90"
> >
联系我们 联系我们
<ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" /> <ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
</a> </StaticLink>
</div> </div>
</ScrollReveal> </ScrollReveal>
</div> </div>
@@ -1,6 +1,7 @@
'use client'; 'use client';
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal'; import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
import { StaticLink } from '@/components/ui/static-link';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
import { import {
@@ -153,10 +154,10 @@ export default function ErpUpgradeContentV2({ item }: ErpUpgradeContentV2Props)
<ScrollReveal delay={0.3}> <ScrollReveal delay={0.3}>
<div className="mt-12 flex flex-wrap gap-4"> <div className="mt-12 flex flex-wrap gap-4">
<Button size="xl" asChild> <Button size="xl" asChild>
<a href="/contact"> <StaticLink href="/contact">
免费诊断咨询 免费诊断咨询
<ArrowRight className="w-5 h-5 ml-2" /> <ArrowRight className="w-5 h-5 ml-2" />
</a> </StaticLink>
</Button> </Button>
<Button size="xl" variant="outline" asChild> <Button size="xl" variant="outline" asChild>
<a href="#features">了解功能模块</a> <a href="#features">了解功能模块</a>
@@ -404,13 +405,13 @@ export default function ErpUpgradeContentV2({ item }: ErpUpgradeContentV2Props)
<div className="flex flex-wrap gap-6 justify-center"> <div className="flex flex-wrap gap-6 justify-center">
<Button size="xl" asChild> <Button size="xl" asChild>
<a href="/contact"> <StaticLink href="/contact">
预约免费诊断 预约免费诊断
<ArrowRight className="w-5 h-5 ml-2" /> <ArrowRight className="w-5 h-5 ml-2" />
</a> </StaticLink>
</Button> </Button>
<Button size="xl" variant="outline" asChild> <Button size="xl" variant="outline" asChild>
<a href="/products/erp">查看产品详情</a> <StaticLink href="/products/erp">查看产品详情</StaticLink>
</Button> </Button>
</div> </div>
</ScrollReveal> </ScrollReveal>
@@ -2,6 +2,7 @@
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal'; import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
import { StaticLink } from '@/components/ui/static-link';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { ArrowRight, Package, Check, Settings, Users, FileText, Cpu, Shield, TrendingUp } from 'lucide-react'; import { ArrowRight, Package, Check, Settings, Users, FileText, Cpu, Shield, TrendingUp } from 'lucide-react';
import { SectionLabel, EASE_OUT } from '@/components/ui/page-decoration'; import { SectionLabel, EASE_OUT } from '@/components/ui/page-decoration';
@@ -89,13 +90,13 @@ function DetailHero({ product }: DetailHeroProps) {
className="flex flex-wrap gap-6" className="flex flex-wrap gap-6"
> >
<Button size="xl" asChild> <Button size="xl" asChild>
<a href="/contact"> <StaticLink href="/contact">
预约体验 预约体验
<ArrowRight className="w-5 h-5 ml-2" /> <ArrowRight className="w-5 h-5 ml-2" />
</a> </StaticLink>
</Button> </Button>
<Button size="xl" variant="outline" asChild> <Button size="xl" variant="outline" asChild>
<a href="/products">查看更多产品</a> <StaticLink href="/products">查看更多产品</StaticLink>
</Button> </Button>
</motion.div> </motion.div>
</div> </div>
@@ -403,15 +404,29 @@ function CTASection({ product }: CTASectionProps) {
<div className="flex flex-wrap justify-center gap-6"> <div className="flex flex-wrap justify-center gap-6">
<Button size="xl" asChild> <Button size="xl" asChild>
<a href="/contact"> <StaticLink href="/contact">
预约演示 预约演示
<ArrowRight className="w-5 h-5 ml-2" /> <ArrowRight className="w-5 h-5 ml-2" />
</a> </StaticLink>
</Button> </Button>
<Button size="xl" variant="outline" asChild> <Button size="xl" variant="outline" asChild>
<a href="/products">查看更多产品</a> <StaticLink href="/products">查看更多产品</StaticLink>
</Button> </Button>
</div> </div>
{/* 站内入口:ERP 升级专题(与 erp-upgrade-content-v2 的反向链接形成互链闭环) */}
{product.id === 'erp' && (
<div className="mt-10 inline-flex flex-wrap items-center justify-center gap-x-2 gap-y-1 text-sm text-text-secondary">
正在使用旧版 ERP?
<StaticLink
href="/products/erp-upgrade"
className="inline-flex items-center gap-1 font-medium text-brand hover:underline"
>
了解睿新 ERP 升级专题
<ArrowRight className="w-4 h-4" />
</StaticLink>
</div>
)}
</ScrollReveal> </ScrollReveal>
</div> </div>
</section> </section>
@@ -136,13 +136,13 @@ function HeroSection({ pageCopy }: { pageCopy?: PageCopy | null }) {
className="flex flex-wrap gap-6" className="flex flex-wrap gap-6"
> >
<Button size="xl" asChild> <Button size="xl" asChild>
<a href="/services"> <StaticLink href="/services">
{ctaPrimary} {ctaPrimary}
<ArrowRight className="w-5 h-5 ml-2" /> <ArrowRight className="w-5 h-5 ml-2" />
</a> </StaticLink>
</Button> </Button>
<Button size="xl" variant="outline" asChild> <Button size="xl" variant="outline" asChild>
<a href="/solutions">{ctaSecondary}</a> <StaticLink href="/solutions">{ctaSecondary}</StaticLink>
</Button> </Button>
</motion.div> </motion.div>
@@ -425,7 +425,7 @@ function SuiteCombosSection({ products }: { products: Product[] }) {
.filter(Boolean); .filter(Boolean);
return ( return (
<a <StaticLink
key={idx} key={idx}
href="/solutions" href="/solutions"
className="group p-10 lg:p-12 bg-white hover:bg-bg-secondary transition-all duration-500 overflow-hidden" className="group p-10 lg:p-12 bg-white hover:bg-bg-secondary transition-all duration-500 overflow-hidden"
@@ -465,7 +465,7 @@ function SuiteCombosSection({ products }: { products: Product[] }) {
<ArrowRight className="w-4 h-4" /> <ArrowRight className="w-4 h-4" />
</motion.div> </motion.div>
</div> </div>
</a> </StaticLink>
); );
})} })}
</StaggerReveal> </StaggerReveal>
@@ -498,13 +498,13 @@ function CTASection({ pageCopy }: { pageCopy?: PageCopy | null }) {
<div className="flex flex-wrap justify-center gap-6"> <div className="flex flex-wrap justify-center gap-6">
<Button size="xl" asChild> <Button size="xl" asChild>
<a href="/services"> <StaticLink href="/services">
了解我们的服务 了解我们的服务
<ArrowRight className="w-5 h-5 ml-2" /> <ArrowRight className="w-5 h-5 ml-2" />
</a> </StaticLink>
</Button> </Button>
<Button size="xl" variant="outline" asChild> <Button size="xl" variant="outline" asChild>
<a href="/contact">联系我们</a> <StaticLink href="/contact">联系我们</StaticLink>
</Button> </Button>
</div> </div>
</ScrollReveal> </ScrollReveal>
@@ -1,6 +1,7 @@
'use client'; 'use client';
import { getHeroTheme } from '@/lib/constants/hero-themes'; import { getHeroTheme } from '@/lib/constants/hero-themes';
import { StaticLink } from '@/components/ui/static-link';
import { DetailHero } from '@/components/detail/detail-hero'; import { DetailHero } from '@/components/detail/detail-hero';
import { DetailTrustSection } from '@/components/detail/detail-trust-section'; import { DetailTrustSection } from '@/components/detail/detail-trust-section';
import { DetailCTASection } from '@/components/detail/detail-cta-section'; import { DetailCTASection } from '@/components/detail/detail-cta-section';
@@ -112,19 +113,19 @@ export function StandaloneProductClient({ item }: StandaloneProductClientProps)
)} )}
<div className="flex flex-col sm:flex-row items-center justify-center gap-4"> <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
<a <StaticLink
href="/contact" href="/contact"
className="inline-flex items-center gap-2 rounded-lg bg-brand px-8 py-3 text-sm font-semibold text-white shadow-md transition-all hover:bg-brand/90 hover:shadow-lg" className="inline-flex items-center gap-2 rounded-lg bg-brand px-8 py-3 text-sm font-semibold text-white shadow-md transition-all hover:bg-brand/90 hover:shadow-lg"
> >
获取上线通知 获取上线通知
<ArrowRight className="h-4 w-4" /> <ArrowRight className="h-4 w-4" />
</a> </StaticLink>
<a <StaticLink
href="/products" href="/products"
className="inline-flex items-center rounded-lg border border-border-primary px-6 py-3 text-sm font-semibold text-text-secondary transition-all hover:border-border-secondary hover:bg-bg-secondary" className="inline-flex items-center rounded-lg border border-border-primary px-6 py-3 text-sm font-semibold text-text-secondary transition-all hover:border-border-secondary hover:bg-bg-secondary"
> >
查看其他产品 查看其他产品
</a> </StaticLink>
</div> </div>
</motion.div> </motion.div>
</div> </div>
@@ -1,6 +1,7 @@
'use client'; 'use client';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { StaticLink } from '@/components/ui/static-link';
import { ArrowUpRight, CheckCircle2, Zap, Clock, Users, Award, TrendingUp, Shield } from 'lucide-react'; import { ArrowUpRight, CheckCircle2, Zap, Clock, Users, Award, TrendingUp, Shield } from 'lucide-react';
import type { LucideIcon } from 'lucide-react'; import type { LucideIcon } from 'lucide-react';
import type { Service, CaseStudy } from '@/lib/constants/services'; import type { Service, CaseStudy } from '@/lib/constants/services';
@@ -80,13 +81,13 @@ function DetailHero({ service }: { service: Service }) {
transition={{ duration: 0.8, delay: 0.9, ease: EASE_OUT }} transition={{ duration: 0.8, delay: 0.9, ease: EASE_OUT }}
className="flex flex-col sm:flex-row gap-4 sm:gap-6" className="flex flex-col sm:flex-row gap-4 sm:gap-6"
> >
<a <StaticLink
href="/contact" href="/contact"
className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation" className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation"
> >
免费咨询 免费咨询
<ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" /> <ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
</a> </StaticLink>
<a <a
href="#cases" href="#cases"
className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary hover:border-ink/30 transition-all duration-300 min-h-[52px] touch-manipulation" className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary hover:border-ink/30 transition-all duration-300 min-h-[52px] touch-manipulation"
@@ -336,19 +337,19 @@ function CTASection() {
首次咨询免费,没有任何销售压力。 首次咨询免费,没有任何销售压力。
</p> </p>
<div className="flex flex-col sm:flex-row gap-4 sm:gap-6"> <div className="flex flex-col sm:flex-row gap-4 sm:gap-6">
<a <StaticLink
href="/contact" href="/contact"
className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation" className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation"
> >
预约免费咨询 预约免费咨询
<ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" /> <ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
</a> </StaticLink>
<a <StaticLink
href="/services" href="/services"
className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary hover:border-ink/30 transition-all duration-300 min-h-[52px] touch-manipulation" className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary hover:border-ink/30 transition-all duration-300 min-h-[52px] touch-manipulation"
> >
返回服务列表 返回服务列表
</a> </StaticLink>
</div> </div>
</motion.div> </motion.div>
</div> </div>
@@ -126,19 +126,19 @@ function HeroSection({ pageCopy }: { pageCopy?: PageCopy | null }) {
transition={{ duration: 0.8, delay: 0.7, ease: EASE_OUT }} transition={{ duration: 0.8, delay: 0.7, ease: EASE_OUT }}
className="flex flex-col sm:flex-row gap-4 sm:gap-6" className="flex flex-col sm:flex-row gap-4 sm:gap-6"
> >
<a <StaticLink
href="/contact" href="/contact"
className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation" className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation"
> >
{ctaPrimary} {ctaPrimary}
<ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" /> <ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
</a> </StaticLink>
<a <StaticLink
href="/products" href="/products"
className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary hover:border-ink/30 transition-all duration-300 min-h-[52px] touch-manipulation" className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary hover:border-ink/30 transition-all duration-300 min-h-[52px] touch-manipulation"
> >
{ctaSecondary} {ctaSecondary}
</a> </StaticLink>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -364,19 +364,19 @@ function CTASection({ pageCopy }: { pageCopy?: PageCopy | null }) {
))} ))}
</p> </p>
<div className="flex flex-col sm:flex-row gap-4 sm:gap-6"> <div className="flex flex-col sm:flex-row gap-4 sm:gap-6">
<a <StaticLink
href="/contact" href="/contact"
className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation" className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation"
> >
预约免费咨询 预约免费咨询
<ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" /> <ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
</a> </StaticLink>
<a <StaticLink
href="/team" href="/team"
className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary hover:border-ink/30 transition-all duration-300 min-h-[52px] touch-manipulation" className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary hover:border-ink/30 transition-all duration-300 min-h-[52px] touch-manipulation"
> >
了解我们的团队 了解我们的团队
</a> </StaticLink>
</div> </div>
</motion.div> </motion.div>
</div> </div>
@@ -2,6 +2,7 @@
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal'; import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
import { StaticLink } from '@/components/ui/static-link';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { ArrowRight, Factory, ShoppingCart, Heart, GraduationCap, Lightbulb, Settings, Users, TrendingUp, Package, BookOpen, MessageSquare, Calendar, Smartphone, Route, Shield, Truck } from 'lucide-react';import { SectionLabel, EASE_OUT } from '@/components/ui/page-decoration'; import { ArrowRight, Factory, ShoppingCart, Heart, GraduationCap, Lightbulb, Settings, Users, TrendingUp, Package, BookOpen, MessageSquare, Calendar, Smartphone, Route, Shield, Truck } from 'lucide-react';import { SectionLabel, EASE_OUT } from '@/components/ui/page-decoration';
import type { Solution } from '@/lib/constants/solutions'; import type { Solution } from '@/lib/constants/solutions';
@@ -83,13 +84,13 @@ function DetailHero({ solution }: DetailHeroProps) {
className="flex flex-wrap gap-6" className="flex flex-wrap gap-6"
> >
<Button size="xl" asChild> <Button size="xl" asChild>
<a href="/contact"> <StaticLink href="/contact">
获取方案详情 获取方案详情
<ArrowRight className="w-5 h-5 ml-2" /> <ArrowRight className="w-5 h-5 ml-2" />
</a> </StaticLink>
</Button> </Button>
<Button size="xl" variant="outline" asChild> <Button size="xl" variant="outline" asChild>
<a href="/products">查看产品</a> <StaticLink href="/products">查看产品</StaticLink>
</Button> </Button>
</motion.div> </motion.div>
</div> </div>
@@ -491,13 +492,13 @@ function CTASection({ solution }: CTASectionProps) {
<div className="flex flex-wrap justify-center gap-6"> <div className="flex flex-wrap justify-center gap-6">
<Button size="xl" asChild> <Button size="xl" asChild>
<a href="/contact"> <StaticLink href="/contact">
预约咨询 预约咨询
<ArrowRight className="w-5 h-5 ml-2" /> <ArrowRight className="w-5 h-5 ml-2" />
</a> </StaticLink>
</Button> </Button>
<Button size="xl" variant="outline" asChild> <Button size="xl" variant="outline" asChild>
<a href="/solutions">查看更多方案</a> <StaticLink href="/solutions">查看更多方案</StaticLink>
</Button> </Button>
</div> </div>
</ScrollReveal> </ScrollReveal>
@@ -74,19 +74,19 @@ function HeroSection({ pageCopy }: { pageCopy?: PageCopy | null }) {
transition={{ duration: 0.8, delay: 0.7, ease: EASE_OUT }} transition={{ duration: 0.8, delay: 0.7, ease: EASE_OUT }}
className="flex flex-col sm:flex-row gap-4 sm:gap-6" className="flex flex-col sm:flex-row gap-4 sm:gap-6"
> >
<a <StaticLink
href="/contact" href="/contact"
className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation" className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation"
> >
{ctaPrimary} {ctaPrimary}
<ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" /> <ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
</a> </StaticLink>
<a <StaticLink
href="/products" href="/products"
className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary hover:border-ink/30 transition-all duration-300 min-h-[52px] touch-manipulation" className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary hover:border-ink/30 transition-all duration-300 min-h-[52px] touch-manipulation"
> >
{ctaSecondary} {ctaSecondary}
</a> </StaticLink>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -240,19 +240,19 @@ function CTASection({ pageCopy }: { pageCopy?: PageCopy | null }) {
{ctaDescription} {ctaDescription}
</p> </p>
<div className="flex flex-col sm:flex-row gap-4 sm:gap-6"> <div className="flex flex-col sm:flex-row gap-4 sm:gap-6">
<a <StaticLink
href="/contact" href="/contact"
className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation" className="group inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation"
> >
获取定制方案 获取定制方案
<ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" /> <ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
</a> </StaticLink>
<a <StaticLink
href="/products" href="/products"
className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary hover:border-ink/30 transition-all duration-300 min-h-[52px] touch-manipulation" className="inline-flex items-center justify-center gap-3 px-10 py-5 font-semibold text-base text-ink border border-border-primary hover:border-ink/30 transition-all duration-300 min-h-[52px] touch-manipulation"
> >
浏览产品 浏览产品
</a> </StaticLink>
</div> </div>
</motion.div> </motion.div>
</div> </div>
+163
View File
@@ -0,0 +1,163 @@
'use client';
import { useState } from 'react';
import { trackError } from '@/lib/analytics';
export default function TestErrorTrackingClient() {
const [testResults, setTestResults] = useState<string[]>([]);
const addResult = (message: string) => {
setTestResults((prev) => [...prev, `[${new Date().toLocaleTimeString()}] ${message}`]);
};
const testJavaScriptError = () => {
try {
addResult('🧪 测试 1: 触发 JavaScript 运行时错误...');
throw new Error('测试错误:这是一个故意的 JavaScript 错误');
} catch (error) {
const errorMessage = error instanceof Error ? error.message : String(error);
trackError('javascript_error', errorMessage, false, {
test_id: 'test_js_error',
filename: 'test-error-page.tsx',
lineno: 20,
});
addResult('✅ JavaScript 错误已发送到 GA4');
}
};
const testPromiseRejection = () => {
addResult('🧪 测试 2: 触发 Promise 未捕获异常...');
Promise.reject(new Error('测试错误:Promise 故意拒绝'));
addResult('✅ Promise 异常已触发(由 GlobalErrorTracker 自动捕获)');
};
const testReactError = () => {
addResult('🧪 测试 3: 触发 React 渲染错误...');
trackError('react_error', '组件渲染失败:测试故意错误', true, {
component: 'TestComponent',
stack_trace: 'Error: 测试错误\n at TestComponent...',
});
addResult('✅ React 错误已发送到 GA4(标记为 fatal)');
};
const testNetworkError = () => {
addResult('🧪 测试 4: 模拟网络请求错误...');
trackError('network_error', 'Failed to fetch: https://api.example.com/data', false, {
url: 'https://api.example.com/data',
status_code: 0,
request_method: 'GET',
});
addResult('✅ 网络错误已发送到 GA4');
};
const clearResults = () => {
setTestResults([]);
};
return (
<div className="min-h-screen bg-gray-50 p-8">
<div className="max-w-4xl mx-auto">
<h1 className="text-3xl font-bold text-gray-900 mb-8">
🧪 GA4 错误监控测试面板
</h1>
<div className="bg-white rounded-lg shadow-md p-6 mb-6">
<h2 className="text-xl font-semibold text-gray-800 mb-4">
测试用例
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<button
onClick={testJavaScriptError}
className="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
>
📛 测试 JavaScript 错误
</button>
<button
onClick={testPromiseRejection}
className="px-6 py-3 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition-colors"
>
⚠️ 测试 Promise 异常
</button>
<button
onClick={testReactError}
className="px-6 py-3 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors"
>
💥 测试 React 致命错误
</button>
<button
onClick={testNetworkError}
className="px-6 py-3 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition-colors"
>
🌐 测试网络错误
</button>
</div>
<button
onClick={clearResults}
className="mt-4 px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors"
>
🗑️ 清除日志
</button>
</div>
{testResults.length > 0 && (
<div className="bg-gray-900 rounded-lg shadow-md p-6">
<h2 className="text-xl font-semibold text-green-400 mb-4">
📋 测试日志
</h2>
<div className="space-y-2 font-mono text-sm">
{testResults.map((result, index) => (
<div key={index} className="text-green-300">
{result}
</div>
))}
</div>
</div>
)}
<div className="mt-6 bg-yellow-50 border border-yellow-200 rounded-lg p-6">
<h3 className="text-lg font-semibold text-yellow-800 mb-2">
💡 如何验证错误是否成功发送到 GA4?
</h3>
<ol className="list-decimal list-inside space-y-2 text-yellow-700">
<li>点击上面的测试按钮</li>
<li>
打开{' '}
<a
href="https://analytics.google.com/"
target="_blank"
rel="noopener noreferrer"
className="underline font-semibold"
>
Google Analytics 后台
</a>
</li>
<li>导航到:报告 → 实时</li>
<li>在事件搜索框输入 <code className="bg-yellow-100 px-1">exception</code></li>
<li>你应该能在 30 秒内看到错误事件出现!</li>
</ol>
</div>
<div className="mt-6 bg-blue-50 border border-blue-200 rounded-lg p-6">
<h3 className="text-lg font-semibold text-blue-800 mb-2">
🔧 开发者工具调试
</h3>
<p className="text-blue-700 mb-2">
在开发模式下,打开浏览器控制台(F12),你会看到类似这样的日志:
</p>
<pre className="bg-blue-900 text-green-300 p-4 rounded-lg overflow-x-auto text-sm">
{`[GA4] Error tracked: {
description: "[javascript_error] 测试错误:这是一个故意的 JavaScript 错误",
fatal: "false",
url: "http://localhost:3000/test-error-tracking",
timestamp: "2025-01-15T10:30:00.000Z",
test_id: "test_js_error",
filename: "test-error-page.tsx",
lineno: 20
}`}
</pre>
</div>
</div>
</div>
);
}
+8 -159
View File
@@ -1,163 +1,12 @@
'use client'; import { Metadata } from 'next';
import TestErrorTrackingClient from './page-client';
import { useState } from 'react'; // QA 内部测试页:禁止搜索引擎收录(robots.txt 未屏蔽,需 metadata 层 noindex)
import { trackError } from '@/lib/analytics'; export const metadata: Metadata = {
title: '错误监控测试面板(内部)',
robots: { index: false, follow: false },
};
export default function TestErrorTrackingPage() { export default function TestErrorTrackingPage() {
const [testResults, setTestResults] = useState<string[]>([]); return <TestErrorTrackingClient />;
const addResult = (message: string) => {
setTestResults((prev) => [...prev, `[${new Date().toLocaleTimeString()}] ${message}`]);
};
const testJavaScriptError = () => {
try {
addResult('🧪 测试 1: 触发 JavaScript 运行时错误...');
throw new Error('测试错误:这是一个故意的 JavaScript 错误');
} catch (error) {
const errorMessage = error instanceof Error ? error.message : String(error);
trackError('javascript_error', errorMessage, false, {
test_id: 'test_js_error',
filename: 'test-error-page.tsx',
lineno: 20,
});
addResult('✅ JavaScript 错误已发送到 GA4');
}
};
const testPromiseRejection = () => {
addResult('🧪 测试 2: 触发 Promise 未捕获异常...');
Promise.reject(new Error('测试错误:Promise 故意拒绝'));
addResult('✅ Promise 异常已触发(由 GlobalErrorTracker 自动捕获)');
};
const testReactError = () => {
addResult('🧪 测试 3: 触发 React 渲染错误...');
trackError('react_error', '组件渲染失败:测试故意错误', true, {
component: 'TestComponent',
stack_trace: 'Error: 测试错误\n at TestComponent...',
});
addResult('✅ React 错误已发送到 GA4(标记为 fatal)');
};
const testNetworkError = () => {
addResult('🧪 测试 4: 模拟网络请求错误...');
trackError('network_error', 'Failed to fetch: https://api.example.com/data', false, {
url: 'https://api.example.com/data',
status_code: 0,
request_method: 'GET',
});
addResult('✅ 网络错误已发送到 GA4');
};
const clearResults = () => {
setTestResults([]);
};
return (
<div className="min-h-screen bg-gray-50 p-8">
<div className="max-w-4xl mx-auto">
<h1 className="text-3xl font-bold text-gray-900 mb-8">
🧪 GA4 错误监控测试面板
</h1>
<div className="bg-white rounded-lg shadow-md p-6 mb-6">
<h2 className="text-xl font-semibold text-gray-800 mb-4">
测试用例
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<button
onClick={testJavaScriptError}
className="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
>
📛 测试 JavaScript 错误
</button>
<button
onClick={testPromiseRejection}
className="px-6 py-3 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition-colors"
>
⚠️ 测试 Promise 异常
</button>
<button
onClick={testReactError}
className="px-6 py-3 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors"
>
💥 测试 React 致命错误
</button>
<button
onClick={testNetworkError}
className="px-6 py-3 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition-colors"
>
🌐 测试网络错误
</button>
</div>
<button
onClick={clearResults}
className="mt-4 px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors"
>
🗑️ 清除日志
</button>
</div>
{testResults.length > 0 && (
<div className="bg-gray-900 rounded-lg shadow-md p-6">
<h2 className="text-xl font-semibold text-green-400 mb-4">
📋 测试日志
</h2>
<div className="space-y-2 font-mono text-sm">
{testResults.map((result, index) => (
<div key={index} className="text-green-300">
{result}
</div>
))}
</div>
</div>
)}
<div className="mt-6 bg-yellow-50 border border-yellow-200 rounded-lg p-6">
<h3 className="text-lg font-semibold text-yellow-800 mb-2">
💡 如何验证错误是否成功发送到 GA4?
</h3>
<ol className="list-decimal list-inside space-y-2 text-yellow-700">
<li>点击上面的测试按钮</li>
<li>
打开{' '}
<a
href="https://analytics.google.com/"
target="_blank"
rel="noopener noreferrer"
className="underline font-semibold"
>
Google Analytics 后台
</a>
</li>
<li>导航到:报告 → 实时</li>
<li>在事件搜索框输入 <code className="bg-yellow-100 px-1">exception</code></li>
<li>你应该能在 30 秒内看到错误事件出现!</li>
</ol>
</div>
<div className="mt-6 bg-blue-50 border border-blue-200 rounded-lg p-6">
<h3 className="text-lg font-semibold text-blue-800 mb-2">
🔧 开发者工具调试
</h3>
<p className="text-blue-700 mb-2">
在开发模式下,打开浏览器控制台(F12),你会看到类似这样的日志:
</p>
<pre className="bg-blue-900 text-green-300 p-4 rounded-lg overflow-x-auto text-sm">
{`[GA4] Error tracked: {
description: "[javascript_error] 测试错误:这是一个故意的 JavaScript 错误",
fatal: "false",
url: "http://localhost:3000/test-error-tracking",
timestamp: "2025-01-15T10:30:00.000Z",
test_id: "test_js_error",
filename: "test-error-page.tsx",
lineno: 20
}`}
</pre>
</div>
</div>
</div>
);
} }
-145
View File
@@ -1,145 +0,0 @@
'use client';
import { motion } from 'framer-motion';
import { type LucideIcon } from 'lucide-react';
import type { ReactNode } from 'react';
interface BrandSealProps {
text?: string;
variant?: 'red' | 'gold' | 'blue';
size?: 'sm' | 'md' | 'lg';
}
export function BrandSeal({ text = '旗舰', variant = 'red', size = 'md' }: BrandSealProps) {
const sizes = {
sm: 'w-14 h-14 text-xs',
md: 'w-20 h-20 text-sm',
lg: 'w-28 h-28 text-base',
};
const colors = {
red: {
border: '#C41E3A',
bg: 'rgba(196, 30, 58, 0.06)',
text: '#C41E3A',
shadow: 'rgba(196, 30, 58, 0.2)',
},
gold: {
border: '#d97706',
bg: 'rgba(217, 119, 6, 0.06)',
text: '#d97706',
shadow: 'rgba(217, 119, 6, 0.2)',
},
blue: {
border: '#2563eb',
bg: 'rgba(37, 99, 235, 0.06)',
text: '#2563eb',
shadow: 'rgba(37, 99, 235, 0.2)',
},
};
const color = colors[variant];
return (
<motion.div
initial={{ opacity: 0, scale: 0.5, rotate: -15 }}
whileInView={{ opacity: 1, scale: 1, rotate: -12 }}
viewport={{ once: true }}
transition={{
duration: 0.8,
delay: 0.5,
ease: [0.34, 1.56, 0.64, 1] as const,
}}
className={`relative ${sizes[size]} flex items-center justify-center rounded-lg border-2 font-bold select-none`}
style={{
borderColor: color.border,
backgroundColor: color.bg,
color: color.text,
boxShadow: `0 4px 16px ${color.shadow}`,
fontFamily: "'Noto Serif SC', serif",
}}
>
<div className="absolute inset-[4px] border border-current opacity-20 rounded-md" />
<span
className="relative z-10 tracking-widest"
style={{ writingMode: 'vertical-rl' }}
>
{text}
</span>
<div
className="absolute inset-0 rounded-lg opacity-0 hover:opacity-100 transition-opacity duration-500"
style={{
background: `conic-gradient(from 0deg, transparent 0%, ${color.border}10 50%, transparent 100%)`,
animation: 'rotate 8s linear infinite',
}}
/>
</motion.div>
);
}
interface CalligraphyTextProps {
children: ReactNode;
className?: string;
as?: 'h1' | 'h2' | 'h3' | 'span';
}
export function CalligraphyText({
children,
className = '',
as: Tag = 'span',
}: CalligraphyTextProps) {
return (
<Tag
className={`font-calligraphy ${className}`}
style={{
fontFamily: "'Noto Serif SC', 'STKaiti', 'KaiTi', serif",
fontWeight: 700,
}}
>
{children}
</Tag>
);
}
interface SectionHeaderProps {
badge?: string;
title: ReactNode;
subtitle?: string;
align?: 'left' | 'center';
icon?: LucideIcon;
}
export function SectionHeader({
badge,
title,
subtitle,
align = 'center',
icon: Icon,
}: SectionHeaderProps) {
return (
<motion.div
initial={{ opacity: 0, y: 28 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: '-80px' }}
transition={{ duration: 0.75, ease: [0.22, 1, 0.36, 1] as const }}
className={`mb-16 ${align === 'center' ? 'text-center max-w-3xl mx-auto' : ''}`}
>
{(badge || Icon) && (
<div className={`inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-red-50 text-brand text-sm font-bold tracking-wider uppercase mb-5 ${
align === 'center' ? '' : ''
}`}>
{Icon && <Icon className="w-4 h-4" />}
{badge}
</div>
)}
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight text-gray-900 mb-4">
{title}
</h2>
{subtitle && (
<p className="text-lg text-gray-600 leading-relaxed">{subtitle}</p>
)}
</motion.div>
);
}
@@ -1,106 +0,0 @@
'use client';
import { motion } from 'framer-motion';
import { ArrowRight, Package, Lightbulb, Wrench } from 'lucide-react';
import type { CrossReference } from '@/lib/constants/cross-references';
interface CrossRecommendGridProps {
items: CrossReference[];
title?: string;
}
const typeConfig = {
product: {
icon: Package,
label: '产品',
color: '#3b82f6',
bg: '#eff6ff',
},
solution: {
icon: Lightbulb,
label: '方案',
color: '#C41E3A',
bg: '#FEF2F4',
},
service: {
icon: Wrench,
label: '服务',
color: '#7c3aed',
bg: '#f5f3ff',
},
};
export function CrossRecommendGrid({ items, title = '相关推荐' }: CrossRecommendGridProps) {
if (items.length === 0) return null;
return (
<section className="bg-bg-secondary py-16 sm:py-20 md:py-28">
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
<motion.div
initial={{ opacity: 0, y: 24 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
className="mb-12"
>
<div className="flex items-center gap-3 mb-6">
<div className="w-10 h-px bg-brand" />
<span className="text-[13px] tracking-[0.12em] font-semibold text-brand">
{title}
</span>
</div>
<h2 className="text-2xl sm:text-3xl md:text-4xl font-black text-ink tracking-tight leading-[0.95]">
探索更多可能
</h2>
<p className="text-text-secondary mt-3">
发现与您需求相关的产品、方案和服务
</p>
</motion.div>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
{items.map((item, index) => {
const config = typeConfig[item.type];
const Icon = config.icon;
return (
<motion.a
key={item.id}
href={item.href}
initial={{ opacity: 0, y: 16 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.4, delay: index * 0.08 }}
className="bain-card flex items-start gap-4 p-5 group"
>
<div
className="flex h-10 w-10 shrink-0 items-center justify-center"
style={{ backgroundColor: config.bg, color: config.color }}
>
<Icon className="h-5 w-5" />
</div>
<div className="min-w-0 flex-1">
<div className="mb-1 flex items-center gap-2">
<span
className="rounded-full px-2 py-0.5 text-xs font-medium"
style={{
color: config.color,
backgroundColor: `${config.color}15`,
}}
>
{config.label}
</span>
<ArrowRight className="h-3 w-3 text-text-muted opacity-0 transition-opacity group-hover:opacity-100" />
</div>
<h3 className="text-sm font-semibold text-ink">{item.title}</h3>
<p className="mt-1 text-xs leading-relaxed text-text-muted">
{item.reason}
</p>
</div>
</motion.a>
);
})}
</div>
</div>
</section>
);
}
+1 -61
View File
@@ -261,12 +261,6 @@ const mockProduct = {
], ],
}; };
const mockCrossRefItems = [
{ id: 's1', title: '智能制造方案', type: 'solution' as const, href: '/solutions/s1', reason: 'ERP 是核心组件' },
{ id: 'p2', title: 'CRM 系统', type: 'product' as const, href: '/products/crm', reason: '常与 ERP 一起使用' },
{ id: 'sv1', title: '软件定制开发', type: 'service' as const, href: '/services/sv1', reason: '配套服务' },
];
// ─── Tests ─────────────────────────────────────────────────────────────── // ─── Tests ───────────────────────────────────────────────────────────────
describe('DetailHero', () => { describe('DetailHero', () => {
@@ -573,58 +567,4 @@ describe('DetailCTASection', () => {
}); });
}); });
describe('CrossRecommendGrid', () => { // 注:CrossRecommendGrid 相关测试已随组件删除(2026-08-31,组件生产 0 引用)
it('should render nothing when items is empty', async () => {
const { CrossRecommendGrid } = await import('./detail-cross-recommend');
const { container } = render(<CrossRecommendGrid items={[]} />);
expect(container.innerHTML).toBe('');
});
it('should render default title', async () => {
const { CrossRecommendGrid } = await import('./detail-cross-recommend');
render(<CrossRecommendGrid items={mockCrossRefItems} />);
expect(screen.getByText('相关推荐')).toBeInTheDocument();
});
it('should render custom title', async () => {
const { CrossRecommendGrid } = await import('./detail-cross-recommend');
render(<CrossRecommendGrid items={mockCrossRefItems} title="更多推荐" />);
expect(screen.getByText('更多推荐')).toBeInTheDocument();
});
it('should render all items', async () => {
const { CrossRecommendGrid } = await import('./detail-cross-recommend');
render(<CrossRecommendGrid items={mockCrossRefItems} />);
expect(screen.getByText('智能制造方案')).toBeInTheDocument();
expect(screen.getByText('CRM 系统')).toBeInTheDocument();
expect(screen.getByText('软件定制开发')).toBeInTheDocument();
});
it('should render reason for each item', async () => {
const { CrossRecommendGrid } = await import('./detail-cross-recommend');
render(<CrossRecommendGrid items={mockCrossRefItems} />);
expect(screen.getByText('ERP 是核心组件')).toBeInTheDocument();
expect(screen.getByText('常与 ERP 一起使用')).toBeInTheDocument();
expect(screen.getByText('配套服务')).toBeInTheDocument();
});
it('should render correct type labels', async () => {
const { CrossRecommendGrid } = await import('./detail-cross-recommend');
render(<CrossRecommendGrid items={mockCrossRefItems} />);
// Type labels: product=产品, solution=方案, service=服务
expect(screen.getByText('产品')).toBeInTheDocument();
// There might be multiple "方案" texts in the page, so use getAllByText
const solutionLabels = screen.getAllByText('方案');
expect(solutionLabels.length).toBeGreaterThanOrEqual(1);
expect(screen.getByText('服务')).toBeInTheDocument();
});
it('should render links for items', async () => {
const { CrossRecommendGrid } = await import('./detail-cross-recommend');
render(<CrossRecommendGrid items={mockCrossRefItems} />);
const solutionLink = screen.getByText('智能制造方案').closest('a');
expect(solutionLink).toHaveAttribute('href', '/solutions/s1');
const productLink = screen.getByText('CRM 系统').closest('a');
expect(productLink).toHaveAttribute('href', '/products/crm');
});
});
+2 -2
View File
@@ -8,7 +8,6 @@ export { DetailCTASection } from './detail-cta-section';
export { CaseStudyCard } from './detail-case-study'; export { CaseStudyCard } from './detail-case-study';
export { CertificationList } from './detail-certification'; export { CertificationList } from './detail-certification';
export { CrossRecommendGrid } from './detail-cross-recommend';
export { SolutionValueSection } from './solution-value'; export { SolutionValueSection } from './solution-value';
export { ServiceValueSection } from './service-value'; export { ServiceValueSection } from './service-value';
@@ -19,4 +18,5 @@ export { SolutionCard } from './solution-service-card';
export { TiltCard, PressableButton, HoverLink } from './micro-interactions'; export { TiltCard, PressableButton, HoverLink } from './micro-interactions';
export { BrandSeal, CalligraphyText, SectionHeader } from './brand-elements'; // 注:brand-elements.tsx(BrandSeal/CalligraphyText/SectionHeader)与
// detail-cross-recommend.tsx(CrossRecommendGrid)此前 0 消费者,已于 2026-08-31 删除。
+1
View File
@@ -36,6 +36,7 @@ export function ProductCard({ product }: ProductCardProps) {
src={product.image} src={product.image}
alt={product.title} alt={product.title}
fill fill
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
className="object-cover group-hover:scale-105 transition-transform duration-500" className="object-cover group-hover:scale-105 transition-transform duration-500"
/> />
+5 -8
View File
@@ -48,14 +48,11 @@ export function CaseCard({
> >
{/* Background image */} {/* Background image */}
{image && ( {image && (
<div className="absolute inset-0 transition-opacity duration-500 opacity-[0.02] group-hover:opacity-[0.05]"> <div
<img aria-hidden="true"
src={image} style={{ backgroundImage: `url(${image})` }}
alt="" className="absolute inset-0 bg-cover bg-center transition-opacity duration-500 opacity-[0.02] group-hover:opacity-[0.05]"
className="w-full h-full object-cover" />
loading="lazy"
/>
</div>
)} )}
<div className="relative z-10 flex flex-col flex-1"> <div className="relative z-10 flex flex-col flex-1">
+6 -5
View File
@@ -3,6 +3,7 @@
import { motion, useScroll, useTransform } from 'framer-motion'; import { motion, useScroll, useTransform } from 'framer-motion';
import { useRef, useState, useEffect } from 'react'; import { useRef, useState, useEffect } from 'react';
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal'; import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
import { StaticLink } from '@/components/ui/static-link';
import { SectionHeader } from '@/components/sections/section-header'; import { SectionHeader } from '@/components/sections/section-header';
import { ServiceCard } from '@/components/sections/service-card'; import { ServiceCard } from '@/components/sections/service-card';
import { ScrollProgress } from '@/components/ui/scroll-progress'; import { ScrollProgress } from '@/components/ui/scroll-progress';
@@ -175,10 +176,10 @@ function CaseDetailHero({ data }: CaseDetailHeroProps) {
transition={{ duration: 0.8, delay: 0.8, ease: EASE }} transition={{ duration: 0.8, delay: 0.8, ease: EASE }}
> >
<Button size="lg" asChild> <Button size="lg" asChild>
<a href="/contact"> <StaticLink href="/contact">
咨询类似方案 咨询类似方案
<ArrowRight className="w-4 h-4 ml-2" /> <ArrowRight className="w-4 h-4 ml-2" />
</a> </StaticLink>
</Button> </Button>
<Button size="lg" variant="outline" asChild> <Button size="lg" variant="outline" asChild>
<a href="#solution">查看方案</a> <a href="#solution">查看方案</a>
@@ -512,13 +513,13 @@ function CTASection() {
</p> </p>
<div className="flex flex-col sm:flex-row justify-center gap-4"> <div className="flex flex-col sm:flex-row justify-center gap-4">
<Button size="lg" asChild> <Button size="lg" asChild>
<a href="/contact"> <StaticLink href="/contact">
免费咨询 免费咨询
<ArrowRight className="w-4 h-4 ml-2" /> <ArrowRight className="w-4 h-4 ml-2" />
</a> </StaticLink>
</Button> </Button>
<Button size="lg" variant="outline" asChild> <Button size="lg" variant="outline" asChild>
<a href="/cases">查看更多案例</a> <StaticLink href="/cases">查看更多案例</StaticLink>
</Button> </Button>
</div> </div>
</ScrollReveal> </ScrollReveal>
+4 -5
View File
@@ -38,11 +38,10 @@ export function InsightCard({
> >
{/* Background image */} {/* Background image */}
{image && ( {image && (
<img <div
src={image} aria-hidden="true"
alt="" style={{ backgroundImage: `url(${image})` }}
className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 opacity-10" className="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-105 opacity-10"
loading="lazy"
/> />
)} )}
+1 -1
View File
@@ -174,7 +174,7 @@ export function WhyUsSection() {
{tech.abbr} {tech.abbr}
</span> </span>
</div> </div>
<span className="text-[10px] text-[var(--color-text-hint)]">{tech.name}</span> <span className="text-[10px] text-[var(--color-text-muted)]">{tech.name}</span>
</div> </div>
))} ))}
</div> </div>
+2 -2
View File
@@ -35,8 +35,8 @@ const defaultConfig = {
const statusConfig = { const statusConfig = {
'研发中': { bg: 'rgba(var(--color-brand-rgb), 0.06)', text: 'var(--color-brand)', border: 'rgba(var(--color-brand-rgb), 0.12)' }, '研发中': { bg: 'rgba(var(--color-brand-rgb), 0.06)', text: 'var(--color-brand)', border: 'rgba(var(--color-brand-rgb), 0.12)' },
'内测中': { bg: 'rgba(var(--color-warning-rgb), 0.06)', text: 'var(--color-warning)', border: 'rgba(var(--color-warning-rgb), 0.12)' }, '内测中': { bg: 'rgba(var(--color-warning-rgb), 0.06)', text: 'var(--color-warning-text)', border: 'rgba(var(--color-warning-rgb), 0.12)' },
'已发布': { bg: 'rgba(var(--color-success-rgb), 0.06)', text: 'var(--color-success)', border: 'rgba(var(--color-success-rgb), 0.12)' }, '已发布': { bg: 'rgba(var(--color-success-rgb), 0.06)', text: 'var(--color-success-text)', border: 'rgba(var(--color-success-rgb), 0.12)' },
} as const; } as const;
export function ProductCard({ title, description, href, index, status }: ProductCardProps) { export function ProductCard({ title, description, href, index, status }: ProductCardProps) {