turingflow-brand-001/README.md

turingflow-brand-001

企业品牌官网模板，适用于企业官网、商务咨询、金融服务等展示型网站。

技术栈

• React 19.2.3 (已锁定版本，修复 CVE-2025-55182 漏洞)
• Vite 7 (构建工具)
• Tailwind CSS 4 (使用 @theme 指令定义主题变量)
• TanStack Router (文件路由，自动代码分割)
• Swiper 11 (轮播组件)
• Font Awesome 4.7 (图标，CDN 引入)

快速开始

pnpm install
pnpm dev

访问 http://localhost:3000

目录结构

src/
├── main.tsx                    # 应用入口，挂载到 #root
├── index.css                   # 全局样式 + Tailwind @theme 主题变量
├── routeTree.gen.ts            # 自动生成的路由树（勿手动修改）
├── data/
│   └── siteData.ts             # 所有静态数据（菜单、轮播、服务、团队等）
├── routes/                     # 页面路由（TanStack Router 文件路由）
│   ├── __root.tsx              # 根布局 (Header + Outlet + Footer + ScrollToTop)
│   ├── index.tsx               # 首页 /
│   ├── about.tsx               # 关于页 /about
│   ├── services.tsx            # 服务页 /services
│   └── contact.tsx             # 联系页 /contact
├── components/
│   ├── layout/                 # 布局组件
│   │   ├── Header.tsx          # 导航栏 (固定定位，滚动变色，响应式菜单)
│   │   ├── Footer.tsx          # 页脚 (4列网格，联系信息，社交链接，订阅表单)
│   │   └── ScrollToTop.tsx     # 回到顶部按钮 (滚动>200px显示)
│   ├── shared/                 # 共享组件
│   │   └── Breadcrumb.tsx      # 面包屑导航 (props: title, currentPage)
│   ├── home/                   # 首页组件
│   │   ├── HeroSlider.tsx      # 全屏轮播 (Swiper, 数据: sliderData)
│   │   ├── Features.tsx        # 特性展示 (数据: featuresData)
│   │   ├── Services.tsx        # 服务卡片 (数据: servicesData, hover变色)
│   │   ├── CTA.tsx             # Call-to-Action 横幅
│   │   ├── Testimonials.tsx    # 客户评价轮播 (数据: testimonialsData)
│   │   ├── Stats.tsx           # 统计+服务列表 (数据: statsData, serviceListData)
│   │   └── LatestNews.tsx      # 最新文章 (数据: blogData)
│   ├── about/                  # 关于页组件
│   │   ├── Mission.tsx         # 使命愿景 (数据: missionVisionData)
│   │   ├── WhyChooseUs.tsx     # 为什么选择我们 (数据: whyChooseUsData)
│   │   ├── Statistics.tsx      # 统计指标 (数据: aboutStatsData, 渐变背景)
│   │   └── Team.tsx            # 团队成员 (数据: teamData, 社交图标hover)
│   ├── services/               # 服务页组件
│   │   ├── ServiceCards.tsx    # 服务卡片 (数据: serviceCardsData, 背景图)
│   │   ├── ProcessSteps.tsx    # 流程步骤 (数据: processStepsData, 背景图+渐变叠加)
│   │   └── AdvanceFeatures.tsx # 高级特性 (数据: advanceFeaturesData, 图标卡片)
│   └── contact/                # 联系页组件
│       ├── ContactForm.tsx     # 联系表单 (数据: contactFormInfo)
│       └── Map.tsx             # Google 地图嵌入
└── assets/
    └── images/                 # 图片资源
        ├── 1-6.jpg             # 轮播/横幅背景图
        ├── g1-12.jpg           # 内容区域图片
        ├── c1-3.jpg            # 客户头像
        └── team1-4.jpg         # 团队成员照片

路由配置

路径	页面文件	包含组件
/	routes/index.tsx	HeroSlider, Features, Services, CTA, Testimonials, Stats, LatestNews
/about	routes/about.tsx	Breadcrumb, Mission, WhyChooseUs, Statistics, Team
/services	routes/services.tsx	Breadcrumb, ServiceCards, ProcessSteps, AdvanceFeatures
/contact	routes/contact.tsx	Breadcrumb, ContactForm, Map

数据结构

所有数据集中在 src/data/siteData.ts，便于统一修改。

导航菜单

// src/data/siteData.ts
export const menuItems = [
  { name: 'Home', href: '/' },
  { name: 'About', href: '/about' },
  { name: 'Services', href: '/services' },
  { name: 'Contact', href: '/contact' },
]

轮播数据

export const sliderData = [
  {
    id: 1,
    title: 'Check Out Our Latests Tips & Tricks',
    buttonText: 'Read More',
    buttonLink: '/services',
    bgClass: 'bg-slider-1',  // 对应 index.css 中的背景类
  },
  // ...
]

服务卡片数据

