# 设计系统迁移示例

## 概述

本文档展示了如何将现有组件迁移到统一的设计系统。以 `AppearanceSettingsPanel.tsx` 为例。

## 迁移步骤

### 1. 导入样式工具

```tsx
// 迁移前
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'

// 迁移后
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { cardStyles, buttonStyles, inputStyles, navItemStyles, cn } from '@/lib/ui-styles'
```

### 2. 替换卡片样式

```tsx
// 迁移前
<div className="rounded-2xl border border-slate-200/60 dark:border-slate-700/60 bg-white/80 dark:bg-slate-900/60 p-8">

// 迁移后
<div className={cn(cardStyles.base, 'flex flex-col items-center gap-4')}>
```

### 3. 替换按钮样式

```tsx
// 迁移前
<button className="px-6 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 transition-all">

// 迁移后
<button className={buttonStyles.secondary}>
```

### 4. 替换输入框样式

```tsx
// 迁移前
<input className="w-full px-4 py-3 rounded-2xl border border-slate-200 dark:border-slate-700 bg-slate-50/80 dark:bg-slate-900 text-slate-900 dark:text-white focus:border-indigo-400 focus:ring-2 focus:ring-indigo-200 dark:focus:ring-indigo-600 outline-none transition-all" />

// 迁移后
<input className={inputStyles.base} />
```

### 5. 替换导航项样式

```tsx
// 迁移前
const navButtonClass = (key: SectionKey) =>
  `w-full px-4 py-3 rounded-2xl border text-left group transition-all duration-500 ${
    activeNav === key
      ? 'border-indigo-400/70 bg-white dark:bg-slate-900 shadow-lg shadow-indigo-500/30'
      : 'border-slate-200/70 dark:border-slate-700/70 hover:border-indigo-400/50 hover:bg-indigo-50/70 dark:hover:bg-indigo-900/20'
  }`

// 迁移后
const navButtonClass = (key: SectionKey) =>
  cn(
    'w-full text-left group',
    activeNav === key ? navItemStyles.active : navItemStyles.hover
  )
```

### 6. 使用 cn() 组合样式

```tsx
// 迁移前
<div className={`rounded-3xl border border-slate-200/70 dark:border-slate-700/40 bg-white dark:bg-[#141e32] shadow-xl p-6 space-y-6 ${sectionRevealClass('brand')} ${staggerDelays.brand}`}>

// 迁移后
<div className={cn(
  cardStyles.large,
  'space-y-6',
  sectionRevealClass('brand'),
  staggerDelays.brand
)}>
```

## 迁移统计

在 `AppearanceSettingsPanel.tsx` 中：

- ✅ 替换了 6 个卡片样式
- ✅ 替换了 8 个按钮样式
- ✅ 替换了 8 个输入框样式
- ✅ 替换了导航项样式函数
- ✅ 使用 `cn()` 函数统一组合样式

## 注意事项

### 1. 保留特殊样式

对于有特殊需求的组件（如渐变背景），可以保留部分自定义样式：

```tsx
// 保留渐变背景的特殊按钮
<button className={cn(
  'px-5 py-2.5 rounded-xl bg-gradient-to-r from-indigo-500 to-purple-500 text-white text-sm font-semibold shadow-lg shadow-indigo-500/40 hover:shadow-xl transition-all duration-200',
  'disabled:opacity-60 disabled:cursor-not-allowed'
)}>
```

### 2. 条件样式

使用 `cn()` 函数处理条件样式：

```tsx
<div className={cn(
  cardStyles.base,
  isActive && 'ring-2 ring-indigo-500',
  isDisabled && 'opacity-50'
)}>
```

### 3. 额外类名

在统一样式基础上添加额外的 Tailwind 类：

```tsx
<input className={cn(inputStyles.base, 'text-sm font-mono')} />
```

## 验证清单

迁移完成后，请检查：

- [ ] 所有卡片使用统一的圆角（`rounded-2xl` 或 `rounded-3xl`）
- [ ] 所有按钮使用统一的样式工具类
- [ ] 所有输入框使用统一的样式工具类
- [ ] 导航项使用统一的样式工具类
- [ ] 深色模式正常工作
- [ ] 悬停和交互效果正常
- [ ] 响应式布局正常
- [ ] 没有 lint 错误

## 下一步

1. 继续迁移其他组件
2. 在代码审查中检查是否遵循设计系统
3. 更新组件文档，说明使用的样式工具类