diff --git a/docs/plans/2026-02-26-website-optimization-design.md b/docs/plans/2026-02-26-website-optimization-design.md new file mode 100644 index 0000000..84b87b2 --- /dev/null +++ b/docs/plans/2026-02-26-website-optimization-design.md @@ -0,0 +1,120 @@ +# 网站优化重构设计方案 + +**日期**: 2026-02-26 + +--- + +## 一、设计背景 + +当前网站存在以下问题： +1. 交互模式不统一：服务使用模态框，产品和案例使用独立页面 +2. 首页 About Section 与 `/about` 页面内容高度重复 +3. 导航链接不一致：混合使用锚点链接和页面链接 +4. 配色方案不统一：同时使用品牌红和紫色 +5. 首页缺少案例展示区块 + +--- + +## 二、设计决策 + +### 2.1 交互模式 + +**决策**: 统一使用独立页面，无弹窗交互 + +| 页面类型 | 首页展示 | 独立页面 | 交互方式 | +|---------|---------|---------|---------| +| 服务 | 概览卡片 | `/services/[id]` | 点击跳转 | +| 产品 | 概览卡片 | `/products/[id]` | 点击跳转 | +| 案例 | 概览卡片 | `/cases/[id]` | 点击跳转 | +| 新闻 | 概览卡片 | `/news/[slug]` | 点击跳转 | +| 关于 | 简短介绍 | `/about` | 点击跳转 | + +### 2.2 服务详情页设计 + +**决策**: 采用故事化叙事风格 + +页面结构： +``` +您可能面临的挑战 → 我们如何帮助您 → 服务流程 → 您将获得的改变 → 相关案例 → CTA +``` + +### 2.3 首页 About Section + +**决策**: 精简版 + 核心数据 + CTA + +内容： +- 品牌口号 +- 品牌故事摘要（精简版） +- 核心数据（STATS） +- "了解更多"按钮跳转到 `/about` + +### 2.4 首页 Cases Section + +**决策**: 新增，展示3个精选案例 + +### 2.5 导航结构 + +**决策**: 全部改为独立页面链接 + +``` +首页 → / +核心业务 → /services +产品服务 → /products +关于我们 → /about +新闻动态 → /news +联系我们 → /contact +``` + +### 2.6 配色方案 + +**决策**: 统一使用品牌红色系，移除紫色 + +配色体系： +``` +主色调 +├── 品牌红 #C41E3A（主强调色） +├── 深红 #A01830（hover状态） +└── 浅红 #FEF2F4（背景色） + +中性色 +├── 主文字 #1C1C1C +├── 次文字 #5C5C5C +├── 辅助文字 #718096 +├── 边框 #E5E5E5 +└── 背景 #FAFAFA / #F5F7FA +``` + +--- + +## 三、首页结构 + +调整后的首页 Section 顺序： + +| 序号 | Section | 说明 | +|------|---------|------| +| 1 | Hero | 品牌展示 + 核心数据 | +| 2 | Services | 4个服务卡片（点击跳转详情页） | +| 3 | Products | 3个产品卡片（点击跳转详情页） | +| 4 | Cases | 3个精选案例（新增） | +| 5 | About | 精简版品牌故事 + 核心数据 | +| 6 | News | 最新动态 | +| 7 | Contact | 联系表单 | + +--- + +## 四、任务清单 + +### 高优先级 +1. 创建服务详情页 `/services/[id]` +2. 删除服务详情模态框 +3. 精简首页 About Section +4. 首页新增 Cases Section + +### 中优先级 +5. 更新导航链接 +6. 统一配色方案 +7. 创建服务列表页 `/services` + +### 低优先级 +8. 优化 Footer 链接结构 +9. 检查所有页面的设计风格一致性 diff --git a/docs/plans/2026-02-26-website-optimization-implementation.md b/docs/plans/2026-02-26-website-optimization-implementation.md new file mode 100644 index 0000000..4967355 --- /dev/null +++ b/docs/plans/2026-02-26-website-optimization-implementation.md @@ -0,0 +1,1630 @@ +# 网站优化重构实施计划 + +> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task. + +**Goal:** 统一网站交互模式、优化首页结构、统一配色方案，提升用户体验和品牌一致性。 + +**Architecture:** 采用 Next.js App Router 架构，服务详情页使用故事化叙事风格，移除模态框交互，统一使用独立页面。首页精简 About Section，新增 Cases Section。 + +**Tech Stack:** Next.js 16, React 19, TypeScript, Tailwind CSS, Framer Motion + +--- + +## 实施阶段概览 + +### 阶段 1: 服务详情页重构（高优先级） +- 创建服务详情页面 +- 删除服务详情模态框 +- 修改服务卡片添加链接 + +### 阶段 2: 首页结构优化（高优先级） +- 精简首页 About Section +- 新增首页 Cases Section +- 更新首页 Section 顺序 + +### 阶段 3: 导航与链接统一（中优先级） +- 更新导航链接 +- 创建服务列表页 +- 更新 Footer 链接 + +### 阶段 4: 配色方案统一（中优先级） +- 移除紫色，统一使用品牌红 +- 更新所有相关组件 + +--- + +## 阶段 1: 服务详情页重构 + +### Task 1.1: 创建服务详情页面 + +**Files:** +- Create: `src/app/(marketing)/services/[id]/page.tsx` +- Create: `src/app/(marketing)/services/[id]/client.tsx` + +**Step 1: 创建服务详情客户端组件** + +```tsx +// src/app/(marketing)/services/[id]/client.tsx +'use client'; + +import { useEffect, useRef, useState } from 'react'; +import Link from 'next/link'; +import { Button } from '@/components/ui/button'; +import { Badge } from '@/components/ui/badge'; +import { Card, CardContent } from '@/components/ui/card'; +import { PageHeader } from '@/components/ui/page-header'; +import { + ArrowLeft, + CheckCircle2, + TrendingUp, + Users, + Target, + Clock, + MessageCircle, + ArrowRight +} from 'lucide-react'; +import { SERVICES, CASES } from '@/lib/constants'; + +interface ServiceDetailClientProps { + service: typeof SERVICES[number]; +} + +const iconMap: Record> = { + Code: () => ( + + + + ), + Cloud: () => ( + + + + ), + BarChart3: () => ( + + + + ), + Shield: () => ( + + + + ), +}; + +const challenges = { + software: [ + { title: '需求不明确', description: '业务部门提不出清晰需求，开发团队反复返工' }, + { title: '技术选型困难', description: '技术栈更新快，不知道该选什么技术方案' }, + { title: '项目延期', description: '开发进度难以把控，上线时间一拖再拖' }, + { title: '维护成本高', description: '系统上线后问题不断，运维压力巨大' }, + ], + cloud: [ + { title: '资源浪费', description: '服务器资源利用率低，成本居高不下' }, + { title: '扩展困难', description: '业务增长时系统无法快速扩容' }, + { title: '迁移风险', description: '担心数据丢失、业务中断' }, + { title: '安全顾虑', description: '不确定云端数据是否安全' }, + ], + data: [ + { title: '数据孤岛', description: '各系统数据分散，无法整合分析' }, + { title: '决策盲区', description: '缺乏数据支撑，决策凭感觉' }, + { title: '报表滞后', description: '手工制作报表，时效性差' }, + { title: '价值难挖', description: '数据很多，但不知道怎么用' }, + ], + security: [ + { title: '安全漏洞', description: '系统存在未知漏洞，随时可能被攻击' }, + { title: '合规压力', description: '监管要求越来越严，不知如何应对' }, + { title: '内部威胁', description: '员工操作不规范，数据泄露风险' }, + { title: '应急能力弱', description: '安全事件发生后不知所措' }, + ], +}; + +const outcomes = { + software: [ + { value: '30%', label: '开发效率提升' }, + { value: '50%', label: '返工率降低' }, + { value: '100%', label: '按时交付率' }, + ], + cloud: [ + { value: '40%', label: '成本降低' }, + { value: '99.9%', label: '可用性保障' }, + { value: '10x', label: '弹性扩展能力' }, + ], + data: [ + { value: '70%', label: '决策效率提升' }, + { value: '实时', label: '数据更新' }, + { value: '100+', label: '可视化报表' }, + ], + security: [ + { value: '99%', label: '漏洞修复率' }, + { value: '100%', label: '合规达标' }, + { value: '24/7', label: '安全监控' }, + ], +}; + +export function ServiceDetailClient({ service }: ServiceDetailClientProps) { + const [isVisible, setIsVisible] = useState(false); + const contentRef = useRef(null); + + useEffect(() => { + const observer = new IntersectionObserver( + ([entry]) => { + if (entry?.isIntersecting) { + setIsVisible(true); + } + }, + { threshold: 0.1 } + ); + + if (contentRef.current) { + observer.observe(contentRef.current); + } + + return () => observer.disconnect(); + }, []); + + const serviceChallenges = challenges[service.id as keyof typeof challenges] || []; + const serviceOutcomes = outcomes[service.id as keyof typeof outcomes] || []; + const relatedCases = CASES.slice(0, 2); + + const Icon = iconMap[service.icon]; + + return ( +
+
+
+ + + +
+
+
+ {Icon && } +
+
+ + 核心业务 + +

