turingflow-brand-001

企业品牌官网模板，使用 React 19 + Vite 7 + Tailwind CSS 4 + TanStack Router 。

技术栈

技术	版本	说明
React	19.2.3 (锁定)	UI 框架
Vite	^7.0.0	构建工具
Tailwind CSS	^4.0.0	样式框架
TanStack Router	^1.114.0	文件路由
Swiper	^11.2.0	轮播组件
TypeScript	^5.7.0	类型系统

快速开始

pnpm install
pnpm dev

访问 http://localhost:3000 即可预览，支持 HMR 热更新。

目录结构

turingflow-brand-001-react/
├── index.html                      # HTML 入口
├── package.json                    # 依赖配置
├── vite.config.ts                  # Vite 配置
├── tsconfig.json                   # TypeScript 配置
├── src/
│   ├── main.tsx                    # 应用入口
│   ├── index.css                   # 全局样式 + Tailwind 主题
│   ├── routeTree.gen.ts            # 自动生成的路由树
│   ├── routes/                     # 页面路由
│   │   ├── __root.tsx              # 根布局 (Header + Footer)
│   │   ├── index.tsx               # 首页 /
│   │   ├── about.tsx               # 关于 /about
│   │   ├── services.tsx            # 服务 /services
│   │   └── contact.tsx             # 联系 /contact
│   ├── components/                 # 组件目录
│   │   ├── layout/                 # 布局组件
│   │   │   ├── Header.tsx          # 导航栏
│   │   │   ├── Footer.tsx          # 页脚
│   │   │   └── ScrollToTop.tsx     # 回到顶部
│   │   ├── home/                   # 首页组件
│   │   │   ├── HeroSlider.tsx      # 轮播 (Swiper)
│   │   │   ├── Features.tsx        # 特性展示
│   │   │   ├── Services.tsx        # 服务卡片
│   │   │   ├── CTA.tsx             # Call-to-Action
│   │   │   ├── Testimonials.tsx    # 客户评价
│   │   │   ├── Stats.tsx           # 统计数据
│   │   │   └── LatestNews.tsx      # 最新文章
│   │   ├── about/                  # 关于页组件
│   │   │   ├── Mission.tsx         # 使命愿景
│   │   │   ├── WhyChooseUs.tsx     # 为什么选择我们
│   │   │   ├── Statistics.tsx      # 统计指标
│   │   │   └── Team.tsx            # 团队成员
│   │   ├── services/               # 服务页组件
│   │   │   ├── ServiceCards.tsx    # 服务卡片
│   │   │   ├── ProcessSteps.tsx    # 流程步骤
│   │   │   └── AdvanceFeatures.tsx # 高级特性
│   │   ├── contact/                # 联系页组件
│   │   │   ├── ContactForm.tsx     # 联系表单
│   │   │   └── Map.tsx             # 地图
│   │   └── shared/                 # 共享组件
│   │       └── Breadcrumb.tsx      # 面包屑
│   ├── data/
│   │   └── siteData.ts             # 静态数据
│   └── assets/
│       └── images/                 # 图片资源
└── public/                         # 公共资源

页面路由

路径	文件	组件
/	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/index.css 中定义：

@theme {
  --color-primary: #2e5deb;      /* 主题蓝 */
  --color-secondary: #ff5b83;    /* 次要红粉 */
  --color-text: #585858;         /* 正文灰 */
  --color-title: #1A1D2D;        /* 标题深灰 */
  --color-light-bg: #f6f6f6;     /* 浅色背景 */
  --font-family-sans: 'Poppins', sans-serif;
  --font-family-body: 'Hind', sans-serif;
}

数据文件

所有静态数据集中在 src/data/siteData.ts：

// 导航菜单
export const menuItems = [...]

// 轮播数据
export const sliderData = [...]

// 服务数据
export const servicesData = [...]

// 客户评价
export const testimonialsData = [...]

// 统计数据
export const statsData = [...]

// 团队成员
export const teamData = [...]

// 联系信息
export const contactInfo = {...}

// 页脚链接
export const footerLinks = {...}

组件说明

布局组件

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

• 固定导航栏，滚动时背景变色
• 响应式汉堡菜单
• 搜索弹窗功能

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

• 4 列网格布局
• 联系信息 + 社交链接
• 新闻订阅表单

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

• 滚动超过 200px 显示
• 点击平滑滚动到顶部

首页组件

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

• 使用 Swiper 实现
• 支持自动播放、导航、分页
• 淡入淡出效果

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

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

• 数字计数动画
• 使用 IntersectionObserver 触发
• 进入视口后开始计数

内页组件

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

<Breadcrumb title="About Us" bgImage="/src/assets/images/6.jpg" />

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

• 团队成员卡片
• Hover 显示社交链接

常见修改任务

修改网站名称/Logo

// src/components/layout/Header.tsx
<span className="text-2xl font-bold">
  Finance <span className="text-secondary">Ideas</span>
</span>

修改导航菜单

// src/data/siteData.ts
export const menuItems = [
  { name: 'Home', href: '/' },
  { name: 'About', href: '/about' },
  // 添加新菜单项...
]

修改主题色

/* src/index.css */
@theme {
  --color-primary: #新颜色;
  --color-secondary: #新颜色;
}

修改轮播内容

// src/data/siteData.ts
export const sliderData = [
  {
    id: 1,
    title: '新标题',
    buttonText: '按钮文字',
    buttonLink: '/services',
    bgClass: 'bg-slider-1',
  },
]

修改团队成员

// src/data/siteData.ts
export const teamData = [
  {
    id: 1,
    name: '姓名',
    role: '职位',
    image: '/src/assets/images/team1.jpg',
    social: { facebook: '#', twitter: '#', linkedin: '#' },
  },
]

添加新页面

1. 在 src/routes/ 创建新文件 newpage.tsx
2. 使用 createFileRoute 定义路由
3. 在 menuItems 添加导航项

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

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

function NewPage() {
  return <div>新页面内容</div>
}

Vite 配置

// vite.config.ts
export default defineConfig({
  plugins: [
    TanStackRouterVite({ target: 'react', autoCodeSplitting: true }),
    react(),
    tailwindcss(),
  ],
  server: {
    port: 3000,
    host: '0.0.0.0',
    allowedHosts: true,
  },
})

图片资源

文件	用途
1-6.jpg	轮播/横幅背景
g1-12.jpg	内容图片
c1-3.jpg	客户头像
team1-4.jpg	团队成员

安全说明

React 版本已锁定为 19.2.3，修复 CVE-2025-55182 漏洞。请勿使用 ^ 前缀升级。

构建部署

pnpm build    # 构建生产版本
pnpm preview  # 预览生产版本

构建产物在 dist/ 目录。