novalon-website/docs/superpowers/plans/2026-06-29-phase1-foundation-accenture-skeleton.md

第一阶段：打好地基（Accenture 骨架）实现计划

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

目标： 建立工业化、可扩展的设计系统基础，完成组件库清理和核心模块搭建

架构： 以 Accenture 工业化设计系统为骨架，完善三级设计令牌体系，统一组件库版本，搭建服务网格和数据条核心模块

技术栈： Next.js 14 + TypeScript + Tailwind CSS + CSS Variables + Framer Motion

---

文件结构总览

文件	操作	职责
src/app/globals.css	修改	设计令牌三级结构整理、金色残留清理、补充组件令牌
tailwind.config.js	修改	令牌映射优化、新组件令牌注册
src/components/sections/section-header.tsx	修改	金色→品牌红、样式优化、移除 font-serif
src/components/sections/stats-bar.tsx	修改	样式升级、移除 font-serif、品牌色优化
src/components/sections/case-card.tsx	修改	金色残留清理
src/components/sections/insight-card.tsx	修改	金色残留清理
src/app/(marketing)/home-content.tsx	修改	金色残留清理
src/components/ui/scroll-reveal.tsx	修改	统一为唯一 ScrollReveal 组件
src/components/sections/scroll-reveal.tsx	删除	重复组件，迁移到 ui/
src/components/sections/service-grid.tsx	新建	Accenture 式服务网格组件
src/components/sections/service-card.tsx	新建	服务卡片（编号 + 4px 色条）
src/app/(marketing)/_archive/	移动	归档所有 v1 内容文件
src/components/content/sections.tsx	修改	已有内容组件，无需大改

---

任务 1：设计令牌体系完善与金色残留清理

文件：

• 修改：src/app/globals.css
• 修改：tailwind.config.js

1.1 金色残留清理

• 步骤 1：定位所有金色配色引用

运行搜索确认所有金色相关代码位置：

• --color-gold-text
• --color-gold
• #C9A84C
• gold 相关变量

涉及文件：section-header.tsx、case-card.tsx、insight-card.tsx、home-content.tsx

• 步骤 2：全局清理金色 CSS 变量

在 globals.css 中删除所有 gold 相关变量，替换为品牌色或移除：

• --color-gold-text → 不再使用，统一用 --color-brand 或 --color-text-muted

• --color-gold → 直接删除

• 步骤 3：验证无金色残留

运行搜索确认零结果：

grep -r "gold\|C9A84C" src/ --include="*.tsx" --include="*.css" --include="*.ts"

预期：0 个匹配

1.2 三级令牌命名规范梳理

• 步骤 4：确认 base tokens（基础令牌）已完整

检查 globals.css 中的基础令牌（颜色、字体、间距、圆角、阴影、动效），确保：

• 颜色：墨色、品牌色、辅助色、背景色、文字色、边框色、功能色 —— 全部存在

• 排版：字号、行高、字间距 —— 全部存在

• 间距：xs 到 6xl —— 全部存在

• 圆角：xs 到 full —— 全部存在

• 阴影：xs 到 xl + brand + glow —— 全部存在

• 动效：时长、缓动、stagger —— 全部存在

• 步骤 5：确认 semantic tokens（语义令牌）已完整

检查语义化命名：

• --color-bg-primary/secondary/tertiary ✅

• --color-text-primary/secondary/tertiary/muted ✅

• --color-border-primary/secondary ✅

• --color-link/link-hover ✅

• --color-success/warning/error/info ✅

• 步骤 6：补充 component tokens（组件令牌）

在 globals.css 已有的组件令牌基础上，补充缺失项：

在 /* === 组件令牌层（Component Tokens）=== */ 区域补充：

/* 导航 */
--nav-height: 4rem;
--nav-height-md: 4.5rem;
--nav-item-padding-x: 1rem;
--nav-item-padding-y: 0.75rem;

/* 标签/徽章 */
--badge-height: 1.5rem;
--badge-padding-x: 0.625rem;
--badge-font-size: 0.75rem;
--badge-border-radius: var(--radius-sm);

/* 输入框 */
--input-height: 2.75rem;
--input-padding-x: 1rem;
--input-border-radius: var(--radius-sm);

/* 下拉菜单 */
--dropdown-min-width: 12rem;
--dropdown-padding: 0.5rem;
--dropdown-border-radius: var(--radius-md);
--dropdown-shadow: var(--shadow-lg);