+ {service.title} +

+
+
+

+ {service.description} +

+
+
+
+ +
+
+ +
+
+
+ +
+

+ 您可能面临的挑战 +

+
+
+ {serviceChallenges.map((challenge, index) => ( +
+

{challenge.title}

+

{challenge.description}

+
+ ))} +
+
+ +
+
+
+ +
+

+ 我们如何帮助您 +

+
+

+ {service.overview} +

+
+ {service.features.map((feature, index) => ( +
+ + {feature} +
+ ))} +
+
+ +
+
+
+ +
+

+ 服务流程 +

+
+
+ {service.process.map((step, index) => ( +
+
+ {index + 1} +
+
+

{step}

+
+
+ ))} +
+
+ +
+
+
+ +
+

+ 您将获得的改变 +

+
+
+ {serviceOutcomes.map((outcome, index) => ( +
+
+ {outcome.value} +
+
{outcome.label}
+
+ ))} +
+
+

+ {service.benefits.map(b => b).join('；')} +

+
+
+ +
+
+
+ +
+

+ 相关案例 +

+
+
+ {relatedCases.map((caseItem) => ( + + + {caseItem.industry} + +

+ {caseItem.title} +

+

+ {caseItem.description} +

+ + ))} +
+
+ +
+ + +
+
+
+
+ ); +} +``` + +**Step 2: 创建服务详情页面入口** + +```tsx +// src/app/(marketing)/services/[id]/page.tsx +import { Metadata } from 'next'; +import { notFound } from 'next/navigation'; +import { SERVICES } from '@/lib/constants'; +import { ServiceDetailClient } from './client'; + +export async function generateStaticParams() { + return SERVICES.map((service) => ({ + id: service.id, + })); +} + +export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise { + const { id } = await params; + const service = SERVICES.find((s) => s.id === id); + + if (!service) { + return { + title: '服务未找到', + }; + } + + return { + title: `${service.title} - 睿新致远`, + description: service.description, + }; +} + +export default async function ServiceDetailPage({ params }: { params: Promise<{ id: string }> }) { + const { id } = await params; + const service = SERVICES.find((s) => s.id === id); + + if (!service) { + notFound(); + } + + return ; +} +``` + +**Step 3: 验证文件创建成功** + +Run: `ls -la src/app/\(marketing\)/services/` + +Expected: 目录和文件已创建 + +**Step 4: Commit** + +```bash +git add src/app/\(marketing\)/services/ +git commit -m "feat: add service detail page with storytelling style" +``` + +--- + +### Task 1.2: 创建服务列表页面 + +**Files:** +- Create: `src/app/(marketing)/services/page.tsx` + +**Step 1: 创建服务列表页面** + +```tsx +// src/app/(marketing)/services/page.tsx +'use client'; + +import Link from 'next/link'; +import { motion } from 'framer-motion'; +import { useInView } from 'framer-motion'; +import { useRef } from 'react'; +import { Button } from '@/components/ui/button'; +import { Badge } from '@/components/ui/badge'; +import { Card, CardContent } from '@/components/ui/card'; +import { PageHeader } from '@/components/ui/page-header'; +import { ArrowRight, Code, Cloud, BarChart3, Shield } from 'lucide-react'; +import { SERVICES } from '@/lib/constants'; + +const iconMap: Record> = { + Code, + Cloud, + BarChart3, + Shield, +}; + +export default function ServicesPage() { + const contentRef = useRef(null); + const isContentInView = useInView(contentRef, { once: true, margin: '-100px' }); + + return ( +
+ + +
+
+
+ {SERVICES.map((service, index) => { + const Icon = iconMap[service.icon]; + return ( + + +
+
+
+ {Icon && } +
+
+

+ {service.title} +

+

+ {service.description} +

+
+
+ +
+
+ {service.features.slice(0, 3).map((feature, idx) => ( + + {feature.split('：')[0]} + + ))} +
+
+ 了解详情 + +
+
+
+ + + ); + })} +
+
+
+ + +
+