export const servicesData = [
  {
    id: 1,
    icon: 'ravelry',        // Font Awesome 图标名 (fa-ravelry)
    title: 'Consulting',
    description: '...',
  },
  // ...
]

团队成员数据

export const teamData = [
  {
    id: 1,
    name: 'Micheal Wagou',
    role: 'Director',
    image: '/src/assets/images/team1.jpg',
    social: {
      facebook: '#',
      twitter: '#',
      linkedin: '#',
      google: '#',
    },
  },
  // ...
]

统计数据

// 首页统计
export const statsData = [
  { id: 1, value: 2300, label: 'Clients', suffix: '' },
  // ...
]

// 关于页统计 (带图标)
export const aboutStatsData = [
  { id: 1, value: 7242, label: 'Hours of Works', icon: 'hourglass' },
  // ...
]

联系信息

export const contactInfo = {
  address: '123 Business Street, Suite 100, New York, NY 10001, USA',
  phone: '+1 (555) 123-4567',
  email: 'contact@example.com',
}

export const contactFormInfo = {
  title: 'Leave us a Message',
  subtitle: '...',
  email: 'info@example.com',
  address: 'Corporate Office, #32841 block...',
  phone: '+121-345-6789',
}

页脚链接

export const footerLinks = {
  featured: [
    { name: 'Our People', href: '/contact' },
    // ...
  ],
  quick: [
    { name: 'Home', href: '/' },
    // ...
  ],
}

export const socialLinks = [
  { name: 'facebook', href: '#', icon: 'facebook' },
  // ...
]

主题配置

主题变量在 src/index.css 中使用 Tailwind CSS 4 的 @theme 指令定义：

@theme {
  /* 主题色 */
  --color-primary: #2e5deb;      /* 主题蓝 - 导航hover、按钮等 */
  --color-secondary: #ff5b83;    /* 次要粉红 - 强调色、图标、hover */
  --color-text: #585858;         /* 正文灰色 */
  --color-title: #1A1D2D;        /* 标题深灰 */
  --color-light-bg: #f6f6f6;     /* 浅色背景 */
  --color-services-bg: #f2f8ff;  /* 服务区块背景 */

  /* 字体 */
  --font-family-sans: 'Poppins', sans-serif;  /* 标题字体 */
  --font-family-body: 'Hind', sans-serif;     /* 正文字体 */

  /* 阴影 */
  --shadow-card: 0px 9px 24px 5px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 1px 20px 30px rgba(196, 196, 196, 0.2);
}

在组件中使用：

// Tailwind 类名直接使用
<div className="bg-primary text-secondary">
<h1 className="text-title font-sans">
<p className="text-text">

组件说明

Header (src/components/layout/Header.tsx)

• 固定定位 fixed top-0
• 滚动时背景变为白色 (scrolled 状态)
• 响应式汉堡菜单 (移动端)
• 搜索弹窗功能
• 使用 menuItems 数据

Footer (src/components/layout/Footer.tsx)

• 4 列网格布局
• 使用 contactInfo, footerLinks, socialLinks 数据
• 订阅表单 (.subscribe 样式类)

HeroSlider (src/components/home/HeroSlider.tsx)

• Swiper 轮播组件
• 配置：自动播放(5秒)、淡入淡出效果、导航箭头、分页点
• 背景图通过 bgClass 指定 CSS 类

<Swiper
  modules={[Navigation, Pagination, Autoplay, EffectFade]}
  navigation
  pagination={{ clickable: true }}
  autoplay={{ delay: 5000 }}
  effect="fade"
  loop
/>

Services (src/components/home/Services.tsx)

• 4 列服务卡片网格
• hover 时背景变为 secondary 色，文字变白
• 图标使用 Font Awesome 4.7 (通过 CDN)
• 注意：图标大小使用内联样式 style={{ fontSize: '36px' }}

Statistics (src/components/about/Statistics.tsx)