/* 模态框 */
--modal-max-width: 32rem;
--modal-padding: 2rem;
--modal-border-radius: var(--radius-xl);
--modal-shadow: var(--shadow-xl);

/* 表格 */
--table-row-height: 3rem;
--table-cell-padding-x: 1rem;
--table-cell-padding-y: 0.75rem;

/* 标签页 */
--tab-height: 2.75rem;
--tab-padding-x: 1.25rem;
--tab-border-radius: var(--radius-sm);

/* 提示框 */
--alert-padding-y: 1rem;
--alert-padding-x: 1.25rem;
--alert-border-radius: var(--radius-md);

• 步骤 7：同步更新 tailwind.config.js

在 tailwind.config.js 的 theme.extend 中补充新组件令牌的映射（如果需要作为 Tailwind 工具类使用的话）。

• 步骤 8：运行 TypeScript 检查

npx tsc --noEmit

预期：0 errors

---

任务 2：组件库系统化清理

文件：

• 删除：src/components/sections/scroll-reveal.tsx（重复，保留 ui/ 下的）
• 移动：所有 v1 内容文件到 _archive/
• 修改：所有引用了 sections/scroll-reveal 的文件

2.1 重复组件清理

• 步骤 1：确认 ui/scroll-reveal.tsx 是主版本

读取 src/components/ui/scroll-reveal.tsx 确认其功能完整。

• 步骤 2：更新所有引用路径

将所有从 @/components/sections/scroll-reveal 的导入改为从 @/components/ui/scroll-reveal 导入。

搜索引用：

grep -r "from.*sections/scroll-reveal" src/ --include="*.tsx" --include="*.ts"

逐个修改导入路径。

• 步骤 3：删除 sections/scroll-reveal.tsx

rm src/components/sections/scroll-reveal.tsx

2.2 v1 内容文件归档

• 步骤 4：确认所有 v1 内容文件列表

文件	当前位置	目标位置
services-content-v1.tsx	services/	_archive/
service-detail-content-v1.tsx	services/	_archive/
team-content-v1.tsx	team/	_archive/
news-content-v1.tsx	news/	_archive/
news-detail-content-v1.tsx	news/	_archive/
about-content-v1.tsx	about/	_archive/
solutions-content-v1.tsx	solutions/	_archive/
solution-detail-content-v1.tsx	solutions/	_archive/
product-detail-content-v1.tsx	products/	_archive/
products-content-v1.tsx	products/	_archive/
erp-upgrade-content-v1.tsx	products/erp-upgrade/	_archive/
contact-content-v1.tsx	contact/	_archive/

• 步骤 5：确认 v1 文件无引用

搜索确认没有页面文件还在 import v1 内容：

grep -r "content-v1" src/app --include="*.tsx" --include="*.ts" | grep -v "_archive"

预期：0 个结果（除 _archive 外）

• 步骤 6：移动到 _archive 目录

将所有 v1 文件移动到 src/app/(marketing)/_archive/ 目录。

移动后验证：

ls src/app/\(marketing\)/_archive/ | grep v1

预期：12 个文件

2.3 金色残留组件修复

• 步骤 7：修复 SectionHeader 组件

修改 src/components/sections/section-header.tsx：

1. 删除所有 --color-gold-text 和 #C9A84C 引用
2. Eyebrow label 颜色改为 var(--color-brand)（品牌红贯穿）
3. 移除 font-serif 类，改为系统 sans 字体
4. 优化样式，符合 Accenture 风格

• 步骤 8：修复 CaseCard 组件

修改 src/components/sections/case-card.tsx：

1. 删除金色相关变量引用
2. 替换为品牌色或中性色

• 步骤 9：修复 InsightCard 组件

修改 src/components/sections/insight-card.tsx：

1. 删除金色相关变量引用
2. 替换为品牌色或中性色

• 步骤 10：修复 home-content.tsx

修改 src/app/(marketing)/home-content.tsx：

1. 删除金色相关变量引用
2. 替换为品牌色或中性色

• 步骤 11：验证金色残留为零

grep -r "gold\|C9A84C" src/ --include="*.tsx" --include="*.css" --include="*.ts" | grep -v "_archive" | grep -v node_modules

预期：0 个结果

• 步骤 12：运行 TypeScript 检查

npx tsc --noEmit

