Files

T

- 23 个原子任务
- 5 个阶段：配色系统、UI组件、页面布局、内容更新、响应式优化
- 每个任务包含具体代码和验证步骤

2026-02-23 00:00:08 +08:00

17 KiB

Raw Blame History

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 部分的配色变量替换为：

: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 背景和文字颜色

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

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: 替换整个文件内容

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

git add src/lib/colors.ts
git commit -m "refactor: 更新 colors.ts 配色定义为医疗健康风格"

Task 3: 更新 gradients.ts 渐变定义

Files:

Modify: src/lib/gradients.ts

Step 1: 替换文件内容

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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: 提交所有更改

git add .
git commit -m "feat: 完成医疗健康风格重构

- 专业蓝 #005EB8 为主色调
- 印章红 #C41E3A 为品牌强调色
- 明亮背景风格
- 移除深色模式
- 更新所有 UI 组件
- 添加信任背书和创新研发 Section
- 添加客户支持体系"

验收清单

配色系统与设计稿一致
所有 UI 组件样式正确
响应式布局正常
无深色模式残留
ESLint 无错误
TypeScript 无错误
所有页面正常显示
交互效果正常

17 KiB Raw Blame History

Novalon 官网医疗健康风格重构实施计划

Phase 1: 配色系统更新

Task 1: 更新 globals.css 配色变量

Task 2: 更新 colors.ts 配色定义

Task 3: 更新 gradients.ts 渐变定义

Phase 2: UI 组件重构

Task 4: 重构 Button 组件

Task 5: 重构 Card 组件

Task 6: 重构 Badge 组件

Task 7: 移除 ThemeToggle 组件

Phase 3: 页面布局重构

Task 8: 重构 Header 组件

Task 9: 重构 Footer 组件

Task 10: 重构 HeroSection 组件

Task 11: 重构 ServicesSection 组件

Task 12: 重构 ProductsSection 组件

Task 13: 重构 AboutSection 组件

Task 14: 重构 NewsSection 组件

Task 15: 重构 ContactSection 组件

Phase 4: 内容与数据更新

Task 16: 更新 constants.ts 内容

Task 17: 添加信任背书 Section

Task 18: 添加创新研发 Section

Task 19: 添加客户支持入口

Phase 5: 响应式适配与优化

Task 20: 更新 globals.css 响应式样式

Task 21: 测试所有页面

Task 22: 运行 lint 和类型检查

Task 23: 最终提交

验收清单

17 KiB

Raw Blame History