first commit

README.md

@@ -1,17 +1,15 @@
 # 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 | 类型系统 |
+- React 19.2.3 (已锁定版本，修复 CVE-2025-55182 漏洞)
+- Vite 7 (构建工具)
+- Tailwind CSS 4 (使用 `@theme` 指令定义主题变量)
+- TanStack Router (文件路由，自动代码分割)
+- Swiper 11 (轮播组件)
+- Font Awesome 4.7 (图标，CDN 引入)
 
 ## 快速开始
 
@@ -20,139 +18,240 @@ pnpm install
 pnpm dev
 ```
 
-访问 <http://localhost:3000> 即可预览，支持 HMR 热更新。
+访问 http://localhost:3000
 
 ## 目录结构
 
 ```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/                         # 公共资源
+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/index.css` 中定义：
+所有数据集中在 `src/data/siteData.ts`，便于统一修改。
 
-```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;
+### 导航菜单
+
+```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',
 }
 ```
 
-## 数据文件
-
-所有静态数据集中在 `src/data/siteData.ts`：
+### 页脚链接
 
 ```typescript
-// 导航菜单
-export const menuItems = [...]
+export const footerLinks = {
+  featured: [
+    { name: 'Our People', href: '/contact' },
+    // ...
+  ],
+  quick: [
+    { name: 'Home', href: '/' },
+    // ...
+  ],
+}
 
-// 轮播数据
-export const sliderData = [...]
+export const socialLinks = [
+  { name: 'facebook', href: '#', icon: 'facebook' },
+  // ...
+]
+```
 
-// 服务数据
-export const servicesData = [...]
+## 主题配置
 
-// 客户评价
-export const testimonialsData = [...]
+主题变量在 `src/index.css` 中使用 Tailwind CSS 4 的 `@theme` 指令定义：
 
-// 统计数据
-export const statsData = [...]
+```css
+@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 列网格布局
-- 联系信息 + 社交链接
-- 新闻订阅表单
+- 使用 `contactInfo`, `footerLinks`, `socialLinks` 数据
+- 订阅表单 (`.subscribe` 样式类)
 
-#### ScrollToTop (src/components/layout/ScrollToTop.tsx)
-- 滚动超过 200px 显示
-- 点击平滑滚动到顶部
+### HeroSlider (src/components/home/HeroSlider.tsx)
 
-### 首页组件
-
-#### HeroSlider (src/components/home/HeroSlider.tsx)
-- 使用 Swiper 实现
-- 支持自动播放、导航、分页
-- 淡入淡出效果
+- Swiper 轮播组件
+- 配置：自动播放(5秒)、淡入淡出效果、导航箭头、分页点
+- 背景图通过 `bgClass` 指定 CSS 类
 
 ```tsx
 <Swiper
@@ -162,136 +261,269 @@ export const footerLinks = {...}
   autoplay={{ delay: 5000 }}
   effect="fade"
   loop
->
+/>
 ```
 
-#### Stats (src/components/home/Stats.tsx)
-- 数字计数动画
-- 使用 IntersectionObserver 触发
-- 进入视口后开始计数
+### Services (src/components/home/Services.tsx)
 
-### 内页组件
+- 4 列服务卡片网格
+- hover 时背景变为 secondary 色，文字变白
+- 图标使用 Font Awesome 4.7 (通过 CDN)
+- **注意**：图标大小使用内联样式 `style={{ fontSize: '36px' }}`
 
-#### Breadcrumb (src/components/shared/Breadcrumb.tsx)
-```tsx
-<Breadcrumb title="About Us" bgImage="/src/assets/images/6.jpg" />
-```
+### Statistics (src/components/about/Statistics.tsx)
+
+- 渐变背景 `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
+
 ```tsx
-// src/components/layout/Header.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
+// src/data/siteData.ts (第1-7行)
 export const menuItems = [
   { name: 'Home', href: '/' },
   { name: 'About', href: '/about' },
-  // 添加新菜单项...
+  // 添加或修改菜单项...
 ]
 ```
 
 ### 修改主题色
+
 ```css
-/* src/index.css */
+/* src/index.css (第4-10行) */
 @theme {
-  --color-primary: #新颜色;
-  --color-secondary: #新颜色;
+  --color-primary: #新蓝色;
+  --color-secondary: #新粉色;
 }
 ```
 
 ### 修改轮播内容
+
 ```typescript
-// src/data/siteData.ts
+// src/data/siteData.ts (第9-39行)
 export const sliderData = [
   {
     id: 1,
     title: '新标题',
-    buttonText: '按钮文字',
-    buttonLink: '/services',
+    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
+// src/data/siteData.ts (第177-226行)
 export const teamData = [
   {
     id: 1,
-    name: '姓名',
-    role: '职位',
+    name: '新姓名',
+    role: '新职位',
     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` 定义路由
-3. 在 `menuItems` 添加导航项
+
+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 <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
-// vite.config.ts
-export default defineConfig({
-  plugins: [
-    TanStackRouterVite({ target: 'react', autoCodeSplitting: true }),
-    react(),
-    tailwindcss(),
-  ],
-  server: {
-    port: 3000,
-    host: '0.0.0.0',
-    allowedHosts: true,
-  },
-})
+// 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 + 暗色遮罩 |
+
+### 动画类
+
+| 类名 | 效果 |
 |------|------|
-| 1-6.jpg | 轮播/横幅背景 |
-| g1-12.jpg | 内容图片 |
-| c1-3.jpg | 客户头像 |
-| team1-4.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，修复 CVE-2025-55182 漏洞。请勿使用 `^` 前缀升级。
+以下依赖版本已锁定以修复安全漏洞：
+
+- **React 19.2.3** - 修复 React Server Components 远程代码执行漏洞 (CVE-2025-55182)
+
+请勿使用 `^` 或 `~` 前缀以避免自动升级到有漏洞的版本。
 
 ## 构建部署
 
 ```bash
-pnpm build    # 构建生产版本
+pnpm build    # 构建生产版本，输出到 dist/
 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
+```