530 lines
14 KiB
Markdown
530 lines
14 KiB
Markdown
# 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 引入)
|
||
|
||
## 快速开始
|
||
|
||
```bash
|
||
pnpm install
|
||
pnpm dev
|
||
```
|
||
|
||
访问 http://localhost:3000
|
||
|
||
## 目录结构
|
||
|
||
```text
|
||
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`，便于统一修改。
|
||
|
||
### 导航菜单
|
||
|
||
```typescript
|
||
// src/data/siteData.ts
|
||
export const menuItems = [
|
||
{ name: 'Home', href: '/' },
|
||
{ name: 'About', href: '/about' },
|
||
{ name: 'Services', href: '/services' },
|
||
{ name: 'Contact', href: '/contact' },
|
||
]
|
||
```
|
||
|
||
### 轮播数据
|
||
|
||
```typescript
|
||
export const sliderData = [
|
||
{
|
||
id: 1,
|
||
title: 'Check Out Our Latests Tips & Tricks',
|
||
buttonText: 'Read More',
|
||
buttonLink: '/services',
|
||
bgClass: 'bg-slider-1', // 对应 index.css 中的背景类
|
||
},
|
||
// ...
|
||
]
|
||
```
|
||
|
||
### 服务卡片数据
|
||
|
||
```typescript
|
||
export const servicesData = [
|
||
{
|
||
id: 1,
|
||
icon: 'ravelry', // Font Awesome 图标名 (fa-ravelry)
|
||
title: 'Consulting',
|
||
description: '...',
|
||
},
|
||
// ...
|
||
]
|
||
```
|
||
|
||
### 团队成员数据
|
||
|
||
```typescript
|
||
export const teamData = [
|
||
{
|
||
id: 1,
|
||
name: 'Micheal Wagou',
|
||
role: 'Director',
|
||
image: '/src/assets/images/team1.jpg',
|
||
social: {
|
||
facebook: '#',
|
||
twitter: '#',
|
||
linkedin: '#',
|
||
google: '#',
|
||
},
|
||
},
|
||
// ...
|
||
]
|
||
```
|
||
|
||
### 统计数据
|
||
|
||
```typescript
|
||
// 首页统计
|
||
export const statsData = [
|
||
{ id: 1, value: 2300, label: 'Clients', suffix: '' },
|
||
// ...
|
||
]
|
||
|
||
// 关于页统计 (带图标)
|
||
export const aboutStatsData = [
|
||
{ id: 1, value: 7242, label: 'Hours of Works', icon: 'hourglass' },
|
||
// ...
|
||
]
|
||
```
|
||
|
||
### 联系信息
|
||
|
||
```typescript
|
||
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',
|
||
}
|
||
```
|
||
|
||
### 页脚链接
|
||
|
||
```typescript
|
||
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` 指令定义：
|
||
|
||
```css
|
||
@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);
|
||
}
|
||
```
|
||
|
||
在组件中使用：
|
||
|
||
```tsx
|
||
// 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 类
|
||
|
||
```tsx
|
||
<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)
|
||
|
||
```tsx
|
||
<Breadcrumb title="About Us" currentPage="About" />
|
||
```
|
||
|
||
- 背景图在 `index.css` 中定义 (`.breadcrum-bg`)
|
||
|
||
## 常见修改任务
|
||
|
||
### 修改网站名称/Logo
|
||
|
||
```tsx
|
||
// 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>
|
||
```
|
||
|
||
### 修改导航菜单
|
||
|
||
```typescript
|
||
// src/data/siteData.ts (第1-7行)
|
||
export const menuItems = [
|
||
{ name: 'Home', href: '/' },
|
||
{ name: 'About', href: '/about' },
|
||
// 添加或修改菜单项...
|
||
]
|
||
```
|
||
|
||
### 修改主题色
|
||
|
||
```css
|
||
/* src/index.css (第4-10行) */
|
||
@theme {
|
||
--color-primary: #新蓝色;
|
||
--color-secondary: #新粉色;
|
||
}
|
||
```
|
||
|
||
### 修改轮播内容
|
||
|
||
```typescript
|
||
// src/data/siteData.ts (第9-39行)
|
||
export const sliderData = [
|
||
{
|
||
id: 1,
|
||
title: '新标题',
|
||
buttonText: '新按钮文字',
|
||
buttonLink: '/新链接',
|
||
bgClass: 'bg-slider-1',
|
||
},
|
||
]
|
||
```
|
||
|
||
### 修改轮播背景图
|
||
|
||
```css
|
||
/* src/index.css - 需要添加背景类 */
|
||
.bg-slider-1 {
|
||
background: url('/src/assets/images/新图片.jpg');
|
||
background-size: cover;
|
||
background-position: center;
|
||
}
|
||
```
|
||
|
||
### 修改团队成员
|
||
|
||
```typescript
|
||
// src/data/siteData.ts (第177-226行)
|
||
export const teamData = [
|
||
{
|
||
id: 1,
|
||
name: '新姓名',
|
||
role: '新职位',
|
||
image: '/src/assets/images/team1.jpg',
|
||
social: { facebook: '#', twitter: '#', linkedin: '#', google: '#' },
|
||
},
|
||
]
|
||
```
|
||
|
||
### 修改联系信息
|
||
|
||
```typescript
|
||
// src/data/siteData.ts (第303-316行)
|
||
export const contactInfo = {
|
||
address: '新地址',
|
||
phone: '新电话',
|
||
email: '新邮箱',
|
||
}
|
||
```
|
||
|
||
### 添加新页面
|
||
|
||
1. 在 `src/routes/` 创建新文件：
|
||
|
||
```tsx
|
||
// 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. 添加导航项：
|
||
|
||
```typescript
|
||
// src/data/siteData.ts
|
||
export const menuItems = [
|
||
// ...
|
||
{ name: 'New Page', href: '/newpage' },
|
||
]
|
||
```
|
||
|
||
3. 运行 `pnpm dev` 自动生成路由
|
||
|
||
### 修改服务卡片图标
|
||
|
||
图标使用 Font Awesome 4.7，图标名称参考：https://fontawesome.com/v4/icons/
|
||
|
||
```typescript
|
||
// 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` 中引入：
|
||
|
||
```html
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||
```
|
||
|
||
使用方式：
|
||
|
||
```tsx
|
||
<span className="fa fa-图标名" aria-hidden="true" />
|
||
```
|
||
|
||
**注意**：Tailwind 的任意值 `text-[36px]` 可能不生效，建议使用内联样式：
|
||
|
||
```tsx
|
||
<span className="fa fa-ravelry" style={{ fontSize: '36px' }} />
|
||
```
|
||
|
||
## 安全说明
|
||
|
||
以下依赖版本已锁定以修复安全漏洞：
|
||
|
||
- **React 19.2.3** - 修复 React Server Components 远程代码执行漏洞 (CVE-2025-55182)
|
||
|
||
请勿使用 `^` 或 `~` 前缀以避免自动升级到有漏洞的版本。
|
||
|
||
## 构建部署
|
||
|
||
```bash
|
||
pnpm build # 构建生产版本，输出到 dist/
|
||
pnpm preview # 预览生产版本
|
||
```
|
||
|
||
## 组件数据依赖关系
|
||
|
||
```text
|
||
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
|
||
```
|