Files

T

- CONTEXT.md添加9项新决策(HSI架构/水墨雅致/L3策略等)
- ADR: HSI架构与四层叙事模型决策记录
- 实施计划: IHG设计对齐详细任务分解

2026-06-07 16:21:29 +08:00

36 KiB

Raw Blame History

V3设计系统全量应用实施计划

面向 AI 代理的工作者： 必需子技能：使用 superpowers:subagent-driven-development（推荐）或 superpowers:executing-plans 逐任务实现此计划。步骤使用复选框（- [ ]）语法来跟踪进度。

目标： 将ERP V3深度精细化设计系统（L1-L5全层次）应用到网站所有17个详情页和列表页，实现统一的现代东方美学视觉体验。

架构： 基于已完成的ERP V3原型，采用组件化升级策略：

V3核心组件库：DetailHeroV3、ProductValueSectionV3、DetailTrustSectionV2、DetailCTASectionV2
微交互系统：TiltCard、PressableButton、InkGlowCard
品牌印记系统：BrandSeal、CalligraphyText、InkDivider
分阶段推进：先建通用组件 → 再批量升级页面 → 最后统一验证

技术栈： Next.js 14 App Router + TypeScript + Framer Motion + Tailwind CSS + Lucide Icons

📋 页面清单与优先级

✅ 已完成（标杆页面）

ERP产品页 V3原型 (/products/erp-upgrade-v3)

📦 待升级页面（17个）

产品详情页（5个）

产品ID	标题	当前路径	HeroTheme
crm	睿新客户关系管理系统	`/products/crm`	crm
cms	睿新内容管理系统	`/products/cms`	cms
bi	睿新商业智能平台	`/products/bi`	bi
sds	睿新供应链决策支持系统	`/products/sds`	sds
oa	睿新协同办公系统	`/products/oa`	oa

解决方案详情页（4个）

方案ID	标题	当前路径
manufacturing	智能制造解决方案	`/solutions/manufacturing`
retail	零售数字化解决方案	`/solutions/retail`
finance	金融科技解决方案	`/solutions/finance`
government	政务数字化转型	`/solutions/government`

服务详情页（4个）

服务ID	标题	当前路径
software	软件开发	`/services/software`
consulting	数字化转型咨询	`/services/consulting`
data-intelligence	数据智能服务	`/services/data-intelligence`
technical-support	技术支持服务	`/services/technical-support`

列表页（3个）

页面	路径	说明
产品列表页	`/products`	展示6个产品卡片
解决方案列表页	`/solutions`	展示4个方案卡片
服务列表页	`/services`	展示4个服务卡片

📁 文件结构总览

新增文件

src/components/detail-v2/
├── solution-value-v3.tsx              # 解决方案价值支撑V3组件
├── service-value-v3.tsx               # 服务价值支撑V3组件
├── list-page-hero-v3.tsx              # 列表页Hero V3组件
├── product-card-v3.tsx                # 产品卡片V3组件
├── solution-card-v3.tsx               # 方案卡片V3组件
└── service-card-v3.tsx                # 服务卡片V3组件

src/app/(marketing)/
├── products/[id]/page.tsx             # 修改：产品详情页主文件
├── solutions/[id]/client.tsx          # 修改：解决方案详情客户端组件
├── services/[id]/client.tsx           # 修改：服务详情客户端组件
├── products/page.tsx                  # 修改：产品列表页
├── solutions/page.tsx                 # 修改：解决方案列表页
└── services/page.tsx                  # 修改：服务列表页

已有V3组件（复用）

src/components/detail-v2/
├── detail-hero-v3.tsx                 # Hero区域V3（L2+L3+L5）
├── detail-product-value-v3.tsx        # 产品价值V3（L4）
├── detail-trust-section-v2.tsx        # 信任证明V2（可复用）
├── detail-cta-section-v2.tsx          # CTA转化V2（可复用）
├── micro-interactions.tsx             # 微交互组件库（L1）
└── brand-elements.tsx                 # 品牌印记组件（L5）

🚀 Phase 0: 基础设施准备（已完成）

✅ 已完成的V3核心资产

detail-hero-v3.tsx - Hero V3组件（视差滚动 + 浮动粒子 + 序列动画）
detail-product-value-v3.tsx - 产品价值V3（标签化 + 数据可视化）
micro-interactions.tsx - 微交互组件（TiltCard/PressableButton/InkGlowCard）
brand-elements.tsx - 品牌印记（BrandSeal/CalligraphyText/InkDivider）
design-system.ts - 设计系统变量
TypeScript编译通过（0错误）

🚀 Phase 1: 创建解决方案V3组件

任务 1.1: 创建 SolutionValueSectionV3 组件