• 渐变背景 linear-gradient(100deg, #2e5deb 10%, #5360fd 50%, #ff5b83 100%)
• 数字计数动画 (IntersectionObserver 触发)
• 图标使用 Font Awesome，内联样式设置大小

Team (src/components/about/Team.tsx)

• 团队成员卡片
• 社交图标：粉色方形按钮 bg-secondary hover:bg-primary rounded
• hover 时变蓝

ProcessSteps (src/components/services/ProcessSteps.tsx)

• 背景图 + 深色渐变叠加层
• 步骤数字：粉色圆形徽章 bg-secondary rounded-full

AdvanceFeatures (src/components/services/AdvanceFeatures.tsx)

• 浅灰色背景 bg-light-bg
• 图标容器：55x55px 粉色圆角方形

Breadcrumb (src/components/shared/Breadcrumb.tsx)

<Breadcrumb title="About Us" currentPage="About" />

• 背景图在 index.css 中定义 (.breadcrum-bg)

常见修改任务

修改网站名称/Logo

// src/components/layout/Header.tsx (约第30行)
<span className="text-2xl font-bold">
  Finance <span className="text-secondary">Ideas</span>
</span>

// src/components/layout/Footer.tsx (约第20行)
<span className="text-2xl font-bold text-white">
  Finance <span className="text-secondary">Ideas</span>
</span>

修改导航菜单

// src/data/siteData.ts (第1-7行)
export const menuItems = [
  { name: 'Home', href: '/' },
  { name: 'About', href: '/about' },
  // 添加或修改菜单项...
]

修改主题色

/* src/index.css (第4-10行) */
@theme {
  --color-primary: #新蓝色;
  --color-secondary: #新粉色;
}

修改轮播内容

// src/data/siteData.ts (第9-39行)
export const sliderData = [
  {
    id: 1,
    title: '新标题',
    buttonText: '新按钮文字',
    buttonLink: '/新链接',
    bgClass: 'bg-slider-1',
  },
]

修改轮播背景图

/* src/index.css - 需要添加背景类 */
.bg-slider-1 {
  background: url('/src/assets/images/新图片.jpg');
  background-size: cover;
  background-position: center;
}

修改团队成员

// src/data/siteData.ts (第177-226行)
export const teamData = [
  {
    id: 1,
    name: '新姓名',
    role: '新职位',
    image: '/src/assets/images/team1.jpg',
    social: { facebook: '#', twitter: '#', linkedin: '#', google: '#' },
  },
]

修改联系信息

// src/data/siteData.ts (第303-316行)
export const contactInfo = {
  address: '新地址',
  phone: '新电话',
  email: '新邮箱',
}

添加新页面

1. 在 src/routes/ 创建新文件：

// src/routes/newpage.tsx
import { createFileRoute } from '@tanstack/react-router'
import Breadcrumb from '../components/shared/Breadcrumb'

export const Route = createFileRoute('/newpage')({
  component: NewPage,
})

function NewPage() {
  return (
    <>
      <Breadcrumb title="New Page" currentPage="New Page" />
      <section className="py-20">
        <div className="container mx-auto px-4">
          {/* 页面内容 */}
        </div>
      </section>
    </>
  )
}

2. 添加导航项：

// src/data/siteData.ts
export const menuItems = [
  // ...
  { name: 'New Page', href: '/newpage' },
]

3. 运行 pnpm dev 自动生成路由

修改服务卡片图标

图标使用 Font Awesome 4.7，图标名称参考：https://fontawesome.com/v4/icons/

// src/data/siteData.ts (第58-83行)
export const servicesData = [
  {
    id: 1,
    icon: 'ravelry',  // 改为其他图标名，如 'rocket', 'cogs' 等
    title: 'Consulting',
    description: '...',
  },
]

样式说明

背景图类 (src/index.css)

类名	用途	图片
ser-bg1	服务卡片背景1	g1.jpg + 暗色遮罩
ser-bg2	服务卡片背景2	g2.jpg + 暗色遮罩
ser-bg3	服务卡片背景3	g4.jpg + 暗色遮罩
breadcrum-bg	面包屑背景	6.jpg + 暗色遮罩

动画类

类名	效果
zoom	图片 hover 放大 1.1x
icon-scroll	滚动鼠标指示动画

表单类

类名	用途
contact-input	联系表单输入框
subscribe	订阅表单容器
btn-theme2	次要按钮样式

图标说明

项目使用 Font Awesome 4.7.0 (CDN)，在 index.html 中引入：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

使用方式：

<span className="fa fa-图标名" aria-hidden="true" />

注意：Tailwind 的任意值 text-[36px] 可能不生效，建议使用内联样式：

<span className="fa fa-ravelry" style={{ fontSize: '36px' }} />

安全说明

以下依赖版本已锁定以修复安全漏洞：

• React 19.2.3 - 修复 React Server Components 远程代码执行漏洞 (CVE-2025-55182)

请勿使用 ^ 或 ~ 前缀以避免自动升级到有漏洞的版本。

构建部署

pnpm build    # 构建生产版本，输出到 dist/
pnpm preview  # 预览生产版本

组件数据依赖关系

Header.tsx          ← menuItems
Footer.tsx          ← contactInfo, footerLinks, socialLinks
HeroSlider.tsx      ← sliderData
Features.tsx        ← featuresData
Services.tsx        ← servicesData
CTA.tsx             ← commonDescriptions.ctaTitle
Testimonials.tsx    ← testimonialsData
Stats.tsx           ← statsData, serviceListData, commonDescriptions
LatestNews.tsx      ← blogData
Mission.tsx         ← missionVisionData
WhyChooseUs.tsx     ← whyChooseUsData, commonDescriptions
Statistics.tsx      ← aboutStatsData
Team.tsx            ← teamData
ServiceCards.tsx    ← serviceCardsData
ProcessSteps.tsx    ← processStepsData, commonDescriptions
AdvanceFeatures.tsx ← advanceFeaturesData, commonDescriptions
ContactForm.tsx     ← contactFormInfo