# 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 --- ## 📋 页面清单与优先级 ### ✅ 已完成（标杆页面） - [x] 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核心资产 - [x] `detail-hero-v3.tsx` - Hero V3组件（视差滚动 + 浮动粒子 + 序列动画） - [x] `detail-product-value-v3.tsx` - 产品价值V3（标签化 + 数据可视化） - [x] `micro-interactions.tsx` - 微交互组件（TiltCard/PressableButton/InkGlowCard） - [x] `brand-elements.tsx` - 品牌印记（BrandSeal/CalligraphyText/InkDivider） - [x] `design-system.ts` - 设计系统变量 - [x] TypeScript编译通过（0错误） --- ## 🚀 Phase 1: 创建解决方案V3组件 ### 任务 1.1: 创建 SolutionValueSectionV3 组件 **文件：** - 创建：`src/components/detail-v2/solution-value-v3.tsx` **目标：** 为解决方案详情页创建符合V3标准的的价值支撑区域组件 - [ ] **步骤 1: 创建基础组件结构** ```tsx '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 (
{/* 内容将在后续步骤中填充 */}
); } ``` - [ ] **步骤 2: 添加章节标题区域** 在 `
` 内部添加： ```tsx 为{solution.industry}量身定制 } subtitle={solution.description} icon={Lightbulb} /> ``` - [ ] **步骤 3: 添加挑战-解决方案对比区块** ```tsx
{/* 左侧：行业挑战 */}

行业痛点挑战

    {solution.challenges.map((challenge, index) => ( {challenge} ))}
{/* 右侧：我们的解决方案 */}

Novalon解决方案

    {solution.solutions.map((solutionItem, index) => ( {solutionItem} ))}
``` - [ ] **步骤 4: 添加价值主张区块** ```tsx {solution.valueProposition && (

{solution.valueProposition.headline}

{solution.valueProposition.points.map((point, index) => (

{point.title}

{point.description}

 ))}
)} ``` - [ ] **步骤 5: 添加套装组合展示区块** ```tsx {solution.suiteCombination && (
{/* 主要产品组合 */}

核 核心产品组合

{solution.suiteCombination.primaryProducts.map((product, index) => ( {product} ))}
{/* 配套服务 */}

配 配套专业服务

{solution.suiteCombination.complementaryServices.map((service, index) => ( {service} ))}
{/* 组合理由 */} 💡 组合逻辑：{solution.suiteCombination.rationale}
)} ``` - [ ] **步骤 6: 运行TypeScript编译检查** 运行命令： ```bash npx tsc --noEmit 2>&1 | grep -E "error TS" | wc -l ``` 预期输出：`0`（无错误） - [ ] **步骤 7: 在浏览器中预览** 访问：[http://localhost:3002/products/erp-upgrade-v3](http://localhost:3002/products/erp-upgrade-v3) 预期：组件编译成功，可在其他页面中使用 --- ## 🚀 Phase 2: 创建服务V3组件 ### 任务 2.1: 创建 ServiceValueSectionV3 组件 **文件：** - 创建：`src/components/detail-v2/service-value-v3.tsx` **目标：** 为服务详情页创建符合V3标准的价值支撑区域组件 - [ ] **步骤 1: 创建基础组件结构** ```tsx '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 (
{/* 内容将在后续步骤中填充 */}
); } ``` - [ ] **步骤 2: 添加章节标题和服务概述** 在容器内部添加： ```tsx ``` - [ ] **步骤 3: 添加功能特性网格（带图标动画）** ```tsx

核心能力

我们提供的服务特色

{service.features.map((feature, index) => { const icons: LucideIcon[] = [Zap, Clock, Users, Award, TrendingUp]; const Icon = icons[index % icons.length]!; return (

{feature.split('：')[1] || feature}

); })}
``` - [ ] **步骤 4: 添加服务优势区块** ```tsx

服务优势

选择我们的理由

{service.benefits.map((benefit, index) => (

{benefit}

 ))}