+ 准备开始您的数字化转型之旅？ +

+

+ 让我们与您同行，共创美好未来 +

+ +
+ +
+ ); +} +``` + +**Step 2: 验证文件创建成功** + +Run: `ls -la src/app/\(marketing\)/services/page.tsx` + +Expected: 文件已创建 + +**Step 3: Commit** + +```bash +git add src/app/\(marketing\)/services/page.tsx +git commit -m "feat: add services list page" +``` + +--- + +### Task 1.3: 修改服务卡片组件添加链接 + +**Files:** +- Modify: `src/components/sections/services-section.tsx` + +**Step 1: 移除模态框相关代码，添加链接** + +Read: `src/components/sections/services-section.tsx` + +Replace entire file with: + +```tsx +'use client'; + +import { motion } from 'framer-motion'; +import { useInView } from 'framer-motion'; +import { useRef } from 'react'; +import Link from 'next/link'; +import { Code, Cloud, BarChart3, Shield, ArrowRight } from 'lucide-react'; +import { Card, CardContent } from '@/components/ui/card'; +import { Button } from '@/components/ui/button'; +import { SERVICES } from '@/lib/constants'; + +const iconMap: Record> = { + Code, + Cloud, + BarChart3, + Shield, +}; + +export function ServicesSection() { + const ref = useRef(null); + const isInView = useInView(ref, { once: true, margin: '-100px' }); + + return ( +
+
+
+ +
+ +

+ 我们的 核心业务 +

+

+ 专业技术团队，为您提供全方位的数字化解决方案 +

+ + +
+ {SERVICES.map((service, index) => { + const Icon = iconMap[service.icon]; + return ( + + + + +
+ {Icon && } +
+

{service.title}

+

{service.description}

+
+ 了解详情 + +
+ + + + + ); + })} +
+ + + + +
+
+ ); +} +``` + +**Step 2: 验证修改** + +Run: `npm run lint` + +Expected: 无 lint 错误 + +**Step 3: Commit** + +```bash +git add src/components/sections/services-section.tsx +git commit -m "refactor: remove modal, add link navigation for services" +``` + +--- + +### Task 1.4: 删除服务详情模态框组件 + +**Files:** +- Delete: `src/components/services/service-detail-modal.tsx` + +**Step 1: 删除模态框组件文件** + +Run: `rm src/components/services/service-detail-modal.tsx` + +**Step 2: 验证删除成功** + +Run: `ls src/components/services/` + +Expected: 目录为空或不存在 + +**Step 3: 如果目录为空，删除目录** + +Run: `rmdir src/components/services/ 2>/dev/null || true` + +**Step 4: Commit** + +```bash +git add -A +git commit -m "refactor: remove service detail modal component" +``` + +--- + +## 阶段 2: 首页结构优化 + +### Task 2.1: 精简首页 About Section + +**Files:** +- Modify: `src/components/sections/about-section.tsx` + +**Step 1: 精简 About Section 内容** + +Read: `src/components/sections/about-section.tsx` + +Replace entire file with: + +```tsx +'use client'; + +import { motion } from 'framer-motion'; +import { useInView } from 'framer-motion'; +import { useRef } from 'react'; +import Link from 'next/link'; +import { Card, CardContent } from '@/components/ui/card'; +import { Button } from '@/components/ui/button'; +import { COMPANY_INFO, STATS } from '@/lib/constants'; +import { ArrowRight } from 'lucide-react'; + +export function AboutSection() { + const ref = useRef(null); + const isInView = useInView(ref, { once: true, margin: '-100px' }); + + return ( +
+
+
+ +
+

+ 关于 {COMPANY_INFO.shortName} +

+

+ {COMPANY_INFO.slogan} +

+
+ +
+

+ "企业需要的，不是一个高高在上的'专家'，也不是一个做完就跑的'卖家'，而是一个能坐下来、一起想办法的同行者。" +

+

+ 我们只做一件事：成为您数字化转型路上，信得过的成长伙伴。 +

+
+ + + {STATS.map((stat, idx) => ( + + +
{stat.value}
+
{stat.label}
+ + + ))} + + + + + + +
+
+ ); +} +``` + +**Step 2: 验证修改** + +Run: `npm run lint` + +Expected: 无 lint 错误 + +**Step 3: Commit** + +```bash +git add src/components/sections/about-section.tsx +git commit -m "refactor: simplify about section on homepage" +``` + +--- + +### Task 2.2: 创建首页 Cases Section + +**Files:** +- Create: `src/components/sections/cases-section.tsx` + +**Step 1: 创建 Cases Section 组件** + +```tsx +// src/components/sections/cases-section.tsx +'use client'; + +import { motion } from 'framer-motion'; +import { useInView } from 'framer-motion'; +import { useRef } from 'react'; +import Link from 'next/link'; +import { Card, CardContent } from '@/components/ui/card'; +import { Button } from '@/components/ui/button'; +import { Badge } from '@/components/ui/badge'; +import { CASES } from '@/lib/constants'; +import { ArrowRight, Building2, TrendingUp } from 'lucide-react'; + +export function CasesSection() { + const ref = useRef(null); + const isInView = useInView(ref, { once: true, margin: '-100px' }); + + const featuredCases = CASES.slice(0, 3); + + return ( +
+
+
+ +
+ +

