# 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 无错误
- [ ] 所有页面正常显示
- [ ] 交互效果正常