docs: 添加医疗健康风格重构实施计划
- 23 个原子任务 - 5 个阶段：配色系统、UI组件、页面布局、内容更新、响应式优化 - 每个任务包含具体代码和验证步骤
This commit is contained in:
张翔
@@ -0,0 +1,802 @@
|
||||
# Novalon 官网医疗健康风格重构实施计划
|
||||
|
||||
> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
|
||||
|
||||
**Goal:** 将 Novalon 官网从深色科技风格重构为医疗健康风格（明亮、专业、可信赖）
|
||||
|
||||
**Architecture:** 采用专业蓝 `#005EB8` 为主色调，印章红 `#C41E3A` 作为品牌强调色，白色/浅灰背景。移除深色模式，统一使用明亮风格。重构所有 UI 组件、页面布局和内容策略。
|
||||
|
||||
**Tech Stack:** Next.js 16.1.6, React 19.2.3, TypeScript, Tailwind CSS 4.0, Framer Motion
|
||||
|
||||
---
|
||||
|
||||
## Phase 1: 配色系统更新
|
||||
|
||||
### Task 1: 更新 globals.css 配色变量
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/app/globals.css:1-200`
|
||||
|
||||
**Step 1: 替换 :root 变量为医疗健康配色**
|
||||
|
||||
将 `:root` 部分的配色变量替换为：
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* 主色调 - 专业蓝系 */
|
||||
--color-primary: #005EB8;
|
||||
--color-primary-hover: #003B73;
|
||||
--color-primary-light: #00A3E0;
|
||||
--color-primary-lighter: #E8F4FD;
|
||||
|
||||
/* 品牌色 - 印章红 */
|
||||
--color-brand-primary: #C41E3A;
|
||||
--color-brand-primary-hover: #A01830;
|
||||
--color-brand-primary-light: #E04A68;
|
||||
--color-brand-primary-bg: #FEF2F4;
|
||||
|
||||
/* 背景色系 - 明亮健康风 */
|
||||
--color-bg-primary: #FFFFFF;
|
||||
--color-bg-secondary: #F5F7FA;
|
||||
--color-bg-tertiary: #EEF2F7;
|
||||
--color-bg-hover: #E8ECF2;
|
||||
|
||||
/* 文字色系 */
|
||||
--color-text-primary: #1A1A2E;
|
||||
--color-text-secondary: #4A5568;
|
||||
--color-text-tertiary: #718096;
|
||||
--color-text-muted: #A0AEC0;
|
||||
|
||||
/* 边框色系 */
|
||||
--color-border-primary: #E2E8F0;
|
||||
--color-border-secondary: #CBD5E0;
|
||||
--color-border-accent: #005EB8;
|
||||
|
||||
/* 链接色 */
|
||||
--color-link: #005EB8;
|
||||
--color-link-hover: #003B73;
|
||||
|
||||
/* 状态色 */
|
||||
--color-success: #16A34A;
|
||||
--color-success-bg: #F0FDF4;
|
||||
--color-warning: #D97706;
|
||||
--color-warning-bg: #FFFBEB;
|
||||
--color-info: #0284C7;
|
||||
--color-info-bg: #F0F9FF;
|
||||
--color-error: #DC2626;
|
||||
--color-error-bg: #FEF2F2;
|
||||
|
||||
/* 阴影 */
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05);
|
||||
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.05);
|
||||
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.05);
|
||||
|
||||
/* 保留原有尺寸变量 */
|
||||
--font-size-xs: 0.75rem;
|
||||
--font-size-sm: 0.875rem;
|
||||
--font-size-base: 1rem;
|
||||
--font-size-lg: 1.125rem;
|
||||
--font-size-xl: 1.25rem;
|
||||
--font-size-2xl: 1.5rem;
|
||||
--font-size-3xl: 1.875rem;
|
||||
--font-size-4xl: 2.25rem;
|
||||
--font-size-5xl: 3rem;
|
||||
--font-size-6xl: 3.75rem;
|
||||
|
||||
--line-height-tight: 1.1;
|
||||
--line-height-snug: 1.25;
|
||||
--line-height-normal: 1.5;
|
||||
--line-height-relaxed: 1.625;
|
||||
|
||||
--letter-spacing-tight: -0.025em;
|
||||
--letter-spacing-normal: 0;
|
||||
--letter-spacing-wide: 0.025em;
|
||||
|
||||
--spacing-xs: 0.25rem;
|
||||
--spacing-sm: 0.5rem;
|
||||
--spacing-md: 1rem;
|
||||
--spacing-lg: 1.5rem;
|
||||
--spacing-xl: 2rem;
|
||||
--spacing-2xl: 3rem;
|
||||
--spacing-3xl: 4rem;
|
||||
--spacing-4xl: 6rem;
|
||||
--spacing-5xl: 8rem;
|
||||
|
||||
--border-width-thin: 0.5px;
|
||||
--border-width-normal: 1px;
|
||||
|
||||
--transition-fast: 150ms;
|
||||
--transition-normal: 200ms;
|
||||
--transition-slow: 300ms;
|
||||
|
||||
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
||||
}
|
||||
```
|
||||
|
||||
**Step 2: 移除 .dark 主题**
|
||||
|
||||
删除整个 `.dark` 选择器块（约 50 行），因为新设计只使用明亮风格。
|
||||
|
||||
**Step 3: 更新 body 背景和文字颜色**
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: var(--color-bg-primary);
|
||||
color: var(--color-text-primary);
|
||||
font-family: var(--font-chinese), var(--font-sans), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
line-height: var(--line-height-normal);
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background:
|
||||
radial-gradient(ellipse at 15% 20%, rgba(0, 94, 184, 0.03) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 85% 80%, rgba(196, 30, 58, 0.02) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
```
|
||||
|
||||
**Step 4: 运行开发服务器验证**
|
||||
|
||||
Run: `npm run dev`
|
||||
|
||||
Expected: 页面显示明亮背景，配色正常
|
||||
|
||||
**Step 5: Commit**
|
||||
|
||||
```bash
|
||||
git add src/app/globals.css
|
||||
git commit -m "style: 更新配色系统为医疗健康风格
|
||||
|
||||
- 专业蓝 #005EB8 为主色调
|
||||
- 印章红 #C41E3A 为品牌强调色
|
||||
- 移除深色模式
|
||||
- 明亮背景风格"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 2: 更新 colors.ts 配色定义
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/lib/colors.ts:1-113`
|
||||
|
||||
**Step 1: 替换整个文件内容**
|
||||
|
||||
```typescript
|
||||
export const brandColors = {
|
||||
primary: {
|
||||
600: '#005EB8',
|
||||
700: '#003B73',
|
||||
500: '#00A3E0',
|
||||
400: '#33B8E8',
|
||||
100: '#E8F4FD',
|
||||
},
|
||||
brand: {
|
||||
600: '#C41E3A',
|
||||
700: '#A01830',
|
||||
500: '#E04A68',
|
||||
400: '#F08C9F',
|
||||
100: '#FEF2F4',
|
||||
},
|
||||
neutral: {
|
||||
900: '#1A1A2E',
|
||||
800: '#2D3748',
|
||||
700: '#4A5568',
|
||||
600: '#718096',
|
||||
500: '#A0AEC0',
|
||||
400: '#CBD5E0',
|
||||
300: '#E2E8F0',
|
||||
200: '#EDF2F7',
|
||||
100: '#F5F7FA',
|
||||
50: '#FFFFFF',
|
||||
},
|
||||
success: {
|
||||
600: '#16A34A',
|
||||
100: '#F0FDF4',
|
||||
},
|
||||
warning: {
|
||||
600: '#D97706',
|
||||
100: '#FFFBEB',
|
||||
},
|
||||
info: {
|
||||
600: '#0284C7',
|
||||
100: '#F0F9FF',
|
||||
},
|
||||
error: {
|
||||
600: '#DC2626',
|
||||
100: '#FEF2F2',
|
||||
},
|
||||
} as const;
|
||||
|
||||
export const colorValues = {
|
||||
primary: '#005EB8',
|
||||
primaryHover: '#003B73',
|
||||
primaryLight: '#00A3E0',
|
||||
primaryLighter: '#E8F4FD',
|
||||
|
||||
brand: '#C41E3A',
|
||||
brandHover: '#A01830',
|
||||
brandLight: '#E04A68',
|
||||
brandBg: '#FEF2F4',
|
||||
|
||||
textPrimary: '#1A1A2E',
|
||||
textSecondary: '#4A5568',
|
||||
textTertiary: '#718096',
|
||||
textMuted: '#A0AEC0',
|
||||
|
||||
bgPrimary: '#FFFFFF',
|
||||
bgSecondary: '#F5F7FA',
|
||||
bgTertiary: '#EEF2F7',
|
||||
bgHover: '#E8ECF2',
|
||||
|
||||
border: '#E2E8F0',
|
||||
borderSecondary: '#CBD5E0',
|
||||
borderAccent: '#005EB8',
|
||||
|
||||
link: '#005EB8',
|
||||
linkHover: '#003B73',
|
||||
|
||||
success: '#16A34A',
|
||||
successBg: '#F0FDF4',
|
||||
warning: '#D97706',
|
||||
warningBg: '#FFFBEB',
|
||||
info: '#0284C7',
|
||||
infoBg: '#F0F9FF',
|
||||
error: '#DC2626',
|
||||
errorBg: '#FEF2F2',
|
||||
} as const;
|
||||
|
||||
export const gradients = {
|
||||
primary: 'linear-gradient(135deg, #005EB8 0%, #00A3E0 100%)',
|
||||
hero: 'linear-gradient(180deg, #F5F7FA 0%, #FFFFFF 100%)',
|
||||
brand: 'linear-gradient(135deg, #C41E3A 0%, #E04A68 100%)',
|
||||
subtle: 'linear-gradient(180deg, #FFFFFF 0%, #F5F7FA 100%)',
|
||||
} as const;
|
||||
|
||||
export type BrandColor = typeof brandColors;
|
||||
export type ColorValue = typeof colorValues;
|
||||
export type Gradient = typeof gradients;
|
||||
```
|
||||
|
||||
**Step 2: 验证 TypeScript 编译**
|
||||
|
||||
Run: `npx tsc --noEmit`
|
||||
|
||||
Expected: 无错误
|
||||
|
||||
**Step 3: Commit**
|
||||
|
||||
```bash
|
||||
git add src/lib/colors.ts
|
||||
git commit -m "refactor: 更新 colors.ts 配色定义为医疗健康风格"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 3: 更新 gradients.ts 渐变定义
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/lib/gradients.ts`
|
||||
|
||||
**Step 1: 替换文件内容**
|
||||
|
||||
```typescript
|
||||
export const gradients = {
|
||||
primary: 'linear-gradient(135deg, #005EB8 0%, #00A3E0 100%)',
|
||||
hero: 'linear-gradient(180deg, #F5F7FA 0%, #FFFFFF 100%)',
|
||||
brand: 'linear-gradient(135deg, #C41E3A 0%, #E04A68 100%)',
|
||||
subtle: 'linear-gradient(180deg, #FFFFFF 0%, #F5F7FA 100%)',
|
||||
card: 'linear-gradient(180deg, #FFFFFF 0%, #F5F7FA 100%)',
|
||||
cta: 'linear-gradient(135deg, #C41E3A 0%, #A01830 100%)',
|
||||
} as const;
|
||||
|
||||
export type GradientType = typeof gradients;
|
||||
```
|
||||
|
||||
**Step 2: Commit**
|
||||
|
||||
```bash
|
||||
git add src/lib/gradients.ts
|
||||
git commit -m "refactor: 更新渐变定义为医疗健康风格"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Phase 2: UI 组件重构
|
||||
|
||||
### Task 4: 重构 Button 组件
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/ui/button.tsx`
|
||||
|
||||
**Step 1: 更新 buttonVariants**
|
||||
|
||||
```typescript
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all duration-200 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-[#005EB8] focus-visible:ring-offset-2 focus-visible:ring-offset-white",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"bg-[#C41E3A] text-white hover:bg-[#A01830] hover:shadow-[0_4px_12px_rgba(196,30,58,0.25)] hover:-translate-y-0.5 active:scale-[0.98]",
|
||||
secondary:
|
||||
"bg-[#005EB8] text-white hover:bg-[#003B73] hover:shadow-[0_4px_12px_rgba(0,94,184,0.25)] hover:-translate-y-0.5 active:scale-[0.98]",
|
||||
destructive:
|
||||
"bg-[#DC2626] text-white hover:bg-[#B91C1C] focus-visible:ring-[#DC2626]",
|
||||
outline:
|
||||
"border-2 border-[#005EB8] bg-transparent text-[#005EB8] hover:bg-[#E8F4FD] hover:shadow-[0_2px_8px_rgba(0,94,184,0.15)]",
|
||||
ghost:
|
||||
"text-[#4A5568] hover:bg-[#F5F7FA] hover:text-[#1A1A2E]",
|
||||
link:
|
||||
"text-[#005EB8] underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default: "h-10 px-4 py-2",
|
||||
sm: "h-8 rounded-md px-3 text-xs",
|
||||
lg: "h-12 rounded-lg px-6 text-base",
|
||||
icon: "h-10 w-10",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
```
|
||||
|
||||
**Step 2: Commit**
|
||||
|
||||
```bash
|
||||
git add src/components/ui/button.tsx
|
||||
git commit -m "refactor: 更新 Button 组件为医疗健康风格"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 5: 重构 Card 组件
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/ui/card.tsx`
|
||||
|
||||
**Step 1: 读取当前文件内容**
|
||||
|
||||
Run: `cat src/components/ui/card.tsx`
|
||||
|
||||
**Step 2: 更新卡片样式**
|
||||
|
||||
将所有卡片样式更新为：
|
||||
- 背景：`#FFFFFF`
|
||||
- 边框：`#E2E8F0`
|
||||
- 圆角：`12px`
|
||||
- 阴影：`0 2px 8px rgba(0, 0, 0, 0.04)`
|
||||
- 悬停：上移 `4px` + 阴影增强
|
||||
|
||||
**Step 3: Commit**
|
||||
|
||||
```bash
|
||||
git add src/components/ui/card.tsx
|
||||
git commit -m "refactor: 更新 Card 组件为医疗健康风格"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 6: 重构 Badge 组件
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/ui/badge.tsx`
|
||||
|
||||
**Step 1: 更新徽章样式**
|
||||
|
||||
使用专业蓝和印章红作为徽章颜色，移除科技感的渐变。
|
||||
|
||||
**Step 2: Commit**
|
||||
|
||||
```bash
|
||||
git add src/components/ui/badge.tsx
|
||||
git commit -m "refactor: 更新 Badge 组件为医疗健康风格"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 7: 移除 ThemeToggle 组件
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/layout/header.tsx`
|
||||
- Delete: `src/components/ui/theme-toggle.tsx`
|
||||
- Modify: `src/contexts/theme-context.tsx`
|
||||
|
||||
**Step 1: 从 Header 中移除 ThemeToggle**
|
||||
|
||||
删除 `<ThemeToggle />` 相关代码。
|
||||
|
||||
**Step 2: 删除 theme-toggle.tsx 文件**
|
||||
|
||||
**Step 3: 简化 theme-context.tsx**
|
||||
|
||||
移除深色模式相关逻辑，只保留默认主题。
|
||||
|
||||
**Step 4: Commit**
|
||||
|
||||
```bash
|
||||
git add src/components/layout/header.tsx src/components/ui/theme-toggle.tsx src/contexts/theme-context.tsx
|
||||
git commit -m "refactor: 移除主题切换功能，统一使用明亮风格"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Phase 3: 页面布局重构
|
||||
|
||||
### Task 8: 重构 Header 组件
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/layout/header.tsx`
|
||||
|
||||
**Step 1: 更新导航栏样式**
|
||||
|
||||
- 背景：`#FFFFFF` + 底部阴影
|
||||
- 高度：`72px`
|
||||
- Logo：保留印章红元素
|
||||
- 导航链接：深灰文字 → 蓝色悬停
|
||||
- CTA 按钮：印章红
|
||||
|
||||
**Step 2: Commit**
|
||||
|
||||
```bash
|
||||
git add src/components/layout/header.tsx
|
||||
git commit -m "refactor: 重构 Header 为医疗健康风格"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 9: 重构 Footer 组件
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/layout/footer.tsx`
|
||||
|
||||
**Step 1: 更新页脚样式**
|
||||
|
||||
- 背景：`#F5F7FA`
|
||||
- 文字：深色
|
||||
- 链接：专业蓝
|
||||
|
||||
**Step 2: Commit**
|
||||
|
||||
```bash
|
||||
git add src/components/layout/footer.tsx
|
||||
git commit -m "refactor: 重构 Footer 为医疗健康风格"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 10: 重构 HeroSection 组件
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/sections/hero-section.tsx`
|
||||
|
||||
**Step 1: 更新 Hero 区域**
|
||||
|
||||
- 背景：浅蓝渐变 `linear-gradient(180deg, #F5F7FA 0%, #FFFFFF 100%)`
|
||||
- 布局：左文右图（桌面）
|
||||
- 文字：深色
|
||||
- 按钮：印章红 CTA + 蓝色轮廓
|
||||
- 移除深色背景和科技感粒子效果
|
||||
|
||||
**Step 2: Commit**
|
||||
|
||||
```bash
|
||||
git add src/components/sections/hero-section.tsx
|
||||
git commit -m "refactor: 重构 HeroSection 为医疗健康风格"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 11: 重构 ServicesSection 组件
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/sections/services-section.tsx`
|
||||
|
||||
**Step 1: 更新服务区域**
|
||||
|
||||
- 背景：白色
|
||||
- 卡片：白色背景 + 浅灰边框
|
||||
- 图标：专业蓝
|
||||
- 悬停效果：上移 + 阴影
|
||||
|
||||
**Step 2: Commit**
|
||||
|
||||
```bash
|
||||
git add src/components/sections/services-section.tsx
|
||||
git commit -m "refactor: 重构 ServicesSection 为医疗健康风格"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 12: 重构 ProductsSection 组件
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/sections/products-section.tsx`
|
||||
|
||||
**Step 1: 更新产品区域**
|
||||
|
||||
- 背景：`#F5F7FA`
|
||||
- 卡片：白色
|
||||
- 图标：专业蓝
|
||||
- 标签：浅蓝背景
|
||||
|
||||
**Step 2: Commit**
|
||||
|
||||
```bash
|
||||
git add src/components/sections/products-section.tsx
|
||||
git commit -m "refactor: 重构 ProductsSection 为医疗健康风格"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 13: 重构 AboutSection 组件
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/sections/about-section.tsx`
|
||||
|
||||
**Step 1: 更新关于我们区域**
|
||||
|
||||
- 背景：白色
|
||||
- 数据卡片：左边框印章红强调
|
||||
- 数字：印章红
|
||||
|
||||
**Step 2: Commit**
|
||||
|
||||
```bash
|
||||
git add src/components/sections/about-section.tsx
|
||||
git commit -m "refactor: 重构 AboutSection 为医疗健康风格"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 14: 重构 NewsSection 组件
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/sections/news-section.tsx`
|
||||
|
||||
**Step 1: 更新新闻区域**
|
||||
|
||||
- 背景：`#F5F7FA`
|
||||
- 卡片：白色
|
||||
- 日期：专业蓝
|
||||
|
||||
**Step 2: Commit**
|
||||
|
||||
```bash
|
||||
git add src/components/sections/news-section.tsx
|
||||
git commit -m "refactor: 重构 NewsSection 为医疗健康风格"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 15: 重构 ContactSection 组件
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/sections/contact-section.tsx`
|
||||
|
||||
**Step 1: 更新联系区域**
|
||||
|
||||
- 背景：印章红渐变
|
||||
- 表单：白色卡片
|
||||
- 输入框：浅灰边框，聚焦时蓝色边框
|
||||
|
||||
**Step 2: Commit**
|
||||
|
||||
```bash
|
||||
git add src/components/sections/contact-section.tsx
|
||||
git commit -m "refactor: 重构 ContactSection 为医疗健康风格"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Phase 4: 内容与数据更新
|
||||
|
||||
### Task 16: 更新 constants.ts 内容
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/lib/constants.ts`
|
||||
|
||||
**Step 1: 更新公司信息和标语**
|
||||
|
||||
- 更新 `COMPANY_INFO.slogan` 为情感化表达
|
||||
- 更新 `STATS` 数据
|
||||
- 更新 `SERVICES` 描述为情感化内容
|
||||
|
||||
**Step 2: Commit**
|
||||
|
||||
```bash
|
||||
git add src/lib/constants.ts
|
||||
git commit -m "content: 更新内容为情感化叙事风格"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 17: 添加信任背书 Section
|
||||
|
||||
**Files:**
|
||||
- Create: `src/components/sections/trust-section.tsx`
|
||||
- Modify: `src/app/(marketing)/page.tsx`
|
||||
|
||||
**Step 1: 创建信任背书组件**
|
||||
|
||||
包含：
|
||||
- 客户 Logo 轮播
|
||||
- 资质认证图标
|
||||
- 标题："与行业领袖同行"
|
||||
|
||||
**Step 2: 添加到首页**
|
||||
|
||||
在 Hero 后添加信任背书 Section。
|
||||
|
||||
**Step 3: Commit**
|
||||
|
||||
```bash
|
||||
git add src/components/sections/trust-section.tsx src/app/\(marketing\)/page.tsx
|
||||
git commit -m "feat: 添加信任背书 Section"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 18: 添加创新研发 Section
|
||||
|
||||
**Files:**
|
||||
- Create: `src/components/sections/innovation-section.tsx`
|
||||
- Modify: `src/app/(marketing)/page.tsx`
|
||||
|
||||
**Step 1: 创建创新研发组件**
|
||||
|
||||
包含：
|
||||
- 技术栈图标展示
|
||||
- 研发成果数据
|
||||
- 标题："持续创新，引领未来"
|
||||
|
||||
**Step 2: 添加到首页**
|
||||
|
||||
在产品服务后添加创新研发 Section。
|
||||
|
||||
**Step 3: Commit**
|
||||
|
||||
```bash
|
||||
git add src/components/sections/innovation-section.tsx src/app/\(marketing\)/page.tsx
|
||||
git commit -m "feat: 添加创新研发 Section"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 19: 添加客户支持入口
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/layout/footer.tsx`
|
||||
- Modify: `src/components/sections/contact-section.tsx`
|
||||
|
||||
**Step 1: 在页脚添加客户支持链接**
|
||||
|
||||
- 多渠道联系方式
|
||||
- FAQ 入口
|
||||
- 服务承诺
|
||||
|
||||
**Step 2: 在联系区域添加支持信息**
|
||||
|
||||
**Step 3: Commit**
|
||||
|
||||
```bash
|
||||
git add src/components/layout/footer.tsx src/components/sections/contact-section.tsx
|
||||
git commit -m "feat: 添加客户支持体系入口"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Phase 5: 响应式适配与优化
|
||||
|
||||
### Task 20: 更新 globals.css 响应式样式
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/app/globals.css`
|
||||
|
||||
**Step 1: 更新移动端样式**
|
||||
|
||||
确保所有样式在移动端正确显示：
|
||||
- 字体大小适配
|
||||
- 间距适配
|
||||
- 布局适配
|
||||
|
||||
**Step 2: Commit**
|
||||
|
||||
```bash
|
||||
git add src/app/globals.css
|
||||
git commit -m "style: 优化响应式适配"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 21: 测试所有页面
|
||||
|
||||
**Step 1: 运行开发服务器**
|
||||
|
||||
Run: `npm run dev`
|
||||
|
||||
**Step 2: 检查所有页面**
|
||||
|
||||
- 首页
|
||||
- 关于我们
|
||||
- 产品服务
|
||||
- 新闻动态
|
||||
- 联系我们
|
||||
|
||||
**Step 3: 检查响应式**
|
||||
|
||||
在以下断点测试：
|
||||
- 移动端 (375px)
|
||||
- 平板 (768px)
|
||||
- 桌面 (1280px)
|
||||
|
||||
**Step 4: 修复发现的问题**
|
||||
|
||||
---
|
||||
|
||||
### Task 22: 运行 lint 和类型检查
|
||||
|
||||
**Step 1: 运行 ESLint**
|
||||
|
||||
Run: `npm run lint`
|
||||
|
||||
Expected: 无错误
|
||||
|
||||
**Step 2: 运行 TypeScript 检查**
|
||||
|
||||
Run: `npx tsc --noEmit`
|
||||
|
||||
Expected: 无错误
|
||||
|
||||
**Step 3: 修复发现的问题**
|
||||
|
||||
---
|
||||
|
||||
### Task 23: 最终提交
|
||||
|
||||
**Step 1: 检查所有更改**
|
||||
|
||||
Run: `git status`
|
||||
|
||||
**Step 2: 提交所有更改**
|
||||
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "feat: 完成医疗健康风格重构
|
||||
|
||||
- 专业蓝 #005EB8 为主色调
|
||||
- 印章红 #C41E3A 为品牌强调色
|
||||
- 明亮背景风格
|
||||
- 移除深色模式
|
||||
- 更新所有 UI 组件
|
||||
- 添加信任背书和创新研发 Section
|
||||
- 添加客户支持体系"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 验收清单
|
||||
|
||||
- [ ] 配色系统与设计稿一致
|
||||
- [ ] 所有 UI 组件样式正确
|
||||
- [ ] 响应式布局正常
|
||||
- [ ] 无深色模式残留
|
||||
- [ ] ESLint 无错误
|
||||
- [ ] TypeScript 无错误
|
||||
- [ ] 所有页面正常显示
|
||||
- [ ] 交互效果正常
|
||||
Reference in New Issue
Block a user