+ 与谁同行，决定能走多远 +

+

+ 我们与优秀的企业同行，共同成长，共创未来 +

+ + +
+ {featuredCases.map((caseItem, index) => ( + + + +
+ +
+ + {caseItem.industry} + +
+
+ +
+ + {caseItem.client} +
+

+ {caseItem.title} +

+

+ {caseItem.description} +

+ {caseItem.results.length > 0 && ( +
+ + {caseItem.results[0].value} + {caseItem.results[0].label} +
+ )} + + + + + ))} +
+ + + + +
+
+ ); +} +``` + +**Step 2: 验证文件创建成功** + +Run: `ls -la src/components/sections/cases-section.tsx` + +Expected: 文件已创建 + +**Step 3: Commit** + +```bash +git add src/components/sections/cases-section.tsx +git commit -m "feat: add cases section to homepage" +``` + +--- + +### Task 2.3: 更新首页 Section 顺序 + +**Files:** +- Modify: `src/app/(marketing)/page.tsx` + +**Step 1: 更新首页导入和 Section 顺序** + +Read: `src/app/(marketing)/page.tsx` + +Replace entire file with: + +```tsx +"use client"; + +import dynamic from 'next/dynamic'; +import { Header } from "@/components/layout/header"; +import { Footer } from "@/components/layout/footer"; +import { HeroSection } from "@/components/sections/hero-section"; +import { SectionSkeleton } from "@/components/ui/loading-skeleton"; + +const ServicesSection = dynamic( + () => import('@/components/sections/services-section').then(mod => ({ default: mod.ServicesSection })), + { + loading: () => , + ssr: true + } +); + +const ProductsSection = dynamic( + () => import('@/components/sections/products-section').then(mod => ({ default: mod.ProductsSection })), + { + loading: () => , + ssr: true + } +); + +const CasesSection = dynamic( + () => import('@/components/sections/cases-section').then(mod => ({ default: mod.CasesSection })), + { + loading: () => , + ssr: true + } +); + +const AboutSection = dynamic( + () => import('@/components/sections/about-section').then(mod => ({ default: mod.AboutSection })), + { + loading: () => , + ssr: true + } +); + +const NewsSection = dynamic( + () => import('@/components/sections/news-section').then(mod => ({ default: mod.NewsSection })), + { + loading: () => , + ssr: true + } +); + +const ContactSection = dynamic( + () => import('@/components/sections/contact-section').then(mod => ({ default: mod.ContactSection })), + { + loading: () => , + ssr: true + } +); + +export default function HomePage() { + return ( +
+
+ + + + + + + +
+
+ ); +} +``` + +**Step 2: 验证修改** + +Run: `npm run lint` + +Expected: 无 lint 错误 + +**Step 3: Commit** + +```bash +git add src/app/\(marketing\)/page.tsx +git commit -m "refactor: update homepage section order with cases section" +``` + +--- + +## 阶段 3: 导航与链接统一 + +### Task 3.1: 更新导航链接 + +**Files:** +- Modify: `src/lib/constants.ts` +- Modify: `src/components/layout/header.tsx` + +**Step 1: 更新导航配置** + +Read: `src/lib/constants.ts` + +Find the `NAVIGATION` constant and replace with: + +```typescript +// Navigation Items - 独立页面导航 +export const NAVIGATION = [ + { id: 'home', label: '首页', href: '/' }, + { id: 'services', label: '核心业务', href: '/services' }, + { id: 'products', label: '产品服务', href: '/products' }, + { id: 'about', label: '关于我们', href: '/about' }, + { id: 'news', label: '新闻动态', href: '/news' }, + { id: 'contact', label: '联系我们', href: '/contact' }, +] as const; +``` + +**Step 2: 更新 Header 组件** + +Read: `src/components/layout/header.tsx` + +Replace the navigation handling logic to use Link instead of anchor scroll: + +```tsx +'use client'; + +import { useState, useEffect, useCallback, useRef } from 'react'; +import Link from 'next/link'; +import { usePathname } from 'next/navigation'; +import { Menu, X } from 'lucide-react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { Button } from '@/components/ui/button'; +import { COMPANY_INFO, NAVIGATION } from '@/lib/constants'; +import { useFocusTrap } from '@/hooks/use-focus-trap'; + +export function Header() { + const [isOpen, setIsOpen] = useState(false); + const [isScrolled, setIsScrolled] = useState(false); + const pathname = usePathname(); + const focusTrapRef = useFocusTrap(isOpen); + + useEffect(() => { + const handleScroll = () => { + setIsScrolled(window.scrollY > 20); + }; + + window.addEventListener('scroll', handleScroll, { passive: true }); + handleScroll(); + + return () => { + window.removeEventListener('scroll', handleScroll); + }; + }, []); + + const handleKeyDown = useCallback((e: React.KeyboardEvent) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + setIsOpen(!isOpen); + } + if (e.key === 'Escape' && isOpen) { + setIsOpen(false); + } + }, [isOpen]); + + return ( + <> +
+
+
+ + {COMPANY_INFO.name} + + + + +
+ +
+ + +
+
+
+ + + {isOpen && ( + +
setIsOpen(false)} + aria-hidden="true" + /> + + + + + )} + + + ); +} +``` + +**Step 3: 验证修改** + +Run: `npm run lint` + +Expected: 无 lint 错误 + +**Step 4: Commit** + +```bash +git add src/lib/constants.ts src/components/layout/header.tsx +git commit -m "refactor: update navigation to use independent page links" +``` + +--- + +### Task 3.2: 创建产品列表页面 + +**Files:** +- Create: `src/app/(marketing)/products/page.tsx` + +**Step 1: 创建产品列表页面** + +```tsx +// src/app/(marketing)/products/page.tsx +'use client'; + +import Link from 'next/link'; +import { motion } from 'framer-motion'; +import { useInView } from 'framer-motion'; +import { useRef } from 'react'; +import { Button } from '@/components/ui/button'; +import { Badge } from '@/components/ui/badge'; +import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'; +import { PageHeader } from '@/components/ui/page-header'; +import { ArrowRight, Check, TrendingUp } from 'lucide-react'; +import { PRODUCTS } from '@/lib/constants'; + +export default function ProductsPage() { + const contentRef = useRef(null); + const isContentInView = useInView(contentRef, { once: true, margin: '-100px' }); + + return ( +
+ + +
+
+
+ {PRODUCTS.map((product, index) => ( + + + + + + {product.category} + + {product.title} + + + + {product.description} + + +
+

核心功能

+
+ {product.features.slice(0, 4).map((feature, idx) => ( + + + {feature} + + ))} +
+
+ +
+

+ + 核心价值 +

+
    + {product.benefits.map((benefit, idx) => ( +
  • + • + {benefit} +
    • + ))} +
+
+ + + + + + + ))} +
+
+
+ + +
+