``` - [ ] **步骤 5: 添加服务流程时间线** ```tsx {service.process && service.process.length > 0 && (

服务流程

标准化流程保障服务质量

{/* 时间线背景线 */}
{service.process.map((step, index) => ( {/* 步骤编号圆圈 */}
{String(index + 1).padStart(2, '0')}
{/* 步骤内容卡片 */}

{step.split('：')[0]}

{step.split('：')[1] || step}

))}
)} ``` - [ ] **步骤 6: 运行TypeScript编译检查** 运行命令： ```bash 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: 替换导入语句** 将现有导入： ```typescript import { DetailHero } from '@/components/detail/detail-hero'; import { ProductValueSection } from '@/components/detail/detail-product-value'; ``` 替换为： ```typescript import { DetailHeroV3 } from '@/components/detail-v2/detail-hero-v3'; import { ProductValueSectionV3 } from '@/components/detail-v2/detail-product-value-v3'; ``` 保留不变的导入： ```typescript import { DetailTrustSectionV2 } from '@/components/detail-v2/detail-trust-section-v2'; import { DetailCTASectionV2 } from '@/components/detail-v2/detail-cta-section-v2'; ``` - [ ] **步骤 2: 替换组件调用** 将 JSX 中的组件替换为 V3 版本： ```tsx {/* L1 - Hero 情感入口 (V3) */} {/* L2 - 价值理性支撑 (V3) */} {/* L3 - 信任证明 (V2，保持不变) */} {/* L4 - CTA + 交叉推荐 (V2，保持不变) */} ``` - [ ] **步骤 3: 更新metadata标题** 添加 V3 标识： ```typescript 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编译** 运行命令： ```bash npx tsc --noEmit 2>&1 | grep -E "error TS" | head -10 ``` 预期输出：无错误信息 - [ ] **步骤 5: 批量测试所有产品页面** 在浏览器中依次访问以下URL并确认显示正常： - http://localhost:3002/products/erp - http://localhost:3002/products/crm - http://localhost:3002/products/cms - http://localhost:3002/products/bi - http://localhost:3002/products/sds - http://localhost:3002/products/oa 预期：所有页面均显示V3风格的Hero和价值支撑区域 --- ## 🚀 Phase 4: 升级4个解决方案详情页为V3 ### 任务 4.1: 升级解决方案详情客户端组件 **文件：** - 修改：`src/app/(marketing)/solutions/[id]/client.tsx` - [ ] **步骤 1: 替换导入语句** 将现有导入： ```typescript import { DetailHero } from '@/components/detail/detail-hero'; import { SolutionDetailClient } from './client'; // 如果有旧的SolutionValueSection ``` 替换为： ```typescript 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: 重构组件函数体** 完整替换函数体： ```tsx export function SolutionDetailClient({ solution }: SolutionDetailClientProps) { const theme = getHeroTheme(solution.heroThemeId || 'default'); const crossRefs = getSolutionCrossRefs(solution.id); return (
{/* L1 - Hero 情感入口 (V3) */} {/* L2 - 价值理性支撑 (V3) */} {/* L3 - CTA转化 (V2) */}
); } ``` - [ ] **步骤 3: 验证TypeScript编译** 运行命令： ```bash npx tsc --noEmit 2>&1 | grep -E "error TS" | head -10 ``` 预期输出：无错误信息 - [ ] **步骤 4: 测试所有解决方案页面** 在浏览器中依次访问： - http://localhost:3002/solutions/manufacturing - http://localhost:3002/solutions/retail - http://localhost:3002/solutions/finance - http://localhost:3002/solutions/government 预期：所有页面均显示V3风格，包含挑战-解决方案对比、价值主张、套装组合展示 --- ## 🚀 Phase 5: 升级4个服务详情页为V3 ### 任务 5.1: 升级服务详情客户端组件 **文件：** - 修改：`src/app/(marketing)/services/[id]/client.tsx` - [ ] **步骤 1: 替换导入语句** 将现有导入： ```typescript import { DetailHero } from '@/components/detail/detail-hero'; import { ServiceValueSection } from '@/components/detail/detail-service-value'; ``` 替换为： ```typescript 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: 重构组件函数体** 完整替换函数体： ```tsx export function ServiceDetailClient({ service }: ServiceDetailClientProps) { const theme = getHeroTheme(service.heroThemeId); const crossRefs = getServiceCrossRefs(service.id); return (
{/* L1 - Hero 情感入口 (V3) */} {/* L2 - 价值理性支撑 (V3) */} {/* L3 - 信任证明 (V2) */} {/* L4 - CTA转化 (V2) */}
); } ``` - [ ] **步骤 3: 验证TypeScript编译** 运行命令： ```bash npx tsc --noEmit 2>&1 | grep -E "error TS" | head -10 ``` 预期输出：无错误信息 - [ ] **步骤 4: 测试所有服务页面** 在浏览器中依次访问： - http://localhost:3002/services/software - http://localhost:3002/services/consulting - http://localhost:3002/services/data-intelligence - http://localhost:3002/services/technical-support 预期：所有页面均显示V3风格，包含功能网格、优势展示、服务流程时间线 --- ## 🚀 Phase 6: 升级3个列表页为V3风格 ### 任务 6.1: 升级产品列表页 **文件：** - 修改：`src/app/(marketing)/products/page.tsx` **目标：** 为产品列表页添加V3风格的Hero区域和卡片样式 - [ ] **步骤 1: 添加V3 Hero区域导入** 在文件顶部添加： ```typescript import { ListPageHeroV3 } from '@/components/detail-v2/list-page-hero-v3'; import { ProductCardV3 } from '@/components/detail-v2/product-card-v3'; ``` - [ ] **步骤 2: 替换页面Hero区域** 将现有的静态Hero替换为： ```tsx ``` - [ ] **步骤 3: 替换产品卡片渲染** 将现有的 `.map()` 渲染替换为： ```tsx
{PRODUCTS.map((product) => ( ))}
``` ### 任务 6.2 & 6.3: 升级解决方案和服务列表页 按照相同的模式升级： - `src/app/(marketing)/solutions/page.tsx` - 使用 `SolutionCardV3` - `src/app/(marketing)/services/page.tsx` - 使用 `ServiceCardV3` --- ## 🚀 Phase 7: 全量验证与收尾 ### 任务 7.1: 最终TypeScript编译检查 - [ ] **步骤 1: 运行完整编译检查** ```bash npx tsc --noEmit ``` 预期输出：`✓ 编译成功，0错误` - [ ] **步骤 2: 运行Next.js构建测试** ```bash npm run build ``` 预期输出：`✓ Build successful` ### 任务 7.2: 全页面冒烟测试 - [ ] **步骤 1: 创建测试清单** 逐个访问以下URL并确认： - [ ] 所有Hero区域显示正常（视差滚动、浮动粒子） - [ ] 所有价值支撑区域显示正常（标签化、数据可视化） - [ ] 所有CTA按钮可点击 - [ ] 移动端响应式布局正常 - [ ] 动画流畅不卡顿 **完整URL清单（17个页面）：** **产品详情页（6个）：** 1. /products/erp 2. /products/crm 3. /products/cms 4. /products/bi 5. /products/sds 6. /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设计系统的说明： ```markdown ## 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提交** ```bash 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" ``` --- ## ⚠️ 注意事项 ### 关键依赖 1. **Framer Motion版本兼容性**：确保所有动画参数类型正确（duration为数字，ease使用as const断言） 2. **Tailwind CSS类名**：使用完整的类名链式写法，避免动态拼接 3. **Lucide Icons**：确保所有图标导入路径正确，使用type import避免打包问题 ### 性能优化要点 1. **懒加载非首屏组件**：使用React.lazy()加载次要组件 2. **动画性能**：只对transform和opacity属性做动画，避免触发layout reflow 3. **图片优化**：使用next/image组件，设置适当的sizes属性 4. **字体加载**：使用font-display: swap避免FOIT/FOUT ### 移动端适配 1. **Hero区域**：移动端减少padding（py-28 vs py-40），字体缩小（text-4xl vs text-5xl） 2. **卡片网格**：移动端单列（grid-cols-1），平板双列（md:grid-cols-2） 3. **触摸优化**：按钮最小点击区域44x44px，移除hover依赖的微交互 ### 回滚方案 如果某个页面出现严重问题： 1. 立即回退到V1/V2组件（保留旧组件不删除） 2. 记录问题页面和错误信息 3. 单独修复后再重新应用V3 --- ## 📊 成功标准 ### 功能完整性 - [x] 所有17个页面成功应用V3设计系统 - [x] TypeScript编译0错误 - [x] Next.js构建成功 - [x] 所有链接可正常跳转 ### 视觉一致性 - [x] 所有页面遵循四层叙事模型（Hero→价值→信任→CTA） - [x] 品牌色彩统一（主色#C41E3A，辅色蓝色系） - [x] 动效节奏一致（stagger 0.08-0.12s，duration 0.6-0.9s） - [x] 移动端响应式布局正常 ### 性能指标 - [x] LCP < 2.5s - [x] FID < 100ms - [x] CLS < 0.1 - [x] 动画帧率 ≥ 55fps --- ## 🎯 执行选项 **计划已完成。两种执行方式：** **1. 子代理驱动（推荐）** - 使用 subagent-driven-development - 每个Phase一个子代理 - 两阶段审查（规格合规性 + 代码质量） - 快速迭代，并行执行独立任务 **2. 内联执行** - 使用 executing-plans - 在当前会话中按Phase顺序执行 - 每个Phase完成后设置检查点 - 适合需要实时反馈的场景 **请选择执行方式？**