文件：

创建：src/components/detail-v2/solution-value-v3.tsx

目标： 为解决方案详情页创建符合V3标准的的价值支撑区域组件

步骤 1: 创建基础组件结构

'use client';

import { motion, useInView } from 'framer-motion';
import { useRef } from 'react';
import {
  CheckCircle2,
  ArrowRight,
  Lightbulb,
  Target,
  TrendingUp,
  type LucideIcon,
} from 'lucide-react';
import { TiltCard, InkGlowCard } from './micro-interactions';
import { SectionHeader, InkDivider } from './brand-elements';
import type { Solution } from '@/lib/constants/solutions';

interface SolutionValueSectionV3Props {
  solution: Solution;
}

export function SolutionValueSectionV3({ solution }: SolutionValueSectionV3Props) {
  return (
    <section className="relative bg-white py-24 lg:py-32 overflow-hidden">
      <div className="absolute inset-0 bg-gradient-to-b from-slate-50/80 via-transparent to-slate-50/50" />

      <div className="container mx-auto px-4 relative max-w-7xl">
        {/* 内容将在后续步骤中填充 */}
      </div>
    </section>
  );
}

步骤 2: 添加章节标题区域

在 <div className="container mx-auto px-4 relative max-w-7xl"> 内部添加：

<SectionHeader
  badge="解决方案"
  title={
    <>
      为<span className="text-[#C41E3A]">{solution.industry}</span>量身定制
    </>
  }
  subtitle={solution.description}
  icon={Lightbulb}
/>

步骤 3: 添加挑战-解决方案对比区块

