first commit
This commit is contained in:
“dongming”
529
README.md
Normal file
529
README.md
Normal file
@@ -0,0 +1,529 @@
|
||||
# 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
|
||||
```
|
||||
Reference in New Issue
Block a user