预期：0 errors

---

任务 3：服务网格模块（Accenture 式）

文件：

• 新建：src/components/sections/service-grid.tsx
• 新建：src/components/sections/service-card.tsx

3.1 ServiceCard 组件

• 步骤 1：创建 ServiceCard 组件

在 src/components/sections/service-card.tsx 创建服务卡片组件：

'use client';

import { motion } from 'framer-motion';
import { useReducedMotion } from '@/hooks/use-reduced-motion';
import Link from 'next/link';

export type ServiceColor = 'blue' | 'teal' | 'amber' | 'purple';

interface ServiceCardProps {
  number: string;
  title: string;
  description: string;
  color: ServiceColor;
  href: string;
  className?: string;
  delay?: number;
}

const colorMap: Record<ServiceColor, string> = {
  blue: 'var(--color-accent-blue)',
  teal: 'var(--color-accent-teal)',
  amber: 'var(--color-accent-amber)',
  purple: 'var(--color-accent-purple)',
};

export function ServiceCard({
  number,
  title,
  description,
  color,
  href,
  className = '',
  delay = 0,
}: ServiceCardProps) {
  const shouldReduceMotion = useReducedMotion();
  const accentColor = colorMap[color];

  return (
    <motion.div
      className={`group relative bg-[var(--color-bg-primary)] rounded-[var(--radius-lg)] overflow-hidden transition-all duration-[var(--transition-normal)] ease-[var(--ease-ink)] hover:-translate-y-1 hover:shadow-[var(--shadow-lg)] ${className}`}
      initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: '-40px' }}
      transition={{ duration: 0.6, delay, ease: [0.22, 1, 0.36, 1] }}
    >
      {/* 左侧 4px 色条 */}
      <div
        className="absolute left-0 top-0 bottom-0 w-1 transition-all duration-[var(--transition-normal)] group-hover:w-1.5"
        style={{ backgroundColor: accentColor }}
      />

      <div className="p-6 md:p-8 pl-6 md:pl-8">
        {/* 大号背景编号 */}
        <div
          className="absolute top-4 right-6 text-[5rem] font-black leading-none select-none pointer-events-none transition-opacity duration-[var(--transition-normal)] group-hover:opacity-10"
          style={{ color: 'var(--color-border-light)', opacity: 0.06 }}
          aria-hidden="true"
        >
          {number}
        </div>

        {/* 编号标签 */}
        <div
          className="text-xs font-bold tracking-[0.18em] uppercase mb-4"
          style={{ color: accentColor }}
        >
          服务 {number}
        </div>

        {/* 标题 */}
        <h3 className="text-xl md:text-2xl font-bold mb-3 leading-tight" style={{ color: 'var(--color-text-primary)' }}>
          {title}
        </h3>

        {/* 描述 */}
        <p className="text-sm md:text-base leading-relaxed mb-6" style={{ color: 'var(--color-text-secondary)' }}>
          {description}
        </p>

        {/* 链接 */}
        <Link
          href={href}
          className="inline-flex items-center text-sm font-medium transition-colors duration-[var(--transition-fast)]"
          style={{ color: 'var(--color-brand)' }}
        >
          了解详情
          <svg
            className="ml-1.5 w-4 h-4 transform transition-transform duration-[var(--transition-fast)] group-hover:translate-x-1"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
        </Link>
      </div>
    </motion.div>
  );
}

• 步骤 2：验证组件无 TypeScript 错误

npx tsc --noEmit src/components/sections/service-card.tsx

预期：0 errors

3.2 ServiceGrid 组件

• 步骤 3：创建 ServiceGrid 组件

在 src/components/sections/service-grid.tsx 创建服务网格组件：

'use client';

import { ServiceCard, type ServiceColor } from './service-card';
import { SectionHeader } from './section-header';

interface ServiceItem {
  number: string;
  title: string;
  description: string;
  color: ServiceColor;
  href: string;
}

interface ServiceGridProps {
  label?: string;
  title: string;
  highlight?: string;
  desc?: string;
  items: ServiceItem[];
  className?: string;
}

