first commit
This commit is contained in:
“dongming”
548
README.md
548
README.md
@@ -1,17 +1,15 @@
|
|||||||
# turingflow-brand-001
|
# turingflow-brand-001
|
||||||
|
|
||||||
企业品牌官网模板，使用 React 19 + Vite 7 + Tailwind CSS 4 + TanStack Router 。
|
企业品牌官网模板，适用于企业官网、商务咨询、金融服务等展示型网站。
|
||||||
|
|
||||||
## 技术栈
|
## 技术栈
|
||||||
|
|
||||||
| 技术 | 版本 | 说明 |
|
- React 19.2.3 (已锁定版本，修复 CVE-2025-55182 漏洞)
|
||||||
|------|------|------|
|
- Vite 7 (构建工具)
|
||||||
| React | 19.2.3 (锁定) | UI 框架 |
|
- Tailwind CSS 4 (使用 `@theme` 指令定义主题变量)
|
||||||
| Vite | ^7.0.0 | 构建工具 |
|
- TanStack Router (文件路由，自动代码分割)
|
||||||
| Tailwind CSS | ^4.0.0 | 样式框架 |
|
- Swiper 11 (轮播组件)
|
||||||
| TanStack Router | ^1.114.0 | 文件路由 |
|
- Font Awesome 4.7 (图标，CDN 引入)
|
||||||
| Swiper | ^11.2.0 | 轮播组件 |
|
|
||||||
| TypeScript | ^5.7.0 | 类型系统 |
|
|
||||||
|
|
||||||
## 快速开始
|
## 快速开始
|
||||||
|
|
||||||
@@ -20,139 +18,240 @@ pnpm install
|
|||||||
pnpm dev
|
pnpm dev
|
||||||
```
|
```
|
||||||
|
|
||||||
访问 <http://localhost:3000> 即可预览，支持 HMR 热更新。
|
访问 http://localhost:3000
|
||||||
|
|
||||||
## 目录结构
|
## 目录结构
|
||||||
|
|
||||||
```text
|
```text
|
||||||
turingflow-brand-001-react/
|
src/
|
||||||
├── index.html # HTML 入口
|
├── main.tsx # 应用入口，挂载到 #root
|
||||||
├── package.json # 依赖配置
|
├── index.css # 全局样式 + Tailwind @theme 主题变量
|
||||||
├── vite.config.ts # Vite 配置
|
├── routeTree.gen.ts # 自动生成的路由树（勿手动修改）
|
||||||
├── tsconfig.json # TypeScript 配置
|
├── data/
|
||||||
├── src/
|
│ └── siteData.ts # 所有静态数据（菜单、轮播、服务、团队等）
|
||||||
│ ├── main.tsx # 应用入口
|
├── routes/ # 页面路由（TanStack Router 文件路由）
|
||||||
│ ├── index.css # 全局样式 + Tailwind 主题
|
│ ├── __root.tsx # 根布局 (Header + Outlet + Footer + ScrollToTop)
|
||||||
│ ├── routeTree.gen.ts # 自动生成的路由树
|
│ ├── index.tsx # 首页 /
|
||||||
│ ├── routes/ # 页面路由
|
│ ├── about.tsx # 关于页 /about
|
||||||
│ │ ├── __root.tsx # 根布局 (Header + Footer)
|
│ ├── services.tsx # 服务页 /services
|
||||||
│ │ ├── index.tsx # 首页 /
|
│ └── contact.tsx # 联系页 /contact
|
||||||
│ │ ├── about.tsx # 关于 /about
|
├── components/
|
||||||
│ │ ├── services.tsx # 服务 /services
|
│ ├── layout/ # 布局组件
|
||||||
│ │ └── contact.tsx # 联系 /contact
|
│ │ ├── Header.tsx # 导航栏 (固定定位，滚动变色，响应式菜单)
|
||||||
│ ├── components/ # 组件目录
|
│ │ ├── Footer.tsx # 页脚 (4列网格，联系信息，社交链接，订阅表单)
|
||||||
│ │ ├── layout/ # 布局组件
|
│ │ └── ScrollToTop.tsx # 回到顶部按钮 (滚动>200px显示)
|
||||||
│ │ │ ├── Header.tsx # 导航栏
|
│ ├── shared/ # 共享组件
|
||||||
│ │ │ ├── Footer.tsx # 页脚
|
│ │ └── Breadcrumb.tsx # 面包屑导航 (props: title, currentPage)
|
||||||
│ │ │ └── ScrollToTop.tsx # 回到顶部
|
│ ├── home/ # 首页组件
|
||||||
│ │ ├── home/ # 首页组件
|
│ │ ├── HeroSlider.tsx # 全屏轮播 (Swiper, 数据: sliderData)
|
||||||
│ │ │ ├── HeroSlider.tsx # 轮播 (Swiper)
|
│ │ ├── Features.tsx # 特性展示 (数据: featuresData)
|
||||||
│ │ │ ├── Features.tsx # 特性展示
|
│ │ ├── Services.tsx # 服务卡片 (数据: servicesData, hover变色)
|
||||||
│ │ │ ├── Services.tsx # 服务卡片
|
│ │ ├── CTA.tsx # Call-to-Action 横幅
|
||||||
│ │ │ ├── CTA.tsx # Call-to-Action
|
│ │ ├── Testimonials.tsx # 客户评价轮播 (数据: testimonialsData)
|
||||||
│ │ │ ├── Testimonials.tsx # 客户评价
|
│ │ ├── Stats.tsx # 统计+服务列表 (数据: statsData, serviceListData)
|
||||||
│ │ │ ├── Stats.tsx # 统计数据
|
│ │ └── LatestNews.tsx # 最新文章 (数据: blogData)
|
||||||
│ │ │ └── LatestNews.tsx # 最新文章
|
│ ├── about/ # 关于页组件
|
||||||
│ │ ├── about/ # 关于页组件
|
│ │ ├── Mission.tsx # 使命愿景 (数据: missionVisionData)
|
||||||
│ │ │ ├── Mission.tsx # 使命愿景
|
│ │ ├── WhyChooseUs.tsx # 为什么选择我们 (数据: whyChooseUsData)
|
||||||
│ │ │ ├── WhyChooseUs.tsx # 为什么选择我们
|
│ │ ├── Statistics.tsx # 统计指标 (数据: aboutStatsData, 渐变背景)
|
||||||
│ │ │ ├── Statistics.tsx # 统计指标
|
│ │ └── Team.tsx # 团队成员 (数据: teamData, 社交图标hover)
|
||||||
│ │ │ └── Team.tsx # 团队成员
|
│ ├── services/ # 服务页组件
|
||||||
│ │ ├── services/ # 服务页组件
|
│ │ ├── ServiceCards.tsx # 服务卡片 (数据: serviceCardsData, 背景图)
|
||||||
│ │ │ ├── ServiceCards.tsx # 服务卡片
|
│ │ ├── ProcessSteps.tsx # 流程步骤 (数据: processStepsData, 背景图+渐变叠加)
|
||||||
│ │ │ ├── ProcessSteps.tsx # 流程步骤
|
│ │ └── AdvanceFeatures.tsx # 高级特性 (数据: advanceFeaturesData, 图标卡片)
|
||||||
│ │ │ └── AdvanceFeatures.tsx # 高级特性
|
│ └── contact/ # 联系页组件
|
||||||
│ │ ├── contact/ # 联系页组件
|
│ ├── ContactForm.tsx # 联系表单 (数据: contactFormInfo)
|
||||||
│ │ │ ├── ContactForm.tsx # 联系表单
|
│ └── Map.tsx # Google 地图嵌入
|
||||||
│ │ │ └── Map.tsx # 地图
|
└── assets/
|
||||||
│ │ └── shared/ # 共享组件
|
└── images/ # 图片资源
|
||||||
│ │ └── Breadcrumb.tsx # 面包屑
|
├── 1-6.jpg # 轮播/横幅背景图
|
||||||
│ ├── data/
|
├── g1-12.jpg # 内容区域图片
|
||||||
│ │ └── siteData.ts # 静态数据
|
├── c1-3.jpg # 客户头像
|
||||||
│ └── assets/
|
└── team1-4.jpg # 团队成员照片
|
||||||
│ └── images/ # 图片资源
|
|
||||||
└── public/ # 公共资源
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## 页面路由
|
## 路由配置
|
||||||
|
|
||||||
| 路径 | 文件 | 组件 |
|
| 路径 | 页面文件 | 包含组件 |
|
||||||
|------|------|------|
|
|------|----------|----------|
|
||||||
| `/` | routes/index.tsx | HeroSlider, Features, Services, CTA, Testimonials, Stats, LatestNews |
|
| `/` | routes/index.tsx | HeroSlider, Features, Services, CTA, Testimonials, Stats, LatestNews |
|
||||||
| `/about` | routes/about.tsx | Breadcrumb, Mission, WhyChooseUs, Statistics, Team |
|
| `/about` | routes/about.tsx | Breadcrumb, Mission, WhyChooseUs, Statistics, Team |
|
||||||
| `/services` | routes/services.tsx | Breadcrumb, ServiceCards, ProcessSteps, AdvanceFeatures |
|
| `/services` | routes/services.tsx | Breadcrumb, ServiceCards, ProcessSteps, AdvanceFeatures |
|
||||||
| `/contact` | routes/contact.tsx | Breadcrumb, ContactForm, Map |
|
| `/contact` | routes/contact.tsx | Breadcrumb, ContactForm, Map |
|
||||||
|
|
||||||
## 主题配置
|
## 数据结构
|
||||||
|
|
||||||
主题色和变量在 `src/index.css` 中定义：
|
所有数据集中在 `src/data/siteData.ts`，便于统一修改。
|
||||||
|
|
||||||
```css
|
### 导航菜单
|
||||||
@theme {
|
|
||||||
--color-primary: #2e5deb; /* 主题蓝 */
|
```typescript
|
||||||
--color-secondary: #ff5b83; /* 次要红粉 */
|
// src/data/siteData.ts
|
||||||
--color-text: #585858; /* 正文灰 */
|
export const menuItems = [
|
||||||
--color-title: #1A1D2D; /* 标题深灰 */
|
{ name: 'Home', href: '/' },
|
||||||
--color-light-bg: #f6f6f6; /* 浅色背景 */
|
{ name: 'About', href: '/about' },
|
||||||
--font-family-sans: 'Poppins', sans-serif;
|
{ name: 'Services', href: '/services' },
|
||||||
--font-family-body: 'Hind', sans-serif;
|
{ 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',
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
## 数据文件
|
### 页脚链接
|
||||||
|
|
||||||
所有静态数据集中在 `src/data/siteData.ts`：
|
|
||||||
|
|
||||||
```typescript
|
```typescript
|
||||||
// 导航菜单
|
export const footerLinks = {
|
||||||
export const menuItems = [...]
|
featured: [
|
||||||
|
{ name: 'Our People', href: '/contact' },
|
||||||
|
// ...
|
||||||
|
],
|
||||||
|
quick: [
|
||||||
|
{ name: 'Home', href: '/' },
|
||||||
|
// ...
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
// 轮播数据
|
export const socialLinks = [
|
||||||
export const sliderData = [...]
|
{ name: 'facebook', href: '#', icon: 'facebook' },
|
||||||
|
// ...
|
||||||
|
]
|
||||||
|
```
|
||||||
|
|
||||||
// 服务数据
|
## 主题配置
|
||||||
export const servicesData = [...]
|
|
||||||
|
|
||||||
// 客户评价
|
主题变量在 `src/index.css` 中使用 Tailwind CSS 4 的 `@theme` 指令定义：
|
||||||
export const testimonialsData = [...]
|
|
||||||
|
|
||||||
// 统计数据
|
```css
|
||||||
export const statsData = [...]
|
@theme {
|
||||||
|
/* 主题色 */
|
||||||
|
--color-primary: #2e5deb; /* 主题蓝 - 导航hover、按钮等 */
|
||||||
|
--color-secondary: #ff5b83; /* 次要粉红 - 强调色、图标、hover */
|
||||||
|
--color-text: #585858; /* 正文灰色 */
|
||||||
|
--color-title: #1A1D2D; /* 标题深灰 */
|
||||||
|
--color-light-bg: #f6f6f6; /* 浅色背景 */
|
||||||
|
--color-services-bg: #f2f8ff; /* 服务区块背景 */
|
||||||
|
|
||||||
// 团队成员
|
/* 字体 */
|
||||||
export const teamData = [...]
|
--font-family-sans: 'Poppins', sans-serif; /* 标题字体 */
|
||||||
|
--font-family-body: 'Hind', sans-serif; /* 正文字体 */
|
||||||
|
|
||||||
// 联系信息
|
/* 阴影 */
|
||||||
export const contactInfo = {...}
|
--shadow-card: 0px 9px 24px 5px rgba(0, 0, 0, 0.04);
|
||||||
|
--shadow-card-hover: 1px 20px 30px rgba(196, 196, 196, 0.2);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
// 页脚链接
|
在组件中使用：
|
||||||
export const footerLinks = {...}
|
|
||||||
|
```tsx
|
||||||
|
// Tailwind 类名直接使用
|
||||||
|
<div className="bg-primary text-secondary">
|
||||||
|
<h1 className="text-title font-sans">
|
||||||
|
<p className="text-text">
|
||||||
```
|
```
|
||||||
|
|
||||||
## 组件说明
|
## 组件说明
|
||||||
|
|
||||||
### 布局组件
|
### Header (src/components/layout/Header.tsx)
|
||||||
|
|
||||||
#### Header (src/components/layout/Header.tsx)
|
- 固定定位 `fixed top-0`
|
||||||
- 固定导航栏，滚动时背景变色
|
- 滚动时背景变为白色 (`scrolled` 状态)
|
||||||
- 响应式汉堡菜单
|
- 响应式汉堡菜单 (移动端)
|
||||||
- 搜索弹窗功能
|
- 搜索弹窗功能
|
||||||
|
- 使用 `menuItems` 数据
|
||||||
|
|
||||||
|
### Footer (src/components/layout/Footer.tsx)
|
||||||
|
|
||||||
#### Footer (src/components/layout/Footer.tsx)
|
|
||||||
- 4 列网格布局
|
- 4 列网格布局
|
||||||
- 联系信息 + 社交链接
|
- 使用 `contactInfo`, `footerLinks`, `socialLinks` 数据
|
||||||
- 新闻订阅表单
|
- 订阅表单 (`.subscribe` 样式类)
|
||||||
|
|
||||||
#### ScrollToTop (src/components/layout/ScrollToTop.tsx)
|
### HeroSlider (src/components/home/HeroSlider.tsx)
|
||||||
- 滚动超过 200px 显示
|
|
||||||
- 点击平滑滚动到顶部
|
|
||||||
|
|
||||||
### 首页组件
|
- Swiper 轮播组件
|
||||||
|
- 配置：自动播放(5秒)、淡入淡出效果、导航箭头、分页点
|
||||||
#### HeroSlider (src/components/home/HeroSlider.tsx)
|
- 背景图通过 `bgClass` 指定 CSS 类
|
||||||
- 使用 Swiper 实现
|
|
||||||
- 支持自动播放、导航、分页
|
|
||||||
- 淡入淡出效果
|
|
||||||
|
|
||||||
```tsx
|
```tsx
|
||||||
<Swiper
|
<Swiper
|
||||||
@@ -162,136 +261,269 @@ export const footerLinks = {...}
|
|||||||
autoplay={{ delay: 5000 }}
|
autoplay={{ delay: 5000 }}
|
||||||
effect="fade"
|
effect="fade"
|
||||||
loop
|
loop
|
||||||
>
|
/>
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Stats (src/components/home/Stats.tsx)
|
### Services (src/components/home/Services.tsx)
|
||||||
- 数字计数动画
|
|
||||||
- 使用 IntersectionObserver 触发
|
|
||||||
- 进入视口后开始计数
|
|
||||||
|
|
||||||
### 内页组件
|
- 4 列服务卡片网格
|
||||||
|
- hover 时背景变为 secondary 色，文字变白
|
||||||
|
- 图标使用 Font Awesome 4.7 (通过 CDN)
|
||||||
|
- **注意**：图标大小使用内联样式 `style={{ fontSize: '36px' }}`
|
||||||
|
|
||||||
#### Breadcrumb (src/components/shared/Breadcrumb.tsx)
|
### Statistics (src/components/about/Statistics.tsx)
|
||||||
```tsx
|
|
||||||
<Breadcrumb title="About Us" bgImage="/src/assets/images/6.jpg" />
|
- 渐变背景 `linear-gradient(100deg, #2e5deb 10%, #5360fd 50%, #ff5b83 100%)`
|
||||||
```
|
- 数字计数动画 (IntersectionObserver 触发)
|
||||||
|
- 图标使用 Font Awesome，内联样式设置大小
|
||||||
|
|
||||||
|
### Team (src/components/about/Team.tsx)
|
||||||
|
|
||||||
#### Team (src/components/about/Team.tsx)
|
|
||||||
- 团队成员卡片
|
- 团队成员卡片
|
||||||
- Hover 显示社交链接
|
- 社交图标：粉色方形按钮 `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
|
### 修改网站名称/Logo
|
||||||
|
|
||||||
```tsx
|
```tsx
|
||||||
// src/components/layout/Header.tsx
|
// src/components/layout/Header.tsx (约第30行)
|
||||||
<span className="text-2xl font-bold">
|
<span className="text-2xl font-bold">
|
||||||
Finance <span className="text-secondary">Ideas</span>
|
Finance <span className="text-secondary">Ideas</span>
|
||||||
</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
|
```typescript
|
||||||
// src/data/siteData.ts
|
// src/data/siteData.ts (第1-7行)
|
||||||
export const menuItems = [
|
export const menuItems = [
|
||||||
{ name: 'Home', href: '/' },
|
{ name: 'Home', href: '/' },
|
||||||
{ name: 'About', href: '/about' },
|
{ name: 'About', href: '/about' },
|
||||||
// 添加新菜单项...
|
// 添加或修改菜单项...
|
||||||
]
|
]
|
||||||
```
|
```
|
||||||
|
|
||||||
### 修改主题色
|
### 修改主题色
|
||||||
|
|
||||||
```css
|
```css
|
||||||
/* src/index.css */
|
/* src/index.css (第4-10行) */
|
||||||
@theme {
|
@theme {
|
||||||
--color-primary: #新颜色;
|
--color-primary: #新蓝色;
|
||||||
--color-secondary: #新颜色;
|
--color-secondary: #新粉色;
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### 修改轮播内容
|
### 修改轮播内容
|
||||||
|
|
||||||
```typescript
|
```typescript
|
||||||
// src/data/siteData.ts
|
// src/data/siteData.ts (第9-39行)
|
||||||
export const sliderData = [
|
export const sliderData = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
title: '新标题',
|
title: '新标题',
|
||||||
buttonText: '按钮文字',
|
buttonText: '新按钮文字',
|
||||||
buttonLink: '/services',
|
buttonLink: '/新链接',
|
||||||
bgClass: 'bg-slider-1',
|
bgClass: 'bg-slider-1',
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### 修改轮播背景图
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* src/index.css - 需要添加背景类 */
|
||||||
|
.bg-slider-1 {
|
||||||
|
background: url('/src/assets/images/新图片.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
### 修改团队成员
|
### 修改团队成员
|
||||||
|
|
||||||
```typescript
|
```typescript
|
||||||
// src/data/siteData.ts
|
// src/data/siteData.ts (第177-226行)
|
||||||
export const teamData = [
|
export const teamData = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
name: '姓名',
|
name: '新姓名',
|
||||||
role: '职位',
|
role: '新职位',
|
||||||
image: '/src/assets/images/team1.jpg',
|
image: '/src/assets/images/team1.jpg',
|
||||||
social: { facebook: '#', twitter: '#', linkedin: '#' },
|
social: { facebook: '#', twitter: '#', linkedin: '#', google: '#' },
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### 修改联系信息
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// src/data/siteData.ts (第303-316行)
|
||||||
|
export const contactInfo = {
|
||||||
|
address: '新地址',
|
||||||
|
phone: '新电话',
|
||||||
|
email: '新邮箱',
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
### 添加新页面
|
### 添加新页面
|
||||||
1. 在 `src/routes/` 创建新文件 `newpage.tsx`
|
|
||||||
2. 使用 `createFileRoute` 定义路由
|
1. 在 `src/routes/` 创建新文件：
|
||||||
3. 在 `menuItems` 添加导航项
|
|
||||||
|
|
||||||
```tsx
|
```tsx
|
||||||
// src/routes/newpage.tsx
|
// src/routes/newpage.tsx
|
||||||
import { createFileRoute } from '@tanstack/react-router'
|
import { createFileRoute } from '@tanstack/react-router'
|
||||||
|
import Breadcrumb from '../components/shared/Breadcrumb'
|
||||||
|
|
||||||
export const Route = createFileRoute('/newpage')({
|
export const Route = createFileRoute('/newpage')({
|
||||||
component: NewPage,
|
component: NewPage,
|
||||||
})
|
})
|
||||||
|
|
||||||
function NewPage() {
|
function NewPage() {
|
||||||
return <div>新页面内容</div>
|
return (
|
||||||
|
<>
|
||||||
|
<Breadcrumb title="New Page" currentPage="New Page" />
|
||||||
|
<section className="py-20">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
{/* 页面内容 */}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
## Vite 配置
|
2. 添加导航项：
|
||||||
|
|
||||||
```typescript
|
```typescript
|
||||||
// vite.config.ts
|
// src/data/siteData.ts
|
||||||
export default defineConfig({
|
export const menuItems = [
|
||||||
plugins: [
|
// ...
|
||||||
TanStackRouterVite({ target: 'react', autoCodeSplitting: true }),
|
{ name: 'New Page', href: '/newpage' },
|
||||||
react(),
|
]
|
||||||
tailwindcss(),
|
|
||||||
],
|
|
||||||
server: {
|
|
||||||
port: 3000,
|
|
||||||
host: '0.0.0.0',
|
|
||||||
allowedHosts: true,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## 图片资源
|
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 + 暗色遮罩 |
|
||||||
|
|
||||||
|
### 动画类
|
||||||
|
|
||||||
|
| 类名 | 效果 |
|
||||||
|------|------|
|
|------|------|
|
||||||
| 1-6.jpg | 轮播/横幅背景 |
|
| `zoom` | 图片 hover 放大 1.1x |
|
||||||
| g1-12.jpg | 内容图片 |
|
| `icon-scroll` | 滚动鼠标指示动画 |
|
||||||
| c1-3.jpg | 客户头像 |
|
|
||||||
| team1-4.jpg | 团队成员 |
|
### 表单类
|
||||||
|
|
||||||
|
| 类名 | 用途 |
|
||||||
|
|------|------|
|
||||||
|
| `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，修复 CVE-2025-55182 漏洞。请勿使用 `^` 前缀升级。
|
以下依赖版本已锁定以修复安全漏洞：
|
||||||
|
|
||||||
|
- **React 19.2.3** - 修复 React Server Components 远程代码执行漏洞 (CVE-2025-55182)
|
||||||
|
|
||||||
|
请勿使用 `^` 或 `~` 前缀以避免自动升级到有漏洞的版本。
|
||||||
|
|
||||||
## 构建部署
|
## 构建部署
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
pnpm build # 构建生产版本
|
pnpm build # 构建生产版本，输出到 dist/
|
||||||
pnpm preview # 预览生产版本
|
pnpm preview # 预览生产版本
|
||||||
```
|
```
|
||||||
|
|
||||||
构建产物在 `dist/` 目录。
|
## 组件数据依赖关系
|
||||||
|
|
||||||
|
```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