refactor(link): 营销页站内链接统一 StaticLink（静态托管适配）+ 删除 0 引用死代码组件 + QA 页 client/server 拆分

src/components/detail/brand-elements.tsx

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

src/components/detail/detail-cross-recommend.tsx

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

src/components/detail/detail.test.tsx

@@ -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 ───────────────────────────────────────────────────────────────
 
 describe('DetailHero', () => {
@@ -573,58 +567,4 @@ describe('DetailCTASection', () => {
   });
 });
 
-describe('CrossRecommendGrid', () => {
-  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');
-  });
-});
+// 注：CrossRecommendGrid 相关测试已随组件删除（2026-08-31，组件生产 0 引用）

src/components/detail/index.ts

@@ -8,7 +8,6 @@ export { DetailCTASection } from './detail-cta-section';
 
 export { CaseStudyCard } from './detail-case-study';
 export { CertificationList } from './detail-certification';
-export { CrossRecommendGrid } from './detail-cross-recommend';
 
 export { SolutionValueSection } from './solution-value';
 export { ServiceValueSection } from './service-value';
@@ -19,4 +18,5 @@ export { SolutionCard } from './solution-service-card';
 
 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 删除。

src/components/detail/product-card.tsx

@@ -36,6 +36,7 @@ export function ProductCard({ product }: ProductCardProps) {
               src={product.image}
               alt={product.title}
               fill
+              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
               className="object-cover group-hover:scale-105 transition-transform duration-500"
             />