export function ServiceGrid({
  label = '我们的服务',
  title,
  highlight,
  desc,
  items,
  className = '',
}: ServiceGridProps) {
  return (
    <section className={`section-padding ${className}`}>
      <div className="container-x">
        <SectionHeader label={label} title={title} highlight={highlight} desc={desc} />

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
          {items.map((item, index) => (
            <ServiceCard
              key={item.number}
              number={item.number}
              title={item.title}
              description={item.description}
              color={item.color}
              href={item.href}
              delay={index * 0.1}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

• 步骤 4：验证组件无 TypeScript 错误

npx tsc --noEmit src/components/sections/service-grid.tsx

预期：0 errors

• 步骤 5：在首页集成 ServiceGrid 做测试

在 home-content.tsx 中临时添加一个使用示例，确保组件能正常渲染。测试后保留或根据实际内容结构调整。

---

任务 4：数据条组件升级（Stats Bar）

文件：

• 修改：src/components/sections/stats-bar.tsx

4.1 StatsBar 样式升级

• 步骤 1：优化 StatsBar 组件

修改 src/components/sections/stats-bar.tsx：

1. 移除 font-serif，改为 sans 字体
2. 优化颜色使用，确保品牌红正确使用
3. 增强数字滚动动画（优化缓动曲线）
4. 增加 tabular-nums 数字等宽
5. 优化间距和响应式布局
6. 统一使用 CSS 变量而非内联样式中的硬编码值

关键改动：

// 数字样式
className="font-sans tabular-nums text-[clamp(2.5rem,5vw,4rem)] font-extrabold leading-none mb-2 tracking-[-0.02em]"

// 品牌色单位
<span style={{ color: 'var(--color-brand)', fontSize: '0.4em', fontWeight: 700 }}>
  {item.unit}
</span>

// 标签样式
className="text-xs sm:text-sm font-medium mb-2 tracking-[0.08em] uppercase"

• 步骤 2：验证组件无 TypeScript 错误

npx tsc --noEmit src/components/sections/stats-bar.tsx

预期：0 errors

---

任务 5：页面布局规范统一

文件：

• 修改：src/app/globals.css（补充布局相关工具类）
• 检查：核心页面的 Section 间距一致性

5.1 12 列网格确认

• 步骤 1：确认 Tailwind 默认 12 列网格可用

检查 tailwind.config.js，确保：

• grid-cols-1 到 grid-cols-12 可用（Tailwind 默认支持）

• gap 间距与设计令牌对齐

• 步骤 2：补充布局工具类

在 globals.css 的 @layer utilities 中确认以下类存在：

• .container-x ✅ 已存在
• .section-padding ✅ 已存在

确认响应式断点正确：

• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px
• 2xl: 1536px

5.2 Section 间距规范检查

• 步骤 3：抽查 3 个核心页面的 Section 间距

检查页面：

1. 首页（home-content.tsx）
2. 服务列表页（services-content-v2.tsx）
3. 关于页（about-content-v2.tsx）

确保所有 Section 统一使用 section-padding 类，间距一致。

如发现不一致，记录并修复。

---

任务 6：第一阶段验收

6.1 代码质量检查

• 步骤 1：TypeScript 类型检查

npx tsc --noEmit

预期：0 errors

• 步骤 2：生产构建

npm run build

预期：构建成功，无报错

• 步骤 3：ESLint 检查

npx eslint src/ --ext .ts,.tsx

预期：0 errors（warning 可接受）

6.2 功能验证

• 步骤 4：启动开发服务器

npm run dev

• 步骤 5：视觉验证清单

在浏览器中验证：

1. ✅ 金色配色完全消失，品牌红正确贯穿
2. ✅ SectionHeader 样式正常（eyebrow 品牌红、字体 sans）
3. ✅ StatsBar 数字滚动正常
4. ✅ ServiceGrid 服务卡片渲染正常（编号 + 色条）
5. ✅ 页面布局无错乱
6. ✅ 响应式布局正常（移动端/平板/桌面）
7. ✅ 暗色模式切换正常
8. ✅ 无控制台错误

---

验收标准

第一阶段完成标志：

1. ✅ 金色配色零残留
2. ✅ 三级设计令牌体系完善（base + semantic + component）
3. ✅ 重复组件清理完成（scroll-reveal 统一）
4. ✅ v1 内容文件全部归档
5. ✅ ServiceGrid + ServiceCard 组件可用
6. ✅ StatsBar 样式升级完成
7. ✅ TypeScript 0 errors
8. ✅ 生产构建成功
9. ✅ 核心页面视觉正常

完成后，项目设计系统完成度从 40/100 → 65/100。