张翔
1801 lines
46 KiB
Markdown
1801 lines
46 KiB
Markdown
# Novalon 官网重新设计实施计划
|
||
|
||
> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
|
||
|
||
**Goal:** 将 Novalon 官网从现有设计升级为深色科技风格的现代化企业网站
|
||
|
||
**Architecture:** 采用 Next.js 16 App Router + React 19 + TypeScript + Tailwind CSS v4 技术栈，基于组件化设计，实现深色科技风格的视觉系统和流畅的用户体验
|
||
|
||
**Tech Stack:** Next.js 16, React 19, TypeScript 5, Tailwind CSS v4, Framer Motion, AntV G2, shadcn/ui
|
||
|
||
---
|
||
|
||
## 前置准备
|
||
|
||
### Task 0: 创建开发分支
|
||
|
||
**Files:**
|
||
- None
|
||
|
||
**Step 1: 检查当前分支状态**
|
||
|
||
Run: `git status`
|
||
|
||
Expected: 工作目录干净，在 main 或 develop 分支
|
||
|
||
**Step 2: 创建新的功能分支**
|
||
|
||
Run: `git checkout -b feature/website-redesign`
|
||
|
||
Expected: 切换到新分支 feature/website-redesign
|
||
|
||
**Step 3: 推送分支到远程**
|
||
|
||
Run: `git push -u origin feature/website-redesign`
|
||
|
||
Expected: 分支推送到远程仓库
|
||
|
||
---
|
||
|
||
## 阶段一：基础架构搭建
|
||
|
||
### Task 1: 安装必要依赖
|
||
|
||
**Files:**
|
||
- Modify: `package.json`
|
||
|
||
**Step 1: 安装动画库**
|
||
|
||
Run: `npm install framer-motion`
|
||
|
||
Expected: framer-motion 安装成功
|
||
|
||
**Step 2: 安装图表库**
|
||
|
||
Run: `npm install @antv/g2`
|
||
|
||
Expected: @antv/g2 安装成功
|
||
|
||
**Step 3: 安装 CVA（如果尚未安装）**
|
||
|
||
Run: `npm install class-variance-authority`
|
||
|
||
Expected: class-variance-authority 安装成功
|
||
|
||
**Step 4: 验证安装**
|
||
|
||
Run: `npm list framer-motion @antv/g2 class-variance-authority`
|
||
|
||
Expected: 显示已安装的版本信息
|
||
|
||
**Step 5: 提交依赖更新**
|
||
|
||
Run:
|
||
```bash
|
||
git add package.json package-lock.json
|
||
git commit -m "chore: add framer-motion, @antv/g2, and class-variance-authority dependencies"
|
||
```
|
||
|
||
Expected: 提交成功
|
||
|
||
---
|
||
|
||
### Task 2: 扩展 Tailwind 配置
|
||
|
||
**Files:**
|
||
- Modify: `tailwind.config.ts`（如果不存在则创建）
|
||
|
||
**Step 1: 检查 Tailwind 配置文件**
|
||
|
||
Run: `ls -la | grep tailwind`
|
||
|
||
Expected: 显示 tailwind 配置文件
|
||
|
||
**Step 2: 读取现有配置**
|
||
|
||
Read: `tailwind.config.ts`
|
||
|
||
**Step 3: 扩展配置添加深色主题色彩**
|
||
|
||
Modify: `tailwind.config.ts`
|
||
|
||
```typescript
|
||
import type { Config } from "tailwindcss";
|
||
|
||
export default {
|
||
content: [
|
||
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
|
||
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
|
||
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
|
||
],
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
dark: {
|
||
DEFAULT: "#0A0A0A",
|
||
secondary: "#1A1A1A",
|
||
tertiary: "#2A2A2A",
|
||
},
|
||
tech: {
|
||
blue: "#00D9FF",
|
||
purple: "#A855F7",
|
||
cyan: "#06B6D4",
|
||
},
|
||
},
|
||
fontFamily: {
|
||
sans: ["Inter", "system-ui", "sans-serif"],
|
||
mono: ["JetBrains Mono", "monospace"],
|
||
},
|
||
animation: {
|
||
"fade-in-up": "fadeInUp 0.6s ease-out",
|
||
"fade-in-scale": "fadeInScale 0.6s ease-out",
|
||
glow: "glow 2s ease-in-out infinite",
|
||
float: "float 3s ease-in-out infinite",
|
||
},
|
||
keyframes: {
|
||
fadeInUp: {
|
||
"0%": { opacity: "0", transform: "translateY(20px)" },
|
||
"100%": { opacity: "1", transform: "translateY(0)" },
|
||
},
|
||
fadeInScale: {
|
||
"0%": { opacity: "0", transform: "scale(0.95)" },
|
||
"100%": { opacity: "1", transform: "scale(1)" },
|
||
},
|
||
glow: {
|
||
"0%, 100%": { boxShadow: "0 0 20px rgba(0, 217, 255, 0.3)" },
|
||
"50%": { boxShadow: "0 0 40px rgba(0, 217, 255, 0.6)" },
|
||
},
|
||
float: {
|
||
"0%, 100%": { transform: "translateY(0px)" },
|
||
"50%": { transform: "translateY(-10px)" },
|
||
},
|
||
},
|
||
},
|
||
},
|
||
plugins: [],
|
||
} satisfies Config;
|
||
```
|
||
|
||
**Step 4: 验证配置语法**
|
||
|
||
Run: `npx tsc --noEmit tailwind.config.ts`
|
||
|
||
Expected: 无错误输出
|
||
|
||
**Step 5: 提交配置更新**
|
||
|
||
Run:
|
||
```bash
|
||
git add tailwind.config.ts
|
||
git commit -m "feat: extend Tailwind config with dark theme and tech colors"
|
||
```
|
||
|
||
Expected: 提交成功
|
||
|
||
---
|
||
|
||
### Task 3: 更新全局样式
|
||
|
||
**Files:**
|
||
- Modify: `src/app/globals.css`
|
||
|
||
**Step 1: 读取现有全局样式**
|
||
|
||
Read: `src/app/globals.css`
|
||
|
||
**Step 2: 添加 CSS 变量和基础样式**
|
||
|
||
Modify: `src/app/globals.css`
|
||
|
||
在文件顶部添加：
|
||
|
||
```css
|
||
:root {
|
||
--color-dark: #0A0A0A;
|
||
--color-dark-secondary: #1A1A1A;
|
||
--color-dark-tertiary: #2A2A2A;
|
||
--color-tech-blue: #00D9FF;
|
||
--color-tech-purple: #A855F7;
|
||
--color-tech-cyan: #06B6D4;
|
||
|
||
--gradient-primary: linear-gradient(135deg, #00D9FF 0%, #A855F7 100%);
|
||
--gradient-dark: linear-gradient(180deg, #0A0A0A 0%, #1A1A1A 100%);
|
||
--gradient-glow: radial-gradient(circle, #00D9FF20 0%, transparent 70%);
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
body {
|
||
background-color: var(--color-dark);
|
||
color: #FFFFFF;
|
||
font-family: 'Inter', system-ui, sans-serif;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
a {
|
||
color: inherit;
|
||
text-decoration: none;
|
||
}
|
||
|
||
button {
|
||
font-family: inherit;
|
||
}
|
||
|
||
input, textarea {
|
||
font-family: inherit;
|
||
}
|
||
|
||
::-webkit-scrollbar {
|
||
width: 8px;
|
||
height: 8px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: var(--color-dark-secondary);
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: var(--color-tech-blue);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: var(--color-tech-purple);
|
||
}
|
||
```
|
||
|
||
**Step 3: 验证样式文件**
|
||
|
||
Run: `npm run build`
|
||
|
||
Expected: 构建成功，无样式错误
|
||
|
||
**Step 4: 提交样式更新**
|
||
|
||
Run:
|
||
```bash
|
||
git add src/app/globals.css
|
||
git commit -m "feat: add CSS variables and base styles for dark theme"
|
||
```
|
||
|
||
Expected: 提交成功
|
||
|
||
---
|
||
|
||
### Task 4: 创建工具函数
|
||
|
||
**Files:**
|
||
- Modify: `src/lib/utils.ts`
|
||
|
||
**Step 1: 读取现有工具函数**
|
||
|
||
Read: `src/lib/utils.ts`
|
||
|
||
**Step 2: 添加新的工具函数**
|
||
|
||
Modify: `src/lib/utils.ts`
|
||
|
||
```typescript
|
||
import { type ClassValue, clsx } from "clsx";
|
||
import { twMerge } from "tailwind-merge";
|
||
|
||
export function cn(...inputs: ClassValue[]) {
|
||
return twMerge(clsx(inputs));
|
||
}
|
||
|
||
export function formatNumber(num: number): string {
|
||
return new Intl.NumberFormat("zh-CN").format(num);
|
||
}
|
||
|
||
export function formatCurrency(amount: number): string {
|
||
return new Intl.NumberFormat("zh-CN", {
|
||
style: "currency",
|
||
currency: "CNY",
|
||
}).format(amount);
|
||
}
|
||
|
||
export function debounce<T extends (...args: unknown[]) => unknown>(
|
||
func: T,
|
||
wait: number
|
||
): (...args: Parameters<T>) => void {
|
||
let timeout: NodeJS.Timeout | null = null;
|
||
return (...args: Parameters<T>) => {
|
||
if (timeout) clearTimeout(timeout);
|
||
timeout = setTimeout(() => func(...args), wait);
|
||
};
|
||
}
|
||
|
||
export function throttle<T extends (...args: unknown[]) => unknown>(
|
||
func: T,
|
||
limit: number
|
||
): (...args: Parameters<T>) => void {
|
||
let inThrottle: boolean;
|
||
return (...args: Parameters<T>) => {
|
||
if (!inThrottle) {
|
||
func(...args);
|
||
inThrottle = true;
|
||
setTimeout(() => (inThrottle = false), limit);
|
||
}
|
||
};
|
||
}
|
||
|
||
export function randomBetween(min: number, max: number): number {
|
||
return Math.random() * (max - min) + min;
|
||
}
|
||
|
||
export function lerp(start: number, end: number, t: number): number {
|
||
return start + (end - start) * t;
|
||
}
|
||
|
||
export function clamp(value: number, min: number, max: number): number {
|
||
return Math.min(Math.max(value, min), max);
|
||
}
|
||
```
|
||
|
||
**Step 3: 验证类型检查**
|
||
|
||
Run: `npx tsc --noEmit`
|
||
|
||
Expected: 无类型错误
|
||
|
||
**Step 4: 提交工具函数**
|
||
|
||
Run:
|
||
```bash
|
||
git add src/lib/utils.ts
|
||
git commit -m "feat: add utility functions for formatting and animation"
|
||
```
|
||
|
||
Expected: 提交成功
|
||
|
||
---
|
||
|
||
### Task 5: 创建主题常量
|
||
|
||
**Files:**
|
||
- Modify: `src/lib/constants.ts`
|
||
|
||
**Step 1: 读取现有常量**
|
||
|
||
Read: `src/lib/constants.ts`
|
||
|
||
**Step 2: 添加主题相关常量**
|
||
|
||
Modify: `src/lib/constants.ts`
|
||
|
||
在文件末尾添加：
|
||
|
||
```typescript
|
||
export const THEME = {
|
||
colors: {
|
||
dark: {
|
||
DEFAULT: "#0A0A0A",
|
||
secondary: "#1A1A1A",
|
||
tertiary: "#2A2A2A",
|
||
},
|
||
tech: {
|
||
blue: "#00D9FF",
|
||
purple: "#A855F7",
|
||
cyan: "#06B6D4",
|
||
},
|
||
text: {
|
||
primary: "#FFFFFF",
|
||
secondary: "#A0A0A0",
|
||
disabled: "#606060",
|
||
},
|
||
},
|
||
gradients: {
|
||
primary: "linear-gradient(135deg, #00D9FF 0%, #A855F7 100%)",
|
||
dark: "linear-gradient(180deg, #0A0A0A 0%, #1A1A1A 100%)",
|
||
glow: "radial-gradient(circle, #00D9FF20 0%, transparent 70%)",
|
||
},
|
||
spacing: {
|
||
xs: "4px",
|
||
sm: "8px",
|
||
md: "16px",
|
||
lg: "24px",
|
||
xl: "32px",
|
||
"2xl": "48px",
|
||
"3xl": "64px",
|
||
},
|
||
borderRadius: {
|
||
sm: "8px",
|
||
md: "12px",
|
||
lg: "16px",
|
||
full: "9999px",
|
||
},
|
||
animation: {
|
||
fast: "150ms",
|
||
standard: "300ms",
|
||
slow: "500ms",
|
||
verySlow: "1000ms",
|
||
},
|
||
breakpoints: {
|
||
sm: "640px",
|
||
md: "768px",
|
||
lg: "1024px",
|
||
xl: "1280px",
|
||
"2xl": "1536px",
|
||
},
|
||
} as const;
|
||
|
||
export const ANIMATION_VARIANTS = {
|
||
fadeInUp: {
|
||
initial: { opacity: 0, y: 20 },
|
||
animate: { opacity: 1, y: 0 },
|
||
exit: { opacity: 0, y: -20 },
|
||
},
|
||
fadeInScale: {
|
||
initial: { opacity: 0, scale: 0.95 },
|
||
animate: { opacity: 1, scale: 1 },
|
||
exit: { opacity: 0, scale: 0.95 },
|
||
},
|
||
slideInLeft: {
|
||
initial: { opacity: 0, x: -20 },
|
||
animate: { opacity: 1, x: 0 },
|
||
exit: { opacity: 0, x: 20 },
|
||
},
|
||
slideInRight: {
|
||
initial: { opacity: 0, x: 20 },
|
||
animate: { opacity: 1, x: 0 },
|
||
exit: { opacity: 0, x: -20 },
|
||
},
|
||
} as const;
|
||
```
|
||
|
||
**Step 3: 验证类型检查**
|
||
|
||
Run: `npx tsc --noEmit`
|
||
|
||
Expected: 无类型错误
|
||
|
||
**Step 4: 提交常量更新**
|
||
|
||
Run:
|
||
```bash
|
||
git add src/lib/constants.ts
|
||
git commit -m "feat: add theme constants and animation variants"
|
||
```
|
||
|
||
Expected: 提交成功
|
||
|
||
---
|
||
|
||
## 阶段二：基础UI组件开发
|
||
|
||
### Task 6: 创建增强版按钮组件
|
||
|
||
**Files:**
|
||
- Modify: `src/components/ui/button.tsx`
|
||
|
||
**Step 1: 读取现有按钮组件**
|
||
|
||
Read: `src/components/ui/button.tsx`
|
||
|
||
**Step 2: 重写按钮组件以支持深色主题**
|
||
|
||
Modify: `src/components/ui/button.tsx`
|
||
|
||
```typescript
|
||
import * as React from "react";
|
||
import { cva, type VariantProps } from "class-variance-authority";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
const buttonVariants = cva(
|
||
"inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tech-blue focus-visible:ring-offset-2 focus-visible:ring-offset-dark disabled:pointer-events-none disabled:opacity-50",
|
||
{
|
||
variants: {
|
||
variant: {
|
||
default:
|
||
"bg-gradient-to-r from-tech-blue to-tech-purple text-white hover:shadow-lg hover:shadow-tech-blue/50 hover:scale-105 active:scale-95",
|
||
secondary:
|
||
"bg-dark-tertiary text-white border border-gray-700 hover:border-tech-blue hover:shadow-lg hover:shadow-tech-blue/20 hover:scale-105 active:scale-95",
|
||
outline:
|
||
"border border-tech-blue text-tech-blue hover:bg-tech-blue/10 hover:shadow-lg hover:shadow-tech-blue/20",
|
||
ghost:
|
||
"text-gray-300 hover:text-tech-blue hover:bg-dark-tertiary",
|
||
link: "text-tech-blue underline-offset-4 hover:underline",
|
||
},
|
||
size: {
|
||
default: "h-10 px-6 py-2",
|
||
sm: "h-8 px-4 text-xs",
|
||
lg: "h-12 px-8 text-base",
|
||
xl: "h-14 px-10 text-lg",
|
||
icon: "h-10 w-10",
|
||
},
|
||
},
|
||
defaultVariants: {
|
||
variant: "default",
|
||
size: "default",
|
||
},
|
||
}
|
||
);
|
||
|
||
export interface ButtonProps
|
||
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||
VariantProps<typeof buttonVariants> {
|
||
asChild?: boolean;
|
||
}
|
||
|
||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||
({ className, variant, size, ...props }, ref) => {
|
||
return (
|
||
<button
|
||
className={cn(buttonVariants({ variant, size, className }))}
|
||
ref={ref}
|
||
{...props}
|
||
/>
|
||
);
|
||
}
|
||
);
|
||
Button.displayName = "Button";
|
||
|
||
export { Button, buttonVariants };
|
||
```
|
||
|
||
**Step 3: 验证类型检查**
|
||
|
||
Run: `npx tsc --noEmit`
|
||
|
||
Expected: 无类型错误
|
||
|
||
**Step 4: 提交按钮组件**
|
||
|
||
Run:
|
||
```bash
|
||
git add src/components/ui/button.tsx
|
||
git commit -m "feat: enhance button component with dark theme variants"
|
||
```
|
||
|
||
Expected: 提交成功
|
||
|
||
---
|
||
|
||
### Task 7: 创建增强版卡片组件
|
||
|
||
**Files:**
|
||
- Modify: `src/components/ui/card.tsx`
|
||
|
||
**Step 1: 读取现有卡片组件**
|
||
|
||
Read: `src/components/ui/card.tsx`
|
||
|
||
**Step 2: 重写卡片组件以支持深色主题和悬停效果**
|
||
|
||
Modify: `src/components/ui/card.tsx`
|
||
|
||
```typescript
|
||
import * as React from "react";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
const Card = React.forwardRef<
|
||
HTMLDivElement,
|
||
React.HTMLAttributes<HTMLDivElement> & {
|
||
variant?: "default" | "hover" | "glow";
|
||
}
|
||
>(({ className, variant = "default", ...props }, ref) => (
|
||
<div
|
||
ref={ref}
|
||
className={cn(
|
||
"rounded-xl border border-gray-800 bg-dark-tertiary text-white transition-all duration-300",
|
||
{
|
||
"hover:border-tech-blue hover:shadow-lg hover:shadow-tech-blue/20 hover:-translate-y-2":
|
||
variant === "hover",
|
||
"hover:border-tech-blue hover:shadow-xl hover:shadow-tech-blue/30 hover:-translate-y-2 animate-glow":
|
||
variant === "glow",
|
||
},
|
||
className
|
||
)}
|
||
{...props}
|
||
/>
|
||
));
|
||
Card.displayName = "Card";
|
||
|
||
const CardHeader = React.forwardRef<
|
||
HTMLDivElement,
|
||
React.HTMLAttributes<HTMLDivElement>
|
||
>(({ className, ...props }, ref) => (
|
||
<div
|
||
ref={ref}
|
||
className={cn("flex flex-col space-y-1.5 p-6", className)}
|
||
{...props}
|
||
/>
|
||
));
|
||
CardHeader.displayName = "CardHeader";
|
||
|
||
const CardTitle = React.forwardRef<
|
||
HTMLParagraphElement,
|
||
React.HTMLAttributes<HTMLHeadingElement>
|
||
>(({ className, ...props }, ref) => (
|
||
<h3
|
||
ref={ref}
|
||
className={cn(
|
||
"text-2xl font-bold leading-none tracking-tight text-white",
|
||
className
|
||
)}
|
||
{...props}
|
||
/>
|
||
));
|
||
CardTitle.displayName = "CardTitle";
|
||
|
||
const CardDescription = React.forwardRef<
|
||
HTMLParagraphElement,
|
||
React.HTMLAttributes<HTMLParagraphElement>
|
||
>(({ className, ...props }, ref) => (
|
||
<p
|
||
ref={ref}
|
||
className={cn("text-sm text-gray-400", className)}
|
||
{...props}
|
||
/>
|
||
));
|
||
CardDescription.displayName = "CardDescription";
|
||
|
||
const CardContent = React.forwardRef<
|
||
HTMLDivElement,
|
||
React.HTMLAttributes<HTMLDivElement>
|
||
>(({ className, ...props }, ref) => (
|
||
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
|
||
));
|
||
CardContent.displayName = "CardContent";
|
||
|
||
const CardFooter = React.forwardRef<
|
||
HTMLDivElement,
|
||
React.HTMLAttributes<HTMLDivElement>
|
||
>(({ className, ...props }, ref) => (
|
||
<div
|
||
ref={ref}
|
||
className={cn("flex items-center p-6 pt-0", className)}
|
||
{...props}
|
||
/>
|
||
));
|
||
CardFooter.displayName = "CardFooter";
|
||
|
||
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
|
||
```
|
||
|
||
**Step 3: 验证类型检查**
|
||
|
||
Run: `npx tsc --noEmit`
|
||
|
||
Expected: 无类型错误
|
||
|
||
**Step 4: 提交卡片组件**
|
||
|
||
Run:
|
||
```bash
|
||
git add src/components/ui/card.tsx
|
||
git commit -m "feat: enhance card component with dark theme and hover effects"
|
||
```
|
||
|
||
Expected: 提交成功
|
||
|
||
---
|
||
|
||
### Task 8: 创建输入框组件
|
||
|
||
**Files:**
|
||
- Modify: `src/components/ui/input.tsx`
|
||
|
||
**Step 1: 读取现有输入框组件**
|
||
|
||
Read: `src/components/ui/input.tsx`
|
||
|
||
**Step 2: 重写输入框组件以支持深色主题**
|
||
|
||
Modify: `src/components/ui/input.tsx`
|
||
|
||
```typescript
|
||
import * as React from "react";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
export interface InputProps
|
||
extends React.InputHTMLAttributes<HTMLInputElement> {}
|
||
|
||
const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||
({ className, type, ...props }, ref) => {
|
||
return (
|
||
<input
|
||
type={type}
|
||
className={cn(
|
||
"flex h-10 w-full rounded-lg border border-gray-700 bg-dark-secondary px-4 py-2 text-sm text-white placeholder:text-gray-500 transition-all duration-300",
|
||
"focus:border-tech-blue focus:outline-none focus:ring-2 focus:ring-tech-blue/20 focus:shadow-lg focus:shadow-tech-blue/10",
|
||
"disabled:cursor-not-allowed disabled:opacity-50",
|
||
"hover:border-gray-600",
|
||
className
|
||
)}
|
||
ref={ref}
|
||
{...props}
|
||
/>
|
||
);
|
||
}
|
||
);
|
||
Input.displayName = "Input";
|
||
|
||
export { Input };
|
||
```
|
||
|
||
**Step 3: 验证类型检查**
|
||
|
||
Run: `npx tsc --noEmit`
|
||
|
||
Expected: 无类型错误
|
||
|
||
**Step 4: 提交输入框组件**
|
||
|
||
Run:
|
||
```bash
|
||
git add src/components/ui/input.tsx
|
||
git commit -m "feat: enhance input component with dark theme styles"
|
||
```
|
||
|
||
Expected: 提交成功
|
||
|
||
---
|
||
|
||
### Task 9: 创建徽章组件
|
||
|
||
**Files:**
|
||
- Modify: `src/components/ui/badge.tsx`
|
||
|
||
**Step 1: 读取现有徽章组件**
|
||
|
||
Read: `src/components/ui/badge.tsx`
|
||
|
||
**Step 2: 重写徽章组件以支持深色主题**
|
||
|
||
Modify: `src/components/ui/badge.tsx`
|
||
|
||
```typescript
|
||
import * as React from "react";
|
||
import { cva, type VariantProps } from "class-variance-authority";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
const badgeVariants = cva(
|
||
"inline-flex items-center rounded-full px-3 py-1 text-xs font-medium transition-colors duration-300",
|
||
{
|
||
variants: {
|
||
variant: {
|
||
default:
|
||
"bg-tech-blue/20 text-tech-blue border border-tech-blue/30",
|
||
secondary:
|
||
"bg-tech-purple/20 text-tech-purple border border-tech-purple/30",
|
||
success:
|
||
"bg-green-500/20 text-green-400 border border-green-500/30",
|
||
warning:
|
||
"bg-yellow-500/20 text-yellow-400 border border-yellow-500/30",
|
||
error:
|
||
"bg-red-500/20 text-red-400 border border-red-500/30",
|
||
outline:
|
||
"bg-transparent text-gray-300 border border-gray-600",
|
||
},
|
||
},
|
||
defaultVariants: {
|
||
variant: "default",
|
||
},
|
||
}
|
||
);
|
||
|
||
export interface BadgeProps
|
||
extends React.HTMLAttributes<HTMLDivElement>,
|
||
VariantProps<typeof badgeVariants> {}
|
||
|
||
function Badge({ className, variant, ...props }: BadgeProps) {
|
||
return (
|
||
<div className={cn(badgeVariants({ variant }), className)} {...props} />
|
||
);
|
||
}
|
||
|
||
export { Badge, badgeVariants };
|
||
```
|
||
|
||
**Step 3: 验证类型检查**
|
||
|
||
Run: `npx tsc --noEmit`
|
||
|
||
Expected: 无类型错误
|
||
|
||
**Step 4: 提交徽章组件**
|
||
|
||
Run:
|
||
```bash
|
||
git add src/components/ui/badge.tsx
|
||
git commit -m "feat: enhance badge component with dark theme variants"
|
||
```
|
||
|
||
Expected: 提交成功
|
||
|
||
---
|
||
|
||
## 阶段三：布局组件重构
|
||
|
||
### Task 10: 重构导航栏组件
|
||
|
||
**Files:**
|
||
- Modify: `src/components/layout/header.tsx`
|
||
|
||
**Step 1: 读取现有导航栏组件**
|
||
|
||
Read: `src/components/layout/header.tsx`
|
||
|
||
**Step 2: 重写导航栏组件以支持深色主题和下拉菜单**
|
||
|
||
Modify: `src/components/layout/header.tsx`
|
||
|
||
```typescript
|
||
"use client";
|
||
|
||
import { useState, useEffect } from "react";
|
||
import Link from "next/link";
|
||
import { Button } from "@/components/ui/button";
|
||
import { NAVIGATION, COMPANY_INFO } from "@/lib/constants";
|
||
import { cn } from "@/lib/utils";
|
||
import { ChevronDown, Menu, X } from "lucide-react";
|
||
|
||
export function Header() {
|
||
const [isScrolled, setIsScrolled] = useState(false);
|
||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||
const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
|
||
|
||
useEffect(() => {
|
||
const handleScroll = () => {
|
||
setIsScrolled(window.scrollY > 10);
|
||
};
|
||
window.addEventListener("scroll", handleScroll);
|
||
return () => window.removeEventListener("scroll", handleScroll);
|
||
}, []);
|
||
|
||
return (
|
||
<header
|
||
className={cn(
|
||
"fixed top-0 left-0 right-0 z-50 transition-all duration-300",
|
||
isScrolled
|
||
? "bg-dark/95 backdrop-blur-md border-b border-gray-800 shadow-lg"
|
||
: "bg-transparent"
|
||
)}
|
||
>
|
||
<nav className="container-wide h-16 flex items-center justify-between">
|
||
<Link href="/" className="flex items-center gap-2 group">
|
||
<div className="relative">
|
||
<img
|
||
src="/logo.svg"
|
||
alt={COMPANY_INFO.shortName}
|
||
className="h-8 w-auto transition-all duration-300 group-hover:drop-shadow-[0_0_10px_rgba(0,217,255,0.5)]"
|
||
/>
|
||
</div>
|
||
<span className="text-lg font-bold text-white hidden sm:block">
|
||
{COMPANY_INFO.shortName}
|
||
</span>
|
||
</Link>
|
||
|
||
<div className="hidden lg:flex items-center gap-8">
|
||
{NAVIGATION.map((item) => (
|
||
<Link
|
||
key={item.id}
|
||
href={item.href}
|
||
className="text-gray-300 hover:text-tech-blue transition-colors duration-300 relative group"
|
||
>
|
||
{item.label}
|
||
<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-tech-blue transition-all duration-300 group-hover:w-full" />
|
||
</Link>
|
||
))}
|
||
</div>
|
||
|
||
<div className="hidden lg:flex items-center gap-4">
|
||
<Button variant="ghost" size="sm">
|
||
登录
|
||
</Button>
|
||
<Button variant="default" size="sm">
|
||
免费试用
|
||
</Button>
|
||
</div>
|
||
|
||
<button
|
||
className="lg:hidden text-white p-2"
|
||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||
aria-label="Toggle menu"
|
||
>
|
||
{isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
|
||
</button>
|
||
</nav>
|
||
|
||
{isMobileMenuOpen && (
|
||
<div className="lg:hidden bg-dark-secondary border-t border-gray-800">
|
||
<div className="container-wide py-4 space-y-4">
|
||
{NAVIGATION.map((item) => (
|
||
<Link
|
||
key={item.id}
|
||
href={item.href}
|
||
className="block text-gray-300 hover:text-tech-blue transition-colors duration-300 py-2"
|
||
onClick={() => setIsMobileMenuOpen(false)}
|
||
>
|
||
{item.label}
|
||
</Link>
|
||
))}
|
||
<div className="flex flex-col gap-2 pt-4 border-t border-gray-800">
|
||
<Button variant="ghost" className="w-full">
|
||
登录
|
||
</Button>
|
||
<Button variant="default" className="w-full">
|
||
免费试用
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</header>
|
||
);
|
||
}
|
||
```
|
||
|
||
**Step 3: 验证类型检查**
|
||
|
||
Run: `npx tsc --noEmit`
|
||
|
||
Expected: 无类型错误
|
||
|
||
**Step 4: 提交导航栏组件**
|
||
|
||
Run:
|
||
```bash
|
||
git add src/components/layout/header.tsx
|
||
git commit -m "feat: refactor header with dark theme and mobile menu"
|
||
```
|
||
|
||
Expected: 提交成功
|
||
|
||
---
|
||
|
||
### Task 11: 重构页脚组件
|
||
|
||
**Files:**
|
||
- Modify: `src/components/layout/footer.tsx`
|
||
|
||
**Step 1: 读取现有页脚组件**
|
||
|
||
Read: `src/components/layout/footer.tsx`
|
||
|
||
**Step 2: 重写页脚组件以支持深色主题**
|
||
|
||
Modify: `src/components/layout/footer.tsx`
|
||
|
||
```typescript
|
||
import Link from "next/link";
|
||
import { COMPANY_INFO } from "@/lib/constants";
|
||
|
||
export function Footer() {
|
||
const currentYear = new Date().getFullYear();
|
||
|
||
const footerLinks = {
|
||
products: [
|
||
{ label: "ERP系统", href: "/products/erp" },
|
||
{ label: "CRM系统", href: "/products/crm" },
|
||
{ label: "OA平台", href: "/products/oa" },
|
||
{ label: "BI平台", href: "/products/bi" },
|
||
],
|
||
solutions: [
|
||
{ label: "金融行业", href: "/solutions/finance" },
|
||
{ label: "制造业", href: "/solutions/manufacturing" },
|
||
{ label: "零售行业", href: "/solutions/retail" },
|
||
{ label: "教育行业", href: "/solutions/education" },
|
||
],
|
||
company: [
|
||
{ label: "关于我们", href: "/about" },
|
||
{ label: "新闻动态", href: "/news" },
|
||
{ label: "成功案例", href: "/cases" },
|
||
{ label: "联系我们", href: "/contact" },
|
||
],
|
||
};
|
||
|
||
return (
|
||
<footer className="bg-dark-secondary border-t border-gray-800">
|
||
<div className="container-wide py-12">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||
<div className="space-y-4">
|
||
<Link href="/" className="flex items-center gap-2">
|
||
<img
|
||
src="/logo.svg"
|
||
alt={COMPANY_INFO.shortName}
|
||
className="h-8 w-auto"
|
||
/>
|
||
<span className="text-lg font-bold text-white">
|
||
{COMPANY_INFO.shortName}
|
||
</span>
|
||
</Link>
|
||
<p className="text-sm text-gray-400">
|
||
{COMPANY_INFO.slogan}
|
||
</p>
|
||
<div className="flex gap-4">
|
||
<a
|
||
href="#"
|
||
className="text-gray-400 hover:text-tech-blue transition-colors duration-300"
|
||
aria-label="WeChat"
|
||
>
|
||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 01.213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 00.167-.054l1.903-1.114a.864.864 0 01.717-.098 10.16 10.16 0 002.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 01-1.162 1.178A1.17 1.17 0 014.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 01-1.162 1.178 1.17 1.17 0 01-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 4.229 6.884 4.229.826 0 1.622-.12 2.361-.336a.722.722 0 01.598.082l1.584.926a.272.272 0 00.14.047c.134 0 .24-.111.24-.247 0-.06-.023-.12-.038-.177l-.327-1.233a.582.582 0 01-.023-.156.49.49 0 01.201-.398C23.024 18.48 24 16.82 24 14.98c0-3.21-2.931-5.837-7.062-6.122zm-2.036 2.87c.535 0 .969.44.969.982a.976.976 0 01-.969.983.976.976 0 01-.969-.983c0-.542.434-.982.97-.982zm4.844 0c.535 0 .969.44.969.982a.976.976 0 01-.969.983.976.976 0 01-.969-.983c0-.542.434-.982.97-.982z" />
|
||
</svg>
|
||
</a>
|
||
<a
|
||
href="#"
|
||
className="text-gray-400 hover:text-tech-blue transition-colors duration-300"
|
||
aria-label="Weibo"
|
||
>
|
||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M10.098 20.323c-3.977.391-7.414-1.406-7.672-4.02-.259-2.609 2.759-5.047 6.74-5.441 3.979-.394 7.413 1.404 7.671 4.018.259 2.6-2.759 5.049-6.737 5.439l-.002.004zM9.05 17.219c-.384.616-1.208.884-1.829.602-.612-.279-.793-.991-.406-1.593.379-.595 1.176-.861 1.793-.601.622.263.82.972.442 1.592zm1.27-1.627c-.141.237-.449.353-.689.253-.236-.09-.313-.361-.177-.586.138-.227.436-.346.672-.24.239.09.315.36.18.573h.014zm.176-2.719c-1.893-.493-4.033.45-4.857 2.118-.836 1.704-.026 3.591 1.886 4.21 1.983.64 4.318-.341 5.132-2.179.8-1.793-.201-3.642-2.161-4.149zm7.563-1.224c-.346-.105-.579-.18-.405-.649.381-1.017.422-1.896-.001-2.521-.792-1.163-2.951-1.102-5.418-.03 0 0-.776.34-.578-.275.381-1.217.324-2.236-.27-2.82-1.349-1.326-4.935.05-8.012 3.073C.417 11.473-.27 14.034-.27 16.218c0 4.179 5.37 6.717 10.624 6.717 6.886 0 11.469-3.997 11.469-7.169 0-1.917-1.618-3.004-3.764-3.617h.002zm2.029-5.47c-.439-.511-1.09-.744-1.741-.653-.651.091-1.178.488-1.434 1.065-.256.577-.197 1.23.157 1.742.354.512.941.812 1.592.812.651 0 1.238-.3 1.592-.812.354-.512.413-1.165.157-1.742-.256-.577-.783-.974-1.434-1.065-.651-.091-1.302.142-1.741.653h-.003v.003z" />
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 className="text-white font-semibold mb-4">产品服务</h3>
|
||
<ul className="space-y-2">
|
||
{footerLinks.products.map((link) => (
|
||
<li key={link.href}>
|
||
<Link
|
||
href={link.href}
|
||
className="text-sm text-gray-400 hover:text-tech-blue transition-colors duration-300"
|
||
>
|
||
{link.label}
|
||
</Link>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 className="text-white font-semibold mb-4">解决方案</h3>
|
||
<ul className="space-y-2">
|
||
{footerLinks.solutions.map((link) => (
|
||
<li key={link.href}>
|
||
<Link
|
||
href={link.href}
|
||
className="text-sm text-gray-400 hover:text-tech-blue transition-colors duration-300"
|
||
>
|
||
{link.label}
|
||
</Link>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 className="text-white font-semibold mb-4">关于我们</h3>
|
||
<ul className="space-y-2">
|
||
{footerLinks.company.map((link) => (
|
||
<li key={link.href}>
|
||
<Link
|
||
href={link.href}
|
||
className="text-sm text-gray-400 hover:text-tech-blue transition-colors duration-300"
|
||
>
|
||
{link.label}
|
||
</Link>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-12 pt-8 border-t border-gray-800">
|
||
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
|
||
<p className="text-sm text-gray-400">
|
||
© {currentYear} {COMPANY_INFO.name}. All rights reserved.
|
||
</p>
|
||
<div className="flex gap-6">
|
||
<Link
|
||
href="/privacy"
|
||
className="text-sm text-gray-400 hover:text-tech-blue transition-colors duration-300"
|
||
>
|
||
隐私政策
|
||
</Link>
|
||
<Link
|
||
href="/terms"
|
||
className="text-sm text-gray-400 hover:text-tech-blue transition-colors duration-300"
|
||
>
|
||
服务条款
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
);
|
||
}
|
||
```
|
||
|
||
**Step 3: 验证类型检查**
|
||
|
||
Run: `npx tsc --noEmit`
|
||
|
||
Expected: 无类型错误
|
||
|
||
**Step 4: 提交页脚组件**
|
||
|
||
Run:
|
||
```bash
|
||
git add src/components/layout/footer.tsx
|
||
git commit -m "feat: refactor footer with dark theme and improved layout"
|
||
```
|
||
|
||
Expected: 提交成功
|
||
|
||
---
|
||
|
||
## 阶段四：特效组件开发
|
||
|
||
### Task 12: 创建粒子背景组件
|
||
|
||
**Files:**
|
||
- Create: `src/components/effects/particle-background.tsx`
|
||
|
||
**Step 1: 创建粒子背景组件**
|
||
|
||
Create: `src/components/effects/particle-background.tsx`
|
||
|
||
```typescript
|
||
"use client";
|
||
|
||
import { useEffect, useRef } from "react";
|
||
import { randomBetween } from "@/lib/utils";
|
||
|
||
interface Particle {
|
||
x: number;
|
||
y: number;
|
||
vx: number;
|
||
vy: number;
|
||
size: number;
|
||
color: string;
|
||
opacity: number;
|
||
}
|
||
|
||
interface ParticleBackgroundProps {
|
||
particleCount?: number;
|
||
colors?: string[];
|
||
minSize?: number;
|
||
maxSize?: number;
|
||
speed?: number;
|
||
className?: string;
|
||
}
|
||
|
||
export function ParticleBackground({
|
||
particleCount = 50,
|
||
colors = ["#00D9FF", "#A855F7", "#06B6D4"],
|
||
minSize = 1,
|
||
maxSize = 3,
|
||
speed = 0.5,
|
||
className = "",
|
||
}: ParticleBackgroundProps) {
|
||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||
const particlesRef = useRef<Particle[]>([]);
|
||
const animationRef = useRef<number>();
|
||
|
||
useEffect(() => {
|
||
const canvas = canvasRef.current;
|
||
if (!canvas) return;
|
||
|
||
const ctx = canvas.getContext("2d");
|
||
if (!ctx) return;
|
||
|
||
const resizeCanvas = () => {
|
||
canvas.width = window.innerWidth;
|
||
canvas.height = window.innerHeight;
|
||
};
|
||
|
||
resizeCanvas();
|
||
window.addEventListener("resize", resizeCanvas);
|
||
|
||
particlesRef.current = Array.from({ length: particleCount }, () => ({
|
||
x: randomBetween(0, canvas.width),
|
||
y: randomBetween(0, canvas.height),
|
||
vx: randomBetween(-speed, speed),
|
||
vy: randomBetween(-speed, speed),
|
||
size: randomBetween(minSize, maxSize),
|
||
color: colors[Math.floor(Math.random() * colors.length)],
|
||
opacity: randomBetween(0.1, 0.5),
|
||
}));
|
||
|
||
const animate = () => {
|
||
if (!ctx || !canvas) return;
|
||
|
||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
|
||
particlesRef.current.forEach((particle) => {
|
||
particle.x += particle.vx;
|
||
particle.y += particle.vy;
|
||
|
||
if (particle.x < 0 || particle.x > canvas.width) particle.vx *= -1;
|
||
if (particle.y < 0 || particle.y > canvas.height) particle.vy *= -1;
|
||
|
||
ctx.beginPath();
|
||
ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
|
||
ctx.fillStyle = particle.color;
|
||
ctx.globalAlpha = particle.opacity;
|
||
ctx.fill();
|
||
});
|
||
|
||
ctx.globalAlpha = 1;
|
||
animationRef.current = requestAnimationFrame(animate);
|
||
};
|
||
|
||
animate();
|
||
|
||
return () => {
|
||
window.removeEventListener("resize", resizeCanvas);
|
||
if (animationRef.current) {
|
||
cancelAnimationFrame(animationRef.current);
|
||
}
|
||
};
|
||
}, [particleCount, colors, minSize, maxSize, speed]);
|
||
|
||
return (
|
||
<canvas
|
||
ref={canvasRef}
|
||
className={`absolute inset-0 pointer-events-none ${className}`}
|
||
style={{ zIndex: 0 }}
|
||
/>
|
||
);
|
||
}
|
||
```
|
||
|
||
**Step 2: 验证类型检查**
|
||
|
||
Run: `npx tsc --noEmit`
|
||
|
||
Expected: 无类型错误
|
||
|
||
**Step 3: 提交粒子背景组件**
|
||
|
||
Run:
|
||
```bash
|
||
git add src/components/effects/particle-background.tsx
|
||
git commit -m "feat: create particle background component for hero section"
|
||
```
|
||
|
||
Expected: 提交成功
|
||
|
||
---
|
||
|
||
### Task 13: 创建发光效果组件
|
||
|
||
**Files:**
|
||
- Create: `src/components/effects/glow-effect.tsx`
|
||
|
||
**Step 1: 创建发光效果组件**
|
||
|
||
Create: `src/components/effects/glow-effect.tsx`
|
||
|
||
```typescript
|
||
"use client";
|
||
|
||
import { cn } from "@/lib/utils";
|
||
|
||
interface GlowEffectProps {
|
||
color?: string;
|
||
size?: "sm" | "md" | "lg" | "xl";
|
||
className?: string;
|
||
children?: React.ReactNode;
|
||
}
|
||
|
||
const sizeMap = {
|
||
sm: "w-32 h-32",
|
||
md: "w-48 h-48",
|
||
lg: "w-64 h-64",
|
||
xl: "w-96 h-96",
|
||
};
|
||
|
||
export function GlowEffect({
|
||
color = "#00D9FF",
|
||
size = "lg",
|
||
className,
|
||
children,
|
||
}: GlowEffectProps) {
|
||
return (
|
||
<div className={cn("relative", className)}>
|
||
<div
|
||
className={cn(
|
||
"absolute rounded-full blur-3xl opacity-20 animate-pulse",
|
||
sizeMap[size]
|
||
)}
|
||
style={{
|
||
background: `radial-gradient(circle, ${color}40 0%, transparent 70%)`,
|
||
}}
|
||
/>
|
||
{children}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
interface GradientOrbProps {
|
||
position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
|
||
color?: string;
|
||
className?: string;
|
||
}
|
||
|
||
const positionMap = {
|
||
"top-left": "top-0 left-0",
|
||
"top-right": "top-0 right-0",
|
||
"bottom-left": "bottom-0 left-0",
|
||
"bottom-right": "bottom-0 right-0",
|
||
};
|
||
|
||
export function GradientOrb({
|
||
position = "top-right",
|
||
color = "#00D9FF",
|
||
className,
|
||
}: GradientOrbProps) {
|
||
return (
|
||
<div
|
||
className={cn(
|
||
"absolute w-96 h-96 rounded-full blur-3xl opacity-5 pointer-events-none",
|
||
positionMap[position],
|
||
className
|
||
)}
|
||
style={{
|
||
background: `radial-gradient(circle, ${color} 0%, transparent 70%)`,
|
||
}}
|
||
/>
|
||
);
|
||
}
|
||
```
|
||
|
||
**Step 2: 验证类型检查**
|
||
|
||
Run: `npx tsc --noEmit`
|
||
|
||
Expected: 无类型错误
|
||
|
||
**Step 3: 提交发光效果组件**
|
||
|
||
Run:
|
||
```bash
|
||
git add src/components/effects/glow-effect.tsx
|
||
git commit -m "feat: create glow effect and gradient orb components"
|
||
```
|
||
|
||
Expected: 提交成功
|
||
|
||
---
|
||
|
||
## 阶段五：首页重构
|
||
|
||
### Task 14: 重构 Hero Section
|
||
|
||
**Files:**
|
||
- Modify: `src/components/sections/hero-section.tsx`
|
||
|
||
**Step 1: 读取现有 Hero Section**
|
||
|
||
Read: `src/components/sections/hero-section.tsx`
|
||
|
||
**Step 2: 重写 Hero Section 以支持深色主题和动画**
|
||
|
||
Modify: `src/components/sections/hero-section.tsx`
|
||
|
||
```typescript
|
||
"use client";
|
||
|
||
import { motion } from "framer-motion";
|
||
import { Button } from "@/components/ui/button";
|
||
import { ParticleBackground } from "@/components/effects/particle-background";
|
||
import { GradientOrb } from "@/components/effects/glow-effect";
|
||
import { COMPANY_INFO } from "@/lib/constants";
|
||
import { ArrowRight, Sparkles } from "lucide-react";
|
||
|
||
export function HeroSection() {
|
||
return (
|
||
<section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-16">
|
||
<ParticleBackground
|
||
particleCount={80}
|
||
colors={["#00D9FF", "#A855F7", "#06B6D4"]}
|
||
minSize={1}
|
||
maxSize={4}
|
||
speed={0.3}
|
||
/>
|
||
|
||
<GradientOrb position="top-right" color="#00D9FF" />
|
||
<GradientOrb position="bottom-left" color="#A855F7" />
|
||
|
||
<div className="container-wide relative z-10 py-24 md:py-32 lg:py-40">
|
||
<div className="max-w-4xl mx-auto text-center">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6 }}
|
||
className="mb-6"
|
||
>
|
||
<span className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-tech-blue/10 border border-tech-blue/20 text-tech-blue text-sm font-medium">
|
||
<Sparkles className="w-4 h-4" />
|
||
专注科技创新
|
||
</span>
|
||
</motion.div>
|
||
|
||
<motion.h1
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: 0.1 }}
|
||
className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight"
|
||
>
|
||
{COMPANY_INFO.slogan}
|
||
</motion.h1>
|
||
|
||
<motion.p
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: 0.2 }}
|
||
className="text-lg md:text-xl text-gray-400 mb-8 max-w-2xl mx-auto"
|
||
>
|
||
{COMPANY_INFO.description}
|
||
</motion.p>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: 0.3 }}
|
||
className="flex flex-col sm:flex-row gap-4 justify-center"
|
||
>
|
||
<Button size="lg" className="group">
|
||
立即体验
|
||
<ArrowRight className="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform" />
|
||
</Button>
|
||
<Button size="lg" variant="secondary">
|
||
了解更多
|
||
</Button>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ duration: 1, delay: 0.5 }}
|
||
className="absolute bottom-8 left-1/2 -translate-x-1/2"
|
||
>
|
||
<div className="flex flex-col items-center gap-2 text-gray-400">
|
||
<span className="text-sm">向下滚动</span>
|
||
<div className="w-6 h-10 rounded-full border-2 border-gray-600 flex justify-center pt-2">
|
||
<motion.div
|
||
animate={{ y: [0, 12, 0] }}
|
||
transition={{ duration: 1.5, repeat: Infinity }}
|
||
className="w-1.5 h-1.5 bg-tech-blue rounded-full"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</section>
|
||
);
|
||
}
|
||
```
|
||
|
||
**Step 3: 验证类型检查**
|
||
|
||
Run: `npx tsc --noEmit`
|
||
|
||
Expected: 无类型错误
|
||
|
||
**Step 4: 提交 Hero Section**
|
||
|
||
Run:
|
||
```bash
|
||
git add src/components/sections/hero-section.tsx
|
||
git commit -m "feat: refactor hero section with dark theme and animations"
|
||
```
|
||
|
||
Expected: 提交成功
|
||
|
||
---
|
||
|
||
### Task 15: 创建统计数据 Section
|
||
|
||
**Files:**
|
||
- Create: `src/components/sections/stats-section.tsx`
|
||
|
||
**Step 1: 创建统计数据 Section**
|
||
|
||
Create: `src/components/sections/stats-section.tsx`
|
||
|
||
```typescript
|
||
"use client";
|
||
|
||
import { motion } from "framer-motion";
|
||
import { STATS } from "@/lib/constants";
|
||
|
||
export function StatsSection() {
|
||
return (
|
||
<section className="py-20 bg-dark-secondary">
|
||
<div className="container-wide">
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
|
||
{STATS.map((stat, index) => (
|
||
<motion.div
|
||
key={stat.label}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||
className="text-center"
|
||
>
|
||
<div className="text-4xl md:text-5xl font-bold text-tech-blue mb-2">
|
||
{stat.value}
|
||
</div>
|
||
<div className="text-gray-400 text-sm md:text-base">
|
||
{stat.label}
|
||
</div>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
```
|
||
|
||
**Step 2: 验证类型检查**
|
||
|
||
Run: `npx tsc --noEmit`
|
||
|
||
Expected: 无类型错误
|
||
|
||
**Step 3: 提交统计数据 Section**
|
||
|
||
Run:
|
||
```bash
|
||
git add src/components/sections/stats-section.tsx
|
||
git commit -m "feat: create stats section with animated counters"
|
||
```
|
||
|
||
Expected: 提交成功
|
||
|
||
---
|
||
|
||
### Task 16: 重构产品展示 Section
|
||
|
||
**Files:**
|
||
- Modify: `src/components/sections/products-section.tsx`
|
||
|
||
**Step 1: 读取现有产品展示 Section**
|
||
|
||
Read: `src/components/sections/products-section.tsx`
|
||
|
||
**Step 2: 重写产品展示 Section 以支持深色主题和卡片效果**
|
||
|
||
Modify: `src/components/sections/products-section.tsx`
|
||
|
||
```typescript
|
||
"use client";
|
||
|
||
import { motion } from "framer-motion";
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { PRODUCTS } from "@/lib/constants";
|
||
import { ArrowRight } from "lucide-react";
|
||
|
||
export function ProductsSection() {
|
||
return (
|
||
<section className="py-20 bg-dark">
|
||
<div className="container-wide">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6 }}
|
||
className="text-center mb-12"
|
||
>
|
||
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
|
||
产品服务
|
||
</h2>
|
||
<p className="text-gray-400 max-w-2xl mx-auto">
|
||
为企业提供全方位的数字化解决方案，助力业务增长
|
||
</p>
|
||
</motion.div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
{PRODUCTS.slice(0, 6).map((product, index) => (
|
||
<motion.div
|
||
key={product.id}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||
>
|
||
<Card variant="hover" className="h-full">
|
||
<CardHeader>
|
||
<div className="flex items-start justify-between mb-2">
|
||
<Badge variant="default">{product.category}</Badge>
|
||
</div>
|
||
<CardTitle className="text-xl">{product.title}</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<CardDescription className="mb-4">
|
||
{product.description}
|
||
</CardDescription>
|
||
<div className="flex flex-wrap gap-2 mb-4">
|
||
{product.features.slice(0, 3).map((feature) => (
|
||
<Badge key={feature} variant="outline" className="text-xs">
|
||
{feature}
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
<a
|
||
href={`/products/${product.id}`}
|
||
className="inline-flex items-center text-tech-blue hover:text-tech-purple transition-colors duration-300 text-sm font-medium group"
|
||
>
|
||
了解更多
|
||
<ArrowRight className="ml-1 w-4 h-4 group-hover:translate-x-1 transition-transform" />
|
||
</a>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
```
|
||
|
||
**Step 3: 验证类型检查**
|
||
|
||
Run: `npx tsc --noEmit`
|
||
|
||
Expected: 无类型错误
|
||
|
||
**Step 4: 提交产品展示 Section**
|
||
|
||
Run:
|
||
```bash
|
||
git add src/components/sections/products-section.tsx
|
||
git commit -m "feat: refactor products section with dark theme and card layout"
|
||
```
|
||
|
||
Expected: 提交成功
|
||
|
||
---
|
||
|
||
## 阶段六：测试与验证
|
||
|
||
### Task 17: 运行开发服务器测试
|
||
|
||
**Files:**
|
||
- None
|
||
|
||
**Step 1: 启动开发服务器**
|
||
|
||
Run: `npm run dev`
|
||
|
||
Expected: 开发服务器成功启动在 http://localhost:3000
|
||
|
||
**Step 2: 在浏览器中验证首页**
|
||
|
||
手动测试：
|
||
- 访问 http://localhost:3000
|
||
- 验证深色主题是否正确应用
|
||
- 验证导航栏是否正常工作
|
||
- 验证 Hero Section 动画是否流畅
|
||
- 验证产品卡片悬停效果
|
||
- 验证响应式布局（移动端、平板、桌面）
|
||
|
||
Expected: 所有功能正常工作
|
||
|
||
**Step 3: 停止开发服务器**
|
||
|
||
按 Ctrl+C 停止服务器
|
||
|
||
Expected: 服务器成功停止
|
||
|
||
---
|
||
|
||
### Task 18: 运行构建测试
|
||
|
||
**Files:**
|
||
- None
|
||
|
||
**Step 1: 运行生产构建**
|
||
|
||
Run: `npm run build`
|
||
|
||
Expected: 构建成功，无错误
|
||
|
||
**Step 2: 检查构建输出**
|
||
|
||
验证构建输出中：
|
||
- 页面是否正确生成
|
||
- 是否有优化建议
|
||
- 构建大小是否合理
|
||
|
||
Expected: 构建输出正常
|
||
|
||
**Step 3: 运行代码检查**
|
||
|
||
Run: `npm run lint`
|
||
|
||
Expected: 无 ESLint 错误
|
||
|
||
---
|
||
|
||
### Task 19: 提交所有更改
|
||
|
||
**Files:**
|
||
- None
|
||
|
||
**Step 1: 检查 Git 状态**
|
||
|
||
Run: `git status`
|
||
|
||
Expected: 显示所有修改的文件
|
||
|
||
**Step 2: 添加所有更改**
|
||
|
||
Run: `git add .`
|
||
|
||
Expected: 所有更改已暂存
|
||
|
||
**Step 3: 创建提交**
|
||
|
||
Run:
|
||
```bash
|
||
git commit -m "feat: complete website redesign with dark tech theme
|
||
|
||
- Add dark theme color system and CSS variables
|
||
- Enhance UI components (Button, Card, Input, Badge)
|
||
- Refactor layout components (Header, Footer)
|
||
- Create effect components (ParticleBackground, GlowEffect)
|
||
- Refactor sections (Hero, Stats, Products)
|
||
- Add Framer Motion animations
|
||
- Improve responsive design
|
||
- Update Tailwind configuration"
|
||
```
|
||
|
||
Expected: 提交成功
|
||
|
||
**Step 4: 推送到远程**
|
||
|
||
Run: `git push origin feature/website-redesign`
|
||
|
||
Expected: 推送成功
|
||
|
||
---
|
||
|
||
## 完成清单
|
||
|
||
- [ ] 安装必要依赖（framer-motion, @antv/g2, class-variance-authority）
|
||
- [ ] 扩展 Tailwind 配置
|
||
- [ ] 更新全局样式
|
||
- [ ] 创建工具函数
|
||
- [ ] 创建主题常量
|
||
- [ ] 增强按钮组件
|
||
- [ ] 增强卡片组件
|
||
- [ ] 增强输入框组件
|
||
- [ ] 增强徽章组件
|
||
- [ ] 重构导航栏组件
|
||
- [ ] 重构页脚组件
|
||
- [ ] 创建粒子背景组件
|
||
- [ ] 创建发光效果组件
|
||
- [ ] 重构 Hero Section
|
||
- [ ] 创建统计数据 Section
|
||
- [ ] 重构产品展示 Section
|
||
- [ ] 运行开发服务器测试
|
||
- [ ] 运行构建测试
|
||
- [ ] 提交所有更改
|
||
|
||
---
|
||
|
||
## 注意事项
|
||
|
||
1. **每个任务都应该独立完成并提交**，便于版本控制和回滚
|
||
2. **遇到错误立即停止**，不要继续下一步
|
||
3. **保持代码风格一致**，遵循项目现有的代码规范
|
||
4. **测试每个组件**，确保在移动端和桌面端都能正常工作
|
||
5. **关注性能**，避免过度使用动画和特效
|
||
|
||
---
|
||
|
||
**计划创建者：** AI Assistant
|
||
**创建日期：** 2026-02-21
|
||
**预计工期：** 2-3天（基础架构 + 核心组件 + 首页重构）
|