# 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 | 类型系统 |

## 快速开始

```bash
pnpm install
pnpm dev
```

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

## 目录结构

```text
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` 中定义：

```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`：

```typescript
// 导航菜单
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 实现
- 支持自动播放、导航、分页
- 淡入淡出效果

```tsx
<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)
```tsx
<Breadcrumb title="About Us" bgImage="/src/assets/images/6.jpg" />
```

#### Team (src/components/about/Team.tsx)
- 团队成员卡片
- Hover 显示社交链接

## 常见修改任务

### 修改网站名称/Logo
```tsx
// src/components/layout/Header.tsx
<span className="text-2xl font-bold">
  Finance <span className="text-secondary">Ideas</span>
</span>
```

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

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

### 修改轮播内容
```typescript
// src/data/siteData.ts
export const sliderData = [
  {
    id: 1,
    title: '新标题',
    buttonText: '按钮文字',
    buttonLink: '/services',
    bgClass: 'bg-slider-1',
  },
]
```

### 修改团队成员
```typescript
// 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` 添加导航项

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

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

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

## Vite 配置

```typescript
// 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 漏洞。请勿使用 `^` 前缀升级。

## 构建部署

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

构建产物在 `dist/` 目录。