fix: 修复 lint 错误
- 修复 Input/Textarea 组件中 React Hook 条件调用问题 - 修复 AboutSection 中的引号转义问题 - 更新 Input/Textarea 样式为医疗健康风格
This commit is contained in:
张翔
@@ -0,0 +1,534 @@
|
||||
# 网站设计优化实施计划
|
||||
|
||||
> **For Claude:** REQUIRED SUB-SKILL: Use `executing-plans` to implement this plan task-by-task.
|
||||
|
||||
**Goal:** 融合 Stripe 和 Wickret 设计风格，全面优化网站视觉体验，保留品牌红色作为点缀色
|
||||
|
||||
**Architecture:** 采用深色主题为主（Stripe 风格）+ 现代渐变色彩（Wickret 风格），通过 CSS 变量管理主题，Framer Motion 实现动画
|
||||
|
||||
**Tech Stack:** Next.js 14, Tailwind CSS, Framer Motion, TypeScript
|
||||
|
||||
---
|
||||
|
||||
## 阶段一：色彩与主题系统升级
|
||||
|
||||
### Task 1: 更新全局 CSS 变量色彩系统
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/app/globals.css:1-120`
|
||||
|
||||
**Step 1: 添加新的深色主题色彩变量**
|
||||
|
||||
```css
|
||||
/* 在 :root 后添加新的色彩变量 */
|
||||
--color-dark-bg: #0A0A0A;
|
||||
--color-dark-surface: #141414;
|
||||
--color-dark-elevated: #1A1A1A;
|
||||
--color-dark-border: #2A2A2A;
|
||||
|
||||
/* 渐变色彩 - Wickret 风格 */
|
||||
--color-gradient-start: #6366F1;
|
||||
--color-gradient-mid: #8B5CF6;
|
||||
--color-gradient-end: #D946EF;
|
||||
|
||||
/* 品牌红色保留作为点缀 */
|
||||
--color-accent-red: #C41E3A;
|
||||
--color-accent-red-glow: rgba(196, 30, 58, 0.4);
|
||||
```
|
||||
|
||||
**Step 2: 验证无语法错误**
|
||||
|
||||
Run: `npm run build 2>&1 | head -20`
|
||||
|
||||
Expected: 无 CSS 错误
|
||||
|
||||
---
|
||||
|
||||
### Task 2: 创建渐变工具类
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/app/globals.css`
|
||||
|
||||
**Step 1: 添加渐变背景和文字工具类**
|
||||
|
||||
```css
|
||||
@layer utilities {
|
||||
.bg-gradient-modern {
|
||||
background: linear-gradient(135deg, var(--color-dark-bg) 0%, #1a1a2e 50%, #16213e 100%);
|
||||
}
|
||||
|
||||
.text-gradient-brand {
|
||||
background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-mid), var(--color-gradient-end));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.bg-glow-red {
|
||||
background: radial-gradient(circle at center, var(--color-accent-red-glow) 0%, transparent 70%);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Step 2: 运行构建验证**
|
||||
|
||||
Run: `npm run build 2>&1 | head -20`
|
||||
|
||||
Expected: 构建成功
|
||||
|
||||
---
|
||||
|
||||
## 阶段二：Hero 区域深度优化
|
||||
|
||||
### Task 3: 重构 HeroSection 背景效果
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/sections/hero-section.tsx:40-70`
|
||||
|
||||
**Step 1: 替换背景为深色渐变**
|
||||
|
||||
```tsx
|
||||
// 替换现有的浅色背景
|
||||
className="relative min-h-screen flex items-center pt-16 overflow-hidden bg-dark-bg"
|
||||
```
|
||||
|
||||
**Step 2: 添加新的光效元素**
|
||||
|
||||
```tsx
|
||||
<div className="absolute inset-0 pointer-events-none overflow-hidden bg-dark-bg">
|
||||
{/* 主渐变背景 */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[#0A0A0A] via-[#1a1a2e] to-[#0A0A0A]" />
|
||||
|
||||
{/* 动态光效 - 类似 Stripe */}
|
||||
<div className="absolute top-0 left-1/4 w-[600px] h-[600px] bg-gradient-radial from-indigo-500/20 via-purple-500/10 to-transparent rounded-full blur-3xl animate-pulse" />
|
||||
<div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-gradient-radial from-pink-500/15 via-red-500/5 to-transparent rounded-full blur-3xl animate-pulse" style={{ animationDelay: '1.5s' }} />
|
||||
|
||||
{/* 网格背景 - Stripe 风格 */}
|
||||
<div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:60px_60px]" />
|
||||
</div>
|
||||
```
|
||||
|
||||
**Step 3: 验证视觉效果**
|
||||
|
||||
Run: `npm run dev`
|
||||
|
||||
Expected: 深色背景正常显示
|
||||
|
||||
---
|
||||
|
||||
### Task 4: 优化 Hero 标题和文字样式
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/sections/hero-section.tsx:75-95`
|
||||
|
||||
**Step 1: 更新标题样式为渐变文字**
|
||||
|
||||
```tsx
|
||||
<h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold tracking-tight mb-8">
|
||||
<span className="text-gradient-brand">{COMPANY_INFO.shortName}</span>
|
||||
<br />
|
||||
<span className="text-white/90">企业数字化转型服务商</span>
|
||||
</h1>
|
||||
```
|
||||
|
||||
**Step 2: 更新描述文字**
|
||||
|
||||
```tsx
|
||||
<p className="text-lg sm:text-xl text-gray-400 mb-10 max-w-2xl mx-auto leading-relaxed">
|
||||
融合 Stripe 级专业品质 + 现代科技美学，为您打造卓越的数字体验
|
||||
</p>
|
||||
```
|
||||
|
||||
**Step 3: 验证**
|
||||
|
||||
Run: `npm run build`
|
||||
|
||||
Expected: 构建成功
|
||||
|
||||
---
|
||||
|
||||
### Task 5: 升级 CTA 按钮为渐变风格
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/sections/hero-section.tsx:97-112`
|
||||
|
||||
**Step 1: 更新主按钮样式**
|
||||
|
||||
```tsx
|
||||
<Button
|
||||
size="lg"
|
||||
onClick={() => handleScrollTo('about')}
|
||||
className="relative overflow-hidden group bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 hover:from-indigo-600 hover:via-purple-600 hover:to-pink-600 text-white border-0 shadow-lg shadow-purple-500/25 hover:shadow-purple-500/40 transition-all duration-300"
|
||||
>
|
||||
<span className="relative z-10 flex items-center">
|
||||
了解更多
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</span>
|
||||
<div className="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
|
||||
</Button>
|
||||
```
|
||||
|
||||
**Step 2: 更新次按钮样式**
|
||||
|
||||
```tsx
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
onClick={() => handleScrollTo('contact')}
|
||||
className="border-gray-700 text-white hover:bg-gray-800/50 hover:border-gray-600 bg-transparent"
|
||||
>
|
||||
联系我们
|
||||
</Button>
|
||||
```
|
||||
|
||||
**Step 3: 验证**
|
||||
|
||||
Run: `npm run build`
|
||||
|
||||
Expected: 构建成功
|
||||
|
||||
---
|
||||
|
||||
### Task 6: 优化统计数字展示区
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/sections/hero-section.tsx:140-180`
|
||||
|
||||
**Step 1: 更新统计区背景和样式**
|
||||
|
||||
```tsx
|
||||
<motion.div
|
||||
id="stats-section"
|
||||
className="pt-16 border-t border-gray-800/50"
|
||||
>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12">
|
||||
{STATS.map((stat, index) => (
|
||||
<StatItem
|
||||
key={stat.label}
|
||||
stat={stat}
|
||||
index={index}
|
||||
shouldAnimate={statsVisible}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
```
|
||||
|
||||
**Step 2: 更新 StatItem 样式**
|
||||
|
||||
```tsx
|
||||
function StatItem({ stat, index, shouldAnimate }: {
|
||||
stat: { value: string; label: string };
|
||||
index: number;
|
||||
shouldAnimate: boolean;
|
||||
}) {
|
||||
return (
|
||||
<motion.div
|
||||
className="group cursor-default text-center"
|
||||
>
|
||||
<div className="text-4xl sm:text-5xl font-bold text-gradient-brand mb-3">
|
||||
{shouldAnimate ? (
|
||||
<AnimatedCounter value={numericValue} suffix={suffix} />
|
||||
) : (
|
||||
<span className="text-white/30">0{suffix}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 group-hover:text-gray-400 transition-colors">
|
||||
{stat.label}
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
**Step 3: 验证**
|
||||
|
||||
Run: `npm run build`
|
||||
|
||||
Expected: 构建成功
|
||||
|
||||
---
|
||||
|
||||
## 阶段三：服务卡片升级
|
||||
|
||||
### Task 7: 优化 GlassCard 组件
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/ui/glass-card.tsx`
|
||||
|
||||
**Step 1: 更新 GlassCard 变体**
|
||||
|
||||
```tsx
|
||||
const glassCardVariants = cva(
|
||||
"rounded-2xl border backdrop-blur-xl transition-all duration-300",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"border-gray-800/50 bg-gray-900/50 hover:border-purple-500/50 hover:bg-gray-800/60 hover:shadow-[0_0_40px_rgba(139,92,246,0.15)] hover:-translate-y-1",
|
||||
elevated:
|
||||
"border-gray-800 bg-gray-900/80 shadow-2xl hover:border-purple-500/50 hover:shadow-purple-500/20 hover:-translate-y-2",
|
||||
outline:
|
||||
"border-gray-800/50 bg-transparent hover:border-purple-500/30 hover:bg-gray-900/30",
|
||||
glow:
|
||||
"border-gray-800/50 bg-gray-900/40 relative overflow-hidden hover:border-purple-500/40",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
```
|
||||
|
||||
**Step 2: 验证**
|
||||
|
||||
Run: `npm run build`
|
||||
|
||||
Expected: 构建成功
|
||||
|
||||
---
|
||||
|
||||
### Task 8: 重构 ServicesSection
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/sections/services-section.tsx`
|
||||
|
||||
**Step 1: 更新区域背景和标题**
|
||||
|
||||
```tsx
|
||||
<section id="services" className="py-24 bg-dark-bg relative overflow-hidden">
|
||||
{/* 背景装饰 */}
|
||||
<div className="absolute top-1/2 left-0 w-[400px] h-[400px] bg-purple-500/10 rounded-full blur-3xl" />
|
||||
<div className="absolute top-1/3 right-0 w-[300px] h-[300px] bg-pink-500/10 rounded-full blur-3xl" />
|
||||
|
||||
<div className="container-wide relative z-10">
|
||||
{/* 标题区域 */}
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-white mb-4">
|
||||
我们的 <span className="text-gradient-brand">核心服务</span>
|
||||
</h2>
|
||||
<p className="text-gray-400 max-w-2xl mx-auto text-lg">
|
||||
专业技术团队，为您提供全方位的数字化解决方案
|
||||
</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
**Step 2: 更新服务卡片布局**
|
||||
|
||||
```tsx
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{SERVICES.map((service, index) => (
|
||||
<motion.div
|
||||
key={service.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: index * 0.1 }}
|
||||
>
|
||||
<GlassCard variant="default" className="p-6 h-full group cursor-pointer">
|
||||
{/* 卡片内容 */}
|
||||
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
|
||||
<IconComponent name={service.icon} className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-white mb-3">{service.title}</h3>
|
||||
<p className="text-gray-400 text-sm leading-relaxed">{service.description}</p>
|
||||
</GlassCard>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
```
|
||||
|
||||
**Step 3: 验证**
|
||||
|
||||
Run: `npm run build`
|
||||
|
||||
Expected: 构建成功
|
||||
|
||||
---
|
||||
|
||||
## 阶段四：关于我们与产品区域
|
||||
|
||||
### Task 9: 优化 AboutSection
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/sections/about-section.tsx`
|
||||
|
||||
**Step 1: 更新背景为深色**
|
||||
|
||||
```tsx
|
||||
<section id="about" className="py-24 bg-dark-surface relative">
|
||||
<div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.01)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.01)_1px,transparent_1px)] bg-[size:40px_40px]" />
|
||||
```
|
||||
|
||||
**Step 2: 更新文字颜色**
|
||||
|
||||
```tsx
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
|
||||
关于 <span className="text-gradient-brand">{COMPANY_INFO.shortName}</span>
|
||||
</h2>
|
||||
<p className="text-gray-400 text-lg leading-relaxed max-w-3xl">
|
||||
{COMPANY_INFO.description}
|
||||
</p>
|
||||
```
|
||||
|
||||
**Step 3: 验证**
|
||||
|
||||
Run: `npm run build`
|
||||
|
||||
Expected: 构建成功
|
||||
|
||||
---
|
||||
|
||||
### Task 10: 优化 ProductsSection
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/sections/products-section.tsx`
|
||||
|
||||
**Step 1: 更新产品卡片样式**
|
||||
|
||||
```tsx
|
||||
<div className="space-y-8">
|
||||
{PRODUCTS.map((product, index) => (
|
||||
<motion.div
|
||||
key={product.id}
|
||||
initial={{ opacity: 0, x: index % 2 === 0 ? -20 : 20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
<GlassCard variant="elevated" className="p-8 group hover:border-purple-500/30">
|
||||
{/* 产品内容 */}
|
||||
</GlassCard>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
```
|
||||
|
||||
**Step 2: 验证**
|
||||
|
||||
Run: `npm run build`
|
||||
|
||||
Expected: 构建成功
|
||||
|
||||
---
|
||||
|
||||
## 阶段五：联系区域与 Footer
|
||||
|
||||
### Task 11: 优化 ContactSection
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/sections/contact-section.tsx`
|
||||
|
||||
**Step 1: 更新背景和样式**
|
||||
|
||||
```tsx
|
||||
<section id="contact" className="py-24 bg-dark-bg relative overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-radial from-purple-500/10 via-transparent to-transparent" />
|
||||
```
|
||||
|
||||
**Step 2: 更新表单样式**
|
||||
|
||||
```tsx
|
||||
<input className="w-full px-4 py-3 bg-gray-900/50 border border-gray-800 rounded-xl text-white placeholder-gray-500 focus:outline-none focus:border-purple-500/50 focus:ring-2 focus:ring-purple-500/20 transition-all"
|
||||
```
|
||||
|
||||
**Step 3: 验证**
|
||||
|
||||
Run: `npm run build`
|
||||
|
||||
Expected: 构建成功
|
||||
|
||||
---
|
||||
|
||||
### Task 12: 优化 Header 组件
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/layout/header.tsx`
|
||||
|
||||
**Step 1: 更新 Header 背景**
|
||||
|
||||
```tsx
|
||||
<header className="fixed top-0 left-0 right-0 z-50 bg-dark-bg/80 backdrop-blur-xl border-b border-gray-800/50">
|
||||
```
|
||||
|
||||
**Step 2: 更新导航链接颜色**
|
||||
|
||||
```tsx
|
||||
<nav className="flex items-center gap-8">
|
||||
{NAVIGATION.map((item) => (
|
||||
<a
|
||||
key={item.id}
|
||||
href={item.href}
|
||||
className="text-sm text-gray-400 hover:text-white transition-colors relative group"
|
||||
>
|
||||
{item.label}
|
||||
<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-indigo-500 to-purple-500 group-hover:w-full transition-all duration-300" />
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
```
|
||||
|
||||
**Step 3: 验证**
|
||||
|
||||
Run: `npm run build`
|
||||
|
||||
Expected: 构建成功
|
||||
|
||||
---
|
||||
|
||||
### Task 13: 优化 Footer 组件
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/layout/footer.tsx`
|
||||
|
||||
**Step 1: 更新 Footer 背景**
|
||||
|
||||
```tsx
|
||||
<footer className="bg-dark-surface border-t border-gray-800/50 py-12">
|
||||
```
|
||||
|
||||
**Step 2: 验证**
|
||||
|
||||
Run: `npm run build`
|
||||
|
||||
Expected: 构建成功
|
||||
|
||||
---
|
||||
|
||||
## 阶段六：最终验证与测试
|
||||
|
||||
### Task 14: 运行完整构建和类型检查
|
||||
|
||||
**Step 1: 运行构建**
|
||||
|
||||
Run: `npm run build`
|
||||
|
||||
Expected: 构建成功，无错误
|
||||
|
||||
**Step 2: 运行类型检查**
|
||||
|
||||
Run: `npm run lint`
|
||||
|
||||
Expected: 无 lint 错误
|
||||
|
||||
**Step 3: 启动开发服务器验证**
|
||||
|
||||
Run: `npm run dev`
|
||||
|
||||
Expected: 开发服务器正常启动
|
||||
|
||||
---
|
||||
|
||||
## 执行总结
|
||||
|
||||
此计划涵盖 14 个任务，分为 6 个阶段：
|
||||
|
||||
1. **色彩与主题系统** (Task 1-2): CSS 变量和工具类
|
||||
2. **Hero 区域** (Task 3-6): 背景、标题、按钮、统计数字
|
||||
3. **服务卡片** (Task 7-8): GlassCard 升级和服务区域
|
||||
4. **关于与产品** (Task 9-10): 页面深色主题
|
||||
5. **联系与导航** (Task 11-13): 表单和页眉页脚
|
||||
6. **验证测试** (Task 14): 构建和检查
|
||||
|
||||
每个任务都设计为独立可验证，确保逐步改进网站设计。
|
||||
Reference in New Issue
Block a user