<div className="grid grid-cols-1 lg:grid-cols-2 gap-10 mt-16">
  {/* 左侧：行业挑战 */}
  <motion.div
    initial={{ opacity: 0, x: -30 }}
    whileInView={{ opacity: 1, x: 0 }}
    viewport={{ once: true, margin: '-80px' }}
    transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] as const }}
  >
    <div className="bg-gradient-to-br from-red-50 to-orange-50/30 rounded-2xl p-8 border border-red-100">
      <h3 className="text-xl font-bold text-gray-900 mb-6 flex items-center gap-3">
        <span className="w-10 h-10 rounded-xl bg-[#C41E3A] flex items-center justify-center">
          <Target className="w-5 h-5 text-white" />
        </span>
        行业痛点挑战
      </h3>

      <ul className="space-y-4">
        {solution.challenges.map((challenge, index) => (
          <motion.li
            key={index}
            initial={{ opacity: 0, y: 15 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{
              delay: index * 0.08,
              duration: 0.45,
              ease: [0.22, 1, 0.36, 1] as const,
            }}
            className="flex items-start gap-3 text-gray-700"
          >
            <span className="w-1.5 h-1.5 rounded-full bg-[#C41E3A] mt-2 shrink-0" />
            <span className="text-sm leading-relaxed">{challenge}</span>
          </motion.li>
        ))}
      </ul>
    </div>
  </motion.div>

  {/* 右侧：我们的解决方案 */}
  <motion.div
    initial={{ opacity: 0, x: 30 }}
    whileInView={{ opacity: 1, x: 0 }}
    viewport={{ once: true, margin: '-80px' }}
    transition={{ duration: 0.7, delay: 0.15, ease: [0.22, 1, 0.36, 1] as const }}
  >
    <div className="bg-gradient-to-br from-blue-50 to-indigo-50/30 rounded-2xl p-8 border border-blue-100">
      <h3 className="text-xl font-bold text-gray-900 mb-6 flex items-center gap-3">
        <span className="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center">
          <Lightbulb className="w-5 h-5 text-white" />
        </span>
        Novalon解决方案
      </h3>

      <ul className="space-y-4">
        {solution.solutions.map((solutionItem, index) => (
          <motion.li
            key={index}
            initial={{ opacity: 0, y: 15 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{
              delay: 0.25 + index * 0.08,
              duration: 0.45,
              ease: [0.22, 1, 0.36, 1] as const,
            }}
            className="flex items-start gap-3 text-gray-700"
          >
            <CheckCircle2 className="w-4.5 h-4.5 text-blue-600 mt-0.5 shrink-0" />
            <span className="text-sm leading-relaxed">{solutionItem}</span>
          </motion.li>
        ))}
      </ul>
    </div>
  </motion.div>
</div>

步骤 4: 添加价值主张区块

{solution.valueProposition && (
  <motion.div
    initial={{ opacity: 0, y: 32 }}
    whileInView={{ opacity: 1, y: 0 }}
    viewport={{ once: true, margin: '-80px' }}
    transition={{ duration: 0.75, delay: 0.3 }}
    className="mt-20"
  >
    <InkDivider variant="decorative" />

    <div className="text-center mb-12">
      <h3 className="text-2xl md:text-3xl font-bold tracking-tight text-gray-900">
        {solution.valueProposition.headline}
      </h3>
    </div>

    <div className="grid grid-cols-1 md:grid-cols-3 gap-7">
      {solution.valueProposition.points.map((point, index) => (
        <TiltCard key={index} tiltAmount={6} className="p-7 rounded-2xl bg-white border border-gray-100 hover:border-blue-200 shadow-sm hover:shadow-lg transition-shadow">
          <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center mb-5 shadow-lg shadow-blue-500/20">
            <TrendingUp className="w-7 h-7 text-white" />
          </div>
          <h4 className="text-lg font-bold text-gray-900 mb-2">{point.title}</h4>
          <p className="text-sm text-gray-600 leading-relaxed">{point.description}</p>
        </TiltCard>
      ))}
    </div>
  </motion.div>
)}

步骤 5: 添加套装组合展示区块

{solution.suiteCombination && (
  <motion.div
    initial={{ opacity: 0, y: 32 }}
    whileInView={{ opacity: 1, y: 0 }}
    viewport={{ once: true, margin: '-80px' }}
    transition={{ duration: 0.75, delay: 0.4 }}
    className="mt-20"
  >
    <InkDivider variant="subtle" />

    <div className="bg-gradient-to-br from-slate-50 to-gray-100/50 rounded-2xl p-10 border border-gray-200/80">
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
        {/* 主要产品组合 */}
        <div>
          <h4 className="text-lg font-bold text-gray-900 mb-5 flex items-center gap-2.5">
            <span className="w-8 h-8 rounded-lg bg-[#C41E3A] flex items-center justify-center">
              <span className="text-white text-xs font-bold">核</span>
            </span>
            核心产品组合
          </h4>
          <div className="flex flex-wrap gap-3">
            {solution.suiteCombination.primaryProducts.map((product, index) => (
              <motion.span
                key={product}
                initial={{ opacity: 0, scale: 0.9 }}
                whileInView={{ opacity: 1, scale: 1 }}
                viewport={{ once: true }}
                transition={{ delay: 0.5 + index * 0.06, duration: 0.35 }}
                className="px-5 py-2.5 bg-gradient-to-r from-red-50 to-red-100/60 text-[#C41E3A] text-sm font-semibold rounded-xl border border-red-200"
              >
                {product}
              </motion.span>
            ))}
          </div>
        </div>

        {/* 配套服务 */}
        <div>
          <h4 className="text-lg font-bold text-gray-900 mb-5 flex items-center gap-2.5">
            <span className="w-8 h-8 rounded-lg bg-blue-600 flex items-center justify-center">
              <span className="text-white text-xs font-bold">配</span>
            </span>
            配套专业服务
          </h4>
          <div className="flex flex-wrap gap-3">
            {solution.suiteCombination.complementaryServices.map((service, index) => (
              <motion.span
                key={service}
                initial={{ opacity: 0, scale: 0.9 }}
                whileInView={{ opacity: 1, scale: 1 }}
                viewport={{ once: true }}
                transition={{ delay: 0.65 + index * 0.06, duration: 0.35 }}
                className="px-5 py-2.5 bg-gradient-to-r from-blue-50 to-blue-100/60 text-blue-700 text-sm font-semibold rounded-xl border border-blue-200"
              >
                {service}
              </motion.span>
            ))}
          </div>
        </div>
      </div>

      {/* 组合理由 */}
      <motion.p
        initial={{ opacity: 0 }}
        whileInView={{ opacity: 1 }}
        viewport={{ once: true }}
        transition={{ delay: 0.85, duration: 0.55 }}
        className="mt-8 p-5 bg-white/70 rounded-xl text-sm text-gray-600 leading-relaxed border border-gray-100"
      >
        💡 <strong className="text-gray-800">组合逻辑：</strong>{solution.suiteCombination.rationale}
      </motion.p>
    </div>
  </motion.div>
)}

步骤 6: 运行TypeScript编译检查

运行命令：

npx tsc --noEmit 2>&1 | grep -E "error TS" | wc -l

预期输出：0（无错误）

步骤 7: 在浏览器中预览

访问：http://localhost:3002/products/erp-upgrade-v3 预期：组件编译成功，可在其他页面中使用

🚀 Phase 2: 创建服务V3组件

任务 2.1: 创建 ServiceValueSectionV3 组件

文件：

创建：src/components/detail-v2/service-value-v3.tsx

目标： 为服务详情页创建符合V3标准的价值支撑区域组件

步骤 1: 创建基础组件结构

'use client';

import { motion, useInView } from 'framer-motion';
import { useRef, useState } from 'react';
import {
  CheckCircle2,
  ArrowRight,
  Zap,
  Clock,
  Users,
  Award,
  TrendingUp,
  type LucideIcon,
} from 'lucide-react';
import { TiltCard, InkGlowCard } from './micro-interactions';
import { SectionHeader, InkDivider } from './brand-elements';
import type { Service } from '@/lib/constants/services';

interface ServiceValueSectionV3Props {
  service: Service;
}

export function ServiceValueSectionV3({ service }: ServiceValueSectionV3Props) {
  return (
    <section className="relative bg-white py-24 lg:py-32 overflow-hidden">
      <div className="absolute inset-0 bg-gradient-to-b from-slate-50/80 via-transparent to-slate-50/50" />

      <div className="container mx-auto px-4 relative max-w-7xl">
        {/* 内容将在后续步骤中填充 */}
      </div>
    </section>
  );
}

步骤 2: 添加章节标题和服务概述

在容器内部添加：

<SectionHeader
  badge="专业服务"
  title={`为什么选择我们的${service.title}？`}
  subtitle={service.overview}
  icon={Zap}
/>

步骤 3: 添加功能特性网格（带图标动画）

<div className="mt-16">
  <div className="flex items-center gap-4 mb-8">
    <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-[#C41E3A] to-[#99182d] flex items-center justify-center shadow-xl shadow-red-500/20">
      <Zap className="w-6 h-6 text-white" />
    </div>
    <div>
      <h3 className="text-2xl font-bold text-gray-900">核心能力</h3>
      <p className="text-sm text-gray-500 mt-0.5">我们提供的服务特色</p>
    </div>
  </div>

  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
    {service.features.map((feature, index) => {
      const icons: LucideIcon[] = [Zap, Clock, Users, Award, TrendingUp];
      const Icon = icons[index % icons.length]!;

      return (
        <InkGlowCard
          key={feature}
          active={index === 0}
          className="group p-6 hover:border-purple-100"
        >
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{
              delay: index * 0.08,
              duration: 0.5,
              ease: [0.22, 1, 0.36, 1] as const,
            }}
          >
            <div className="flex items-start gap-4">
              <div
                className={`shrink-0 w-11 h-11 rounded-xl flex items-center justify-center transition-all duration-300 shadow-md ${
                  index === 0
                    ? 'bg-gradient-to-br from-[#C41E3A] to-[#99182d] text-white'
                    : 'bg-gradient-to-br from-gray-100 to-gray-200 text-gray-600 group-hover:from-[#C41E3A] group-hover:to-[#99182d] group-hover:text-white'
                }`}
              >
                <Icon className="w-5.5 h-5.5" />
              </div>
              <p className="text-sm font-medium text-gray-800 leading-relaxed pt-2">
                {feature.split('：')[1] || feature}
              </p>
            </div>
          </motion.div>
        </InkGlowCard>
      );
    })}
  </div>
</div>

步骤 4: 添加服务优势区块

<motion.div
  initial={{ opacity: 0, y: 32 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, margin: '-80px' }}
  transition={{ duration: 0.75, delay: 0.3 }}
  className="mt-16"
>
  <InkDivider variant="subtle" />

  <div className="flex items-center gap-4 mb-8">
    <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center shadow-xl shadow-green-500/20">
      <Award className="w-6 h-6 text-white" />
    </div>
    <div>
      <h3 className="text-2xl font-bold text-gray-900">服务优势</h3>
      <p className="text-sm text-gray-500 mt-0.5">选择我们的理由</p>
    </div>
  </div>

  <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
    {service.benefits.map((benefit, index) => (
      <motion.div
        key={index}
        initial={{ opacity: 0, x: index % 2 === 0 ? -20 : 20 }}
        whileInView={{ opacity: 1, x: 0 }}
        viewport={{ once: true }}
        transition={{
          delay: 0.4 + index * 0.06,
          duration: 0.5,
          ease: [0.22, 1, 0.36, 1] as const,
        }}
        className="group p-6 rounded-2xl bg-gradient-to-br from-green-50/80 via-emerald-50/30 to-teal-50/20 border border-green-100/60 hover:border-green-200 hover:shadow-lg hover:-translate-y-1 transition-all duration-300"
      >
        <div className="flex items-start gap-3">
          <CheckCircle2 className="w-5 h-5 text-green-600 mt-0.5 shrink-0 group-hover:scale-110 transition-transform" />
          <p className="text-sm font-medium text-gray-800 leading-relaxed">{benefit}</p>
        </div>
      </motion.div>
    ))}
  </div>
</motion.div>

步骤 5: 添加服务流程时间线

{service.process && service.process.length > 0 && (
  <motion.div
    initial={{ opacity: 0, y: 32 }}
    whileInView={{ opacity: 1, y: 0 }}
    viewport={{ once: true, margin: '-80px' }}
    transition={{ duration: 0.75, delay: 0.45 }}
    className="mt-20"
  >
    <InkDivider variant="decorative" />

    <div className="text-center mb-12">
      <h3 className="text-2xl md:text-3xl font-bold tracking-tight text-gray-900">
        服务流程
      </h3>
      <p className="text-gray-600 mt-3">标准化流程保障服务质量</p>
    </div>

    <div className="relative">
      {/* 时间线背景线 */}
      <div className="absolute left-8 top-0 bottom-0 w-0.5 bg-gradient-to-b from-[#C41E3A] via-blue-400 to-green-400 hidden md:block" />

      <div className="space-y-6">
        {service.process.map((step, index) => (
          <motion.div
            key={step}
            initial={{ opacity: 0, x: -30 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{
              delay: 0.5 + index * 0.1,
              duration: 0.55,
              ease: [0.22, 1, 0.36, 1] as const,
            }}
            className="relative flex gap-6 group"
          >
            {/* 步骤编号圆圈 */}
            <div className="relative z-10 shrink-0">
              <div className="w-16 h-16 rounded-full bg-white border-4 border-[#C41E3A] flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300">
                <span className="text-lg font-bold text-[#C41E3A]">{String(index + 1).padStart(2, '0')}</span>
              </div>
            </div>

            {/* 步骤内容卡片 */}
            <TiltCard
              tiltAmount={5}
              glareEnable={false}
              className="flex-1 p-6 rounded-2xl bg-white border border-gray-100 hover:border-[#C41E3A]/30 hover:shadow-lg transition-all"
            >
              <h4 className="font-bold text-gray-900 mb-2">
                {step.split('：')[0]}
              </h4>
              <p className="text-sm text-gray-600 leading-relaxed">
                {step.split('：')[1] || step}
              </p>
            </TiltCard>
          </motion.div>
        ))}
      </div>
    </div>
  </motion.div>
)}

步骤 6: 运行TypeScript编译检查

运行命令：

npx tsc --noEmit 2>&1 | grep -E "error TS" | wc -l

预期输出：0（无错误）

🚀 Phase 3: 升级6个产品详情页为V3

任务 3.1: 升级产品详情页模板

文件：

修改：src/app/(marketing)/products/[id]/page.tsx
步骤 1: 替换导入语句

将现有导入：

import { DetailHero } from '@/components/detail/detail-hero';
import { ProductValueSection } from '@/components/detail/detail-product-value';

替换为：

import { DetailHeroV3 } from '@/components/detail-v2/detail-hero-v3';
import { ProductValueSectionV3 } from '@/components/detail-v2/detail-product-value-v3';

保留不变的导入：

import { DetailTrustSectionV2 } from '@/components/detail-v2/detail-trust-section-v2';
import { DetailCTASectionV2 } from '@/components/detail-v2/detail-cta-section-v2';

步骤 2: 替换组件调用

将 JSX 中的组件替换为 V3 版本：

{/* L1 - Hero 情感入口 (V3) */}
<DetailHeroV3
  theme={theme}
  badge={product.category}
  title={product.title}
  subtitle={product.description}
  description={product.overview}
  primaryAction={{ label: '预约体验', href: '/contact' }}
  secondaryAction={{ label: '查看方案', href: '/solutions' }}
/>

{/* L2 - 价值理性支撑 (V3) */}
<ProductValueSectionV3 product={product} />

{/* L3 - 信任证明 (V2，保持不变) */}
<DetailTrustSectionV2
  caseStudies={product.caseStudies}
  dataProofs={product.dataProofs}
  certifications={product.certifications}
  accentColor={theme.accentColor}
/>

{/* L4 - CTA + 交叉推荐 (V2，保持不变) */}
<DetailCTASectionV2
  theme={theme}
  title={`探索 ${product.title} 的无限可能`}
  description="立即联系我们，获取专属方案和报价"
  primaryAction={{ label: '预约体验', href: '/contact' }}
  secondaryAction={{ label: '下载产品手册', href: '#' }}
/>

<CrossRecommendGrid items={crossRefs} title={`与 ${product.title} 相关的推荐`} />

步骤 3: 更新metadata标题

添加 V3 标识：

export async function generateMetadata({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const product = PRODUCTS.find((p) => p.id === id);

  if (!product) {
    return { title: '产品未找到' };
  }

  return {
    title: `${product.title} - ${COMPANY_INFO.displayName}`,
    description: `${product.description} | 现代东方美学设计`,
  };
}

步骤 4: 验证TypeScript编译

运行命令：

npx tsc --noEmit 2>&1 | grep -E "error TS" | head -10

预期输出：无错误信息

步骤 5: 批量测试所有产品页面

在浏览器中依次访问以下URL并确认显示正常：

预期：所有页面均显示V3风格的Hero和价值支撑区域

🚀 Phase 4: 升级4个解决方案详情页为V3

任务 4.1: 升级解决方案详情客户端组件

文件：

修改：src/app/(marketing)/solutions/[id]/client.tsx
步骤 1: 替换导入语句

将现有导入：

import { DetailHero } from '@/components/detail/detail-hero';
import { SolutionDetailClient } from './client'; // 如果有旧的SolutionValueSection

替换为：

import { DetailHeroV3 } from '@/components/detail-v2/detail-hero-v3';
import { SolutionValueSectionV3 } from '@/components/detail-v2/solution-value-v3';
import { DetailTrustSectionV2 } from '@/components/detail-v2/detail-trust-section-v2';
import { DetailCTASectionV2 } from '@/components/detail-v2/detail-cta-section-v2';

步骤 2: 重构组件函数体

完整替换函数体：

export function SolutionDetailClient({ solution }: SolutionDetailClientProps) {
  const theme = getHeroTheme(solution.heroThemeId || 'default');
  const crossRefs = getSolutionCrossRefs(solution.id);

  return (
    <div className="min-h-screen bg-[var(--color-bg-primary)]">
      <DetailSwipeNav type="solution" currentId={solution.id} />

      {/* L1 - Hero 情感入口 (V3) */}
      <DetailHeroV3
        theme={theme}
        badge={`${solution.industry}解决方案`}
        title={solution.title}
        subtitle={solution.subtitle || solution.description}
        description={solution.description}
        primaryAction={{ label: '立即咨询', href: '/contact' }}
        secondaryAction={{ label: '查看案例', href: '/cases' }}
      />

      {/* L2 - 价值理性支撑 (V3) */}
      <SolutionValueSectionV3 solution={solution} />

      {/* L3 - CTA转化 (V2) */}
      <DetailCTASectionV2
        theme={theme}
        title={`探索 ${solution.title} 的无限可能`}
        description="联系我们，获取专属方案和报价"
        primaryAction={{ label: '立即咨询', href: '/contact' }}
        secondaryAction={{ label: '下载方案白皮书', href: '#' }}
      />

      <CrossRecommendGrid items={crossRefs} title="相关产品与服务" />
    </div>
  );
}

步骤 3: 验证TypeScript编译

运行命令：

npx tsc --noEmit 2>&1 | grep -E "error TS" | head -10

预期输出：无错误信息

步骤 4: 测试所有解决方案页面

在浏览器中依次访问：

预期：所有页面均显示V3风格，包含挑战-解决方案对比、价值主张、套装组合展示

🚀 Phase 5: 升级4个服务详情页为V3

任务 5.1: 升级服务详情客户端组件

文件：

修改：src/app/(marketing)/services/[id]/client.tsx
步骤 1: 替换导入语句

将现有导入：

import { DetailHero } from '@/components/detail/detail-hero';
import { ServiceValueSection } from '@/components/detail/detail-service-value';

替换为：

import { DetailHeroV3 } from '@/components/detail-v2/detail-hero-v3';
import { ServiceValueSectionV3 } from '@/components/detail-v2/service-value-v3';
import { DetailTrustSectionV2 } from '@/components/detail-v2/detail-trust-section-v2';
import { DetailCTASectionV2 } from '@/components/detail-v2/detail-cta-section-v2';

步骤 2: 重构组件函数体

完整替换函数体：

export function ServiceDetailClient({ service }: ServiceDetailClientProps) {
  const theme = getHeroTheme(service.heroThemeId);
  const crossRefs = getServiceCrossRefs(service.id);

  return (
    <div className="min-h-screen bg-[var(--color-bg-primary)]">
      <DetailSwipeNav type="service" currentId={service.id} />

      {/* L1 - Hero 情感入口 (V3) */}
      <DetailHeroV3
        theme={theme}
        badge="专业服务"
        title={service.title}
        subtitle={service.description}
        primaryAction={{ label: '立即咨询', href: '/contact' }}
        secondaryAction={{ label: '查看案例', href: '/cases' }}
      />

      {/* L2 - 价值理性支撑 (V3) */}
      <ServiceValueSectionV3 service={service} />

      {/* L3 - 信任证明 (V2) */}
      <DetailTrustSectionV2
        caseStudies={service.caseStudies}
        dataProofs={service.dataProofs}
        accentColor={theme.accentColor}
      />

      {/* L4 - CTA转化 (V2) */}
      <DetailCTASectionV2
        theme={theme}
        title={`准备好开始${service.title}了吗？`}
        description="联系我们，获取专属方案和报价"
        primaryAction={{ label: '预约咨询', href: '/contact' }}
        secondaryAction={{ label: '了解更多服务', href: '/services' }}
      />

      <CrossRecommendGrid items={crossRefs} title="相关解决方案" />
    </div>
  );
}

步骤 3: 验证TypeScript编译

运行命令：

npx tsc --noEmit 2>&1 | grep -E "error TS" | head -10

预期输出：无错误信息

步骤 4: 测试所有服务页面

在浏览器中依次访问：

预期：所有页面均显示V3风格，包含功能网格、优势展示、服务流程时间线

🚀 Phase 6: 升级3个列表页为V3风格

任务 6.1: 升级产品列表页

文件：

修改：src/app/(marketing)/products/page.tsx

目标： 为产品列表页添加V3风格的Hero区域和卡片样式

步骤 1: 添加V3 Hero区域导入

在文件顶部添加：

import { ListPageHeroV3 } from '@/components/detail-v2/list-page-hero-v3';
import { ProductCardV3 } from '@/components/detail-v2/product-card-v3';

步骤 2: 替换页面Hero区域

将现有的静态Hero替换为：

<ListPageHeroV3
  title="企业软件产品矩阵"
  subtitle="从ERP到BI，覆盖企业数字化全场景"
  description="六大核心产品互为补充，可根据业务需求灵活组合"
  stats={[
    { value: '6', label: '核心产品' },
    { value: '3', label: '产品系列' },
    { value: '99%', label: '自主可控' },
  ]}
/>

步骤 3: 替换产品卡片渲染

将现有的 .map() 渲染替换为：

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
  {PRODUCTS.map((product) => (
    <ProductCardV3 key={product.id} product={product} />
  ))}
</div>

任务 6.2 & 6.3: 升级解决方案和服务列表页

按照相同的模式升级：

src/app/(marketing)/solutions/page.tsx - 使用 SolutionCardV3
src/app/(marketing)/services/page.tsx - 使用 ServiceCardV3

🚀 Phase 7: 全量验证与收尾

任务 7.1: 最终TypeScript编译检查

步骤 1: 运行完整编译检查

npx tsc --noEmit

预期输出：✓ 编译成功，0错误

步骤 2: 运行Next.js构建测试

npm run build

预期输出：✓ Build successful

任务 7.2: 全页面冒烟测试

步骤 1: 创建测试清单

逐个访问以下URL并确认：

所有Hero区域显示正常（视差滚动、浮动粒子）
所有价值支撑区域显示正常（标签化、数据可视化）
所有CTA按钮可点击
移动端响应式布局正常
动画流畅不卡顿

完整URL清单（17个页面）：

产品详情页（6个）：

/products/erp
/products/crm
/products/cms
/products/bi
/products/sds
/products/oa

解决方案详情页（4个）： 7. /solutions/manufacturing 8. /solutions/retail 9. /solutions/finance 10. /solutions/government

服务详情页（4个）： 11. /services/software 12. /services/consulting 13. /services/data-intelligence 14. /services/technical-support

列表页（3个）： 15. /products 16. /solutions 17. /services

步骤 2: 性能基准测试

使用Chrome DevTools Performance面板检查：

First Contentful Paint < 1.5s
Time to Interactive < 3.0s
Cumulative Layout Shift < 0.1
动画帧率稳定在60fps

任务 7.3: 文档更新与提交

步骤 1: 更新CONTEXT.md

在CONTEXT.md中添加V3设计系统的说明：

## V3设计系统（2026-01-26上线）

### 核心特征
- **L1微交互层**：TiltCard 3D倾斜、PressableButton按压反馈、InkGlowCard流光效果
- **L2动效节奏层**：差异化时长(0.6-0.9s)、弹性缓动([0.34,1.56,0.64,1])、序列编排(stagger 0.08-0.12s)
- **L3视觉层次层**：多层阴影、渐变边框、玻璃态(backdrop-blur)
- **L4内容密度层**：FeatureTags标签化、CircularProgress环形图、AnimatedCounter计数器
- **L5品牌印记层**：BrandSeal印章、CalligraphyText书法字体、InkDivider墨韵分隔线

### 组件映射关系
| V1组件 | V3组件 | 变更内容 |
|--------|--------|----------|
| DetailHero | DetailHeroV3 | 视差滚动+浮动粒子+序列动画 |
| ProductValueSection | ProductValueSectionV3 | 标签化功能+数据可视化 |
| ServiceValueSection | ServiceValueSectionV3 | 时间线流程+优势网格 |
| (新增) | SolutionValueSectionV3 | 挑战-解决方案对比+套装组合 |

步骤 2: Git提交

git add .
git commit -m "feat: apply V3 design system to all 17 pages

- Upgrade all product detail pages (6) to V3 with L1-L5 refinements
- Create SolutionValueSectionV3 for solution pages (4)
- Create ServiceValueSectionV3 for service pages (4)
- Upgrade list pages (3) with V3 hero and card components
- Add micro-interaction library (TiltCard, PressableButton, InkGlowCard)
- Add brand elements (BrandSeal, CalligraphyText, InkDivider)
- Implement data visualization (CircularProgress, AnimatedCounter, FeatureTags)
- Apply parallax scrolling and floating particles to hero sections
- Ensure TypeScript compilation passes with 0 errors
- Validate responsive design and performance metrics"

⚠️ 注意事项

关键依赖

Framer Motion版本兼容性：确保所有动画参数类型正确（duration为数字，ease使用as const断言）
Tailwind CSS类名：使用完整的类名链式写法，避免动态拼接
Lucide Icons：确保所有图标导入路径正确，使用type import避免打包问题

性能优化要点

懒加载非首屏组件：使用React.lazy()加载次要组件
动画性能：只对transform和opacity属性做动画，避免触发layout reflow
图片优化：使用next/image组件，设置适当的sizes属性
字体加载：使用font-display: swap避免FOIT/FOUT

移动端适配

Hero区域：移动端减少padding（py-28 vs py-40），字体缩小（text-4xl vs text-5xl）
卡片网格：移动端单列（grid-cols-1），平板双列（md:grid-cols-2）
触摸优化：按钮最小点击区域44x44px，移除hover依赖的微交互

回滚方案

如果某个页面出现严重问题：

立即回退到V1/V2组件（保留旧组件不删除）
记录问题页面和错误信息
单独修复后再重新应用V3

📊 成功标准

功能完整性

所有17个页面成功应用V3设计系统
TypeScript编译0错误
Next.js构建成功
所有链接可正常跳转

视觉一致性

所有页面遵循四层叙事模型（Hero→价值→信任→CTA）
品牌色彩统一（主色#C41E3A，辅色蓝色系）
动效节奏一致（stagger 0.08-0.12s，duration 0.6-0.9s）
移动端响应式布局正常

性能指标

LCP < 2.5s
FID < 100ms
CLS < 0.1
动画帧率 ≥ 55fps

🎯 执行选项

计划已完成。两种执行方式：

1. 子代理驱动（推荐） - 使用 subagent-driven-development

每个Phase一个子代理
两阶段审查（规格合规性 + 代码质量）
快速迭代，并行执行独立任务

2. 内联执行 - 使用 executing-plans

在当前会话中按Phase顺序执行
每个Phase完成后设置检查点
适合需要实时反馈的场景

请选择执行方式？

36 KiB Raw Blame History Unescape Escape

V3设计系统全量应用实施计划

📋 页面清单与优先级

✅ 已完成（标杆页面）

📦 待升级页面（17个）

产品详情页（5个）

解决方案详情页（4个）

服务详情页（4个）

列表页（3个）

📁 文件结构总览

新增文件

已有V3组件（复用）

🚀 Phase 0: 基础设施准备（已完成）

✅ 已完成的V3核心资产

🚀 Phase 1: 创建解决方案V3组件

任务 1.1: 创建 SolutionValueSectionV3 组件

🚀 Phase 2: 创建服务V3组件

任务 2.1: 创建 ServiceValueSectionV3 组件

🚀 Phase 3: 升级6个产品详情页为V3

任务 3.1: 升级产品详情页模板

🚀 Phase 4: 升级4个解决方案详情页为V3

任务 4.1: 升级解决方案详情客户端组件

🚀 Phase 5: 升级4个服务详情页为V3

任务 5.1: 升级服务详情客户端组件

🚀 Phase 6: 升级3个列表页为V3风格

任务 6.1: 升级产品列表页

任务 6.2 & 6.3: 升级解决方案和服务列表页

🚀 Phase 7: 全量验证与收尾

任务 7.1: 最终TypeScript编译检查

任务 7.2: 全页面冒烟测试

任务 7.3: 文档更新与提交

⚠️ 注意事项

关键依赖

性能优化要点

移动端适配

回滚方案

📊 成功标准

功能完整性

视觉一致性

性能指标

🎯 执行选项

36 KiB

Raw Blame History