+ 需要定制化解决方案？ +

+

+ 我们的专业团队可以根据您的业务需求，提供量身定制的产品开发和系统集成服务 +

+ +
+ +
+ ); +} +``` + +**Step 2: 验证文件创建成功** + +Run: `ls -la src/app/\(marketing\)/products/page.tsx` + +Expected: 文件已创建 + +**Step 3: Commit** + +```bash +git add src/app/\(marketing\)/products/page.tsx +git commit -m "feat: add products list page" +``` + +--- + +### Task 3.3: 更新 Footer 链接 + +**Files:** +- Modify: `src/components/layout/footer.tsx` + +**Step 1: 更新 Footer 导航链接** + +Read: `src/components/layout/footer.tsx` + +Replace the navigation links section with: + +```tsx +
+

快速链接

+
    + {NAVIGATION.map((item) => ( +
  • + + {item.label} + +
    • + ))} +
+
+``` + +**Step 2: 验证修改** + +Run: `npm run lint` + +Expected: 无 lint 错误 + +**Step 3: Commit** + +```bash +git add src/components/layout/footer.tsx +git commit -m "refactor: update footer navigation links" +``` + +--- + +## 阶段 4: 配色方案统一 + +### Task 4.1: 更新案例详情页配色 + +**Files:** +- Modify: `src/app/(marketing)/cases/[id]/client.tsx` + +**Step 1: 将紫色替换为品牌红** + +Read: `src/app/(marketing)/cases/[id]/client.tsx` + +Replace all occurrences of: +- `#4F46E5` → `#C41E3A` +- `rgba(79,70,229,` → `rgba(196,30,58,` + +Key replacements: +```tsx +// Before +
+ +// After +
+``` + +**Step 2: 验证修改** + +Run: `npm run lint` + +Expected: 无 lint 错误 + +**Step 3: Commit** + +```bash +git add src/app/\(marketing\)/cases/\[id\]/client.tsx +git commit -m "style: unify color scheme to brand red in case detail page" +``` + +--- + +### Task 4.2: 更新 Solutions 页面配色 + +**Files:** +- Modify: `src/app/(marketing)/solutions/page.tsx` + +**Step 1: 将紫色替换为品牌红** + +Read: `src/app/(marketing)/solutions/page.tsx` + +Replace all occurrences of: +- `#4F46E5` → `#C41E3A` +- `rgba(79,70,229,` → `rgba(196,30,58,` + +**Step 2: 验证修改** + +Run: `npm run lint` + +Expected: 无 lint 错误 + +**Step 3: Commit** + +```bash +git add src/app/\(marketing\)/solutions/page.tsx +git commit -m "style: unify color scheme to brand red in solutions page" +``` + +--- + +### Task 4.3: 更新 Products Section 配色 + +**Files:** +- Modify: `src/components/sections/products-section.tsx` + +**Step 1: 将紫色替换为品牌红** + +Read: `src/components/sections/products-section.tsx` + +Replace all occurrences of: +- `#4F46E5` → `#C41E3A` +- `rgba(79,70,229,` → `rgba(196,30,58,` + +**Step 2: 验证修改** + +Run: `npm run lint` + +Expected: 无 lint 错误 + +**Step 3: Commit** + +```bash +git add src/components/sections/products-section.tsx +git commit -m "style: unify color scheme to brand red in products section" +``` + +--- + +## 阶段 5: 清理与验证 + +### Task 5.1: 删除旧的 Solutions 页面（可选） + +**Files:** +- Delete: `src/app/(marketing)/solutions/` (如果与 services 重复) + +**Step 1: 检查是否需要删除** + +Run: `ls -la src/app/\(marketing\)/solutions/` + +如果 solutions 页面与 services 功能重复，考虑重定向或删除。 + +**Step 2: 如果决定保留，更新导航** + +确保导航指向正确的页面。 + +--- + +### Task 5.2: 运行完整测试 + +**Step 1: 运行 lint 检查** + +Run: `npm run lint` + +Expected: 无错误 + +**Step 2: 运行类型检查** + +Run: `npm run typecheck || npx tsc --noEmit` + +Expected: 无类型错误 + +**Step 3: 运行构建** + +Run: `npm run build` + +Expected: 构建成功 + +**Step 4: 本地测试** + +Run: `npm run dev` + +手动测试以下页面： +- `/` - 首页 +- `/services` - 服务列表 +- `/services/[id]` - 服务详情 +- `/products` - 产品列表 +- `/products/[id]` - 产品详情 +- `/cases` - 案例列表 +- `/cases/[id]` - 案例详情 +- `/about` - 关于我们 +- `/news` - 新闻列表 +- `/contact` - 联系我们 + +--- + +### Task 5.3: 最终提交 + +**Step 1: 检查所有更改** + +Run: `git status` + +**Step 2: 提交所有更改** + +```bash +git add -A +git commit -m "refactor: complete website optimization - unified navigation, colors, and structure" +``` + +--- + +## 实施完成检查清单 + +- [ ] 服务详情页创建完成 +- [ ] 服务列表页创建完成 +- [ ] 服务模态框已删除 +- [ ] 首页 About Section 已精简 +- [ ] 首页 Cases Section 已添加 +- [ ] 导航链接已统一 +- [ ] 产品列表页已创建 +- [ ] Footer 链接已更新 +- [ ] 配色方案已统一 +- [ ] Lint 检查通过 +- [ ] 类型检查通过 +- [ ] 构建成功 +- [ ] 手动测试通过