refactor(detail): 合并 L3 客户案例/资质认证区块为共享组件

- 新建 CaseStudiesSection / CertificationsSection 共享组件（src/components/detail），合并 solution/product 逐字重复的本地实现与 service 的异类实现（卡片 motion.a 链 /cases/<slug> 依赖尚不存在数据 → 404，违反零编造） - bg-white → bg-bg-primary token 化（浅色零视觉差异，深色模式正确反色，对齐暗黑 Phase 2） - 数据闸门保留：caseStudies/certifications 空时 return null，由 L3EmptyFallback 接管 - grid/flex 类直接挂 StaggerReveal，修复合并前的单列布局 bug - 动效 0.8s → 0.7s（detail-cta-section + service CTASection），对齐 ≤700ms 约束 - 附 scripts/audit/l3-b2-verify.mjs 运行时冒烟（product 页浅深双版，0 报错，hydration 通过）验证：type-check 0 错 / lint 0 错(127 既有 warnings) / 单测 129 套件 1628 通过
2026-09-02 12:51:03 +08:00
parent 3091035c56
commit 10160fb7f2
8 changed files with 280 additions and 311 deletions
@@ -6,7 +6,7 @@ import { CTAButton } from '@/components/ui/cta-button';
 import { 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 { Product } from '@/lib/constants/products';
-import { L3EmptyFallback } from '@/components/detail';
+import { L3EmptyFallback, CaseStudiesSection, CertificationsSection } from '@/components/detail';

 const INDUSTRY_ICONS: Record<string, React.ReactNode> = {
  制造业: <Factory className="w-8 h-8" />,
@@ -338,128 +338,9 @@ interface CTASectionProps {
  solution: Solution;
 }

-// ===== L3 信任层：客户案例（有数据才渲染，无数据不显示，不虚构）=====
-interface CaseStudiesSectionProps {
-  caseStudies: Solution['caseStudies'];
-}
-
-function CaseStudiesSection({ caseStudies }: CaseStudiesSectionProps) {
-  if (!caseStudies || caseStudies.length === 0) return null;
-
-  return (
-    <section className="relative py-20 sm:py-28 md:py-32 lg:py-40 overflow-hidden bg-white">
-      <div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
-      <div className="absolute bottom-0 left-0 right-0 h-px bg-border-primary" />
-
-      <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
-        <ScrollReveal className="text-center max-w-3xl mx-auto mb-16 sm:mb-20 md:mb-20">
-          <SectionLabel className="justify-center">
-            <div className="flex items-center gap-5">
-              <div className="w-14 h-px bg-brand" />
-              <span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
-                客户案例
-              </span>
-              <div className="w-14 h-px bg-brand" />
-            </div>
-          </SectionLabel>
-          <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight">
-            同行业落地案例
-          </h2>
-        </ScrollReveal>
-
-        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-border-primary">
-          <StaggerReveal staggerDelay={0.1} delayChildren={0.05}>
-            {caseStudies.map((study) => (
-              <div
-                key={study.client}
-                className="group relative block overflow-hidden bg-white transition-all duration-500 hover:bg-bg-secondary"
-              >
-                <div className="aspect-[4/3] bg-gradient-to-br from-bg-secondary to-bg-tertiary relative overflow-hidden">
-                  <div className="absolute inset-0 flex items-center justify-center">
-                    {/* 客户名首字作占位图形（无真实配图时），纯装饰 → aria-hidden 豁免对比度 */}
-                    <span aria-hidden="true" className="text-6xl font-bold text-text-muted/10">
-                      {study.client.charAt(0)}
-                    </span>
-                  </div>
-                  <div className="absolute top-5 left-5">
-                    <span className="px-3 py-1.5 text-xs font-bold text-brand bg-brand-soft/80 backdrop-blur-sm">
-                      {study.industry}
-                    </span>
-                  </div>
-                </div>
-
-                <div className="p-8">
-                  <h3 className="text-xl font-bold text-ink mb-3 group-hover:translate-x-2 transition-transform duration-500">
-                    {study.client}
-                  </h3>
-                  <p className="text-text-secondary text-sm leading-relaxed mb-6">
-                    {study.challenge}
-                  </p>
-                  <div className="pt-6 border-t border-border-primary">
-                    <div className="text-2xl font-bold text-brand mb-1">{study.result}</div>
-                    <div className="text-xs text-text-muted">核心成果</div>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </StaggerReveal>
-        </div>
-      </div>
-    </section>
-  );
-}
-
-// ===== L3 信任层：资质认证（有数据才渲染，无数据不显示）=====
-interface CertificationsSectionProps {
-  certifications: Solution['certifications'];
-}
-
-function CertificationsSection({ certifications }: CertificationsSectionProps) {
-  if (!certifications || certifications.length === 0) return null;
-
-  return (
-    <section className="relative py-16 sm:py-20 md:py-24 lg:py-32 overflow-hidden bg-bg-secondary">
-      <div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
-      <div className="absolute bottom-0 left-0 right-0 h-px bg-border-primary" />
-
-      <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
-        <ScrollReveal className="text-center max-w-3xl mx-auto mb-16">
-          <SectionLabel className="justify-center">
-            <div className="flex items-center gap-5">
-              <div className="w-14 h-px bg-brand" />
-              <span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
-                资质认证
-              </span>
-              <div className="w-14 h-px bg-brand" />
-            </div>
-          </SectionLabel>
-          <h2 className="text-2xl md:text-3xl font-bold text-ink tracking-tight">
-            资质认证
-          </h2>
-        </ScrollReveal>
-
-        <div className="flex flex-wrap justify-center gap-px bg-border-primary">
-          <StaggerReveal staggerDelay={0.08} delayChildren={0.05}>
-            {certifications.map((cert, idx) => (
-              <div
-                key={idx}
-                className="group flex items-center gap-4 px-8 py-5 bg-white hover:bg-bg-secondary transition-all duration-500"
-              >
-                <div className="w-12 h-12 rounded-xl bg-brand-soft flex items-center justify-center text-brand">
-                  <Shield className="w-6 h-6" />
-                </div>
-                <div>
-                  <div className="text-ink font-bold">{cert.name}</div>
-                  <div className="text-sm text-text-muted">{cert.issuer}</div>
-                </div>
-              </div>
-            ))}
-          </StaggerReveal>
-        </div>
-      </div>
-    </section>
-  );
-}
+// ===== L3 信任层：客户案例 / 资质认证已合并至共享组件（@/components/detail）=====
+// 原本地 CaseStudiesSection / CertificationsSection 与 product 页逐字重复 ~95%，
+// B-2（commit 见 git log）统一为共享组件；heading 由 prop 传入以保留原文案。

 function CTASection({ solution }: CTASectionProps) {
  return (
@@ -516,7 +397,7 @@ export default function SolutionDetailContentV3({ solution, products = [] }: Sol
      <ValuePropositionSection valueProposition={solution.valueProposition} />
      <SuiteCombinationSection suiteCombination={solution.suiteCombination} products={products} />
      <L3EmptyFallback caseStudies={solution.caseStudies} certifications={solution.certifications} />
-      <CaseStudiesSection caseStudies={solution.caseStudies} />
+      <CaseStudiesSection caseStudies={solution.caseStudies} heading="同行业落地案例" />
      <CertificationsSection certifications={solution.certifications} />
      <CTASection solution={solution} />
    </main>