monisuo/SHADCN_INTEGRATION.md

# Shadcn UI for Flutter - 集成完成

## ✅ 已完成

### 1. 技能文档创建

已创建完整的 shadcn_ui Flutter 技能文档，位于：
```
~/.agents/skills/shadcn-ui-flutter/SKILL.md
```

以后 LLM 可以通过这个技能文档了解如何使用 shadcn_ui。

### 2. 项目集成

已将 shadcn_ui 集成到 monisuo 项目：
- 更新 `pubspec.yaml` 添加 shadcn_ui 依赖
- 更新 `main.dart` 使用 ShadApp
- 创建 shadcn 风格的登录页面示例

---

## 📦 依赖

```yaml
dependencies:
  shadcn_ui: ^0.2.4
  flutter_localizations: sdk: flutter
```

---

## 🚀 使用方式

### 1. 安装依赖

```bash
cd ~/Desktop/projects/monisuo/flutter_monisuo
flutter pub get
```

### 2. 导入组件

```dart
import 'package:shadcn_ui/shadcn_ui.dart';
```

### 3. 使用组件

```dart
// 按钮
ShadButton(child: Text('Primary'), onPressed: () {})
ShadButton.secondary(child: Text('Secondary'))
ShadButton.destructive(child: Text('Delete'))

// 输入框
ShadInputFormField(
  id: 'email',
  label: Text('Email'),
  placeholder: Text('Enter email'),
)

// 卡片
ShadCard(
  title: Text('Card Title'),
  description: Text('Card description'),
  child: Text('Content'),
)

// 对话框
showShadDialog(
  context: context,
  builder: (context) => ShadDialog(
    title: Text('Dialog'),
    actions: [
      ShadButton(child: Text('OK')),
    ],
  ),
)
```

---

## 🎨 主题

### 深色主题（默认）

```dart
ShadApp(
  themeMode: ThemeMode.dark,
  darkTheme: ShadThemeData(
    brightness: Brightness.dark,
    colorScheme: const ShadSlateColorScheme.dark(),
  ),
)
```

### 可用颜色方案

- `blue` - 蓝色
- `slate` - 石板色（推荐深色模式）
- `zinc` - 锌色（推荐浅色模式）
- `green` - 绿色
- `red` - 红色
- `violet` - 紫色
- 等等...

### 切换主题

```dart
final colorScheme = ShadColorScheme.fromName('slate', brightness: Brightness.dark);
```

---

## 📝 迁移现有代码

### Material Button → Shadcn Button

```dart
// Before
ElevatedButton(
  child: Text('Submit'),
  onPressed: () {},
)

// After
ShadButton(
  child: Text('Submit'),
  onPressed: () {},
)
```

### Material TextField → Shadcn Input

```dart
// Before
TextField(
  decoration: InputDecoration(
    labelText: 'Email',
  ),
)

// After
ShadInputFormField(
  id: 'email',
  label: Text('Email'),
  placeholder: Text('Enter email'),
)
```

### Material Card → Shadcn Card

```dart
// Before
Card(
  child: Text('Content'),
)

// After
ShadCard(
  title: Text('Title'),
  description: Text('Description'),
  child: Text('Content'),
)
```

---

## 🎯 核心组件

### Button（按钮）
- `ShadButton` - 主要按钮
- `ShadButton.secondary` - 次要按钮
- `ShadButton.destructive` - 危险按钮
- `ShadButton.outline` - 边框按钮
- `ShadButton.ghost` - 幽灵按钮
- `ShadButton.link` - 链接按钮

### Input（输入框）
- `ShadInput` - 基础输入框
- `ShadInputFormField` - 表单输入框

### Card（卡片）
- `ShadCard` - 卡片组件

### Dialog（对话框）
- `ShadDialog` - 对话框
- `ShadDialog.alert` - 警告对话框

### Form（表单）
- `ShadForm` - 表单容器
- `ShadCheckboxFormField` - 复选框
- `ShadSwitchFormField` - 开关
- `ShadSelectFormField` - 选择器
- `ShadDatePickerFormField` - 日期选择器

### 其他组件
- `ShadAlert` - 警告
- `ShadBadge` - 徽章
- `ShadAvatar` - 头像
- `ShadCalendar` - 日历
- `ShadAccordion` - 手风琴
- `ShadBreadcrumb` - 面包屑
- `ShadSelect` - 选择器
- `ShadCheckbox` - 复选框
- `ShadSwitch` - 开关
- `ShadIconButton` - 图标按钮

---

## 🎬 动画

所有组件都支持 `flutter_animate`：

```dart
ShadButton(
  child: Text('Animated'),
).animate().fadeIn().slideX()
```

---

## 📚 图标

使用 Lucide Icons：

```dart
Icon(LucideIcons.home)
Icon(LucideIcons.settings)
Icon(LucideIcons.user)
```

浏览图标：https://lucide.dev/icons/

---

## 📖 完整文档

查看技能文档获取完整信息：
```
~/.agents/skills/shadcn-ui-flutter/SKILL.md
```

---

## 🚨 注意事项

1. **必须使用 ShadApp**：不要直接使用 MaterialApp
2. **主题访问**：使用 `ShadTheme.of(context)`
3. **图标**：使用 `LucideIcons` 而不是 Material Icons
4. **表单**：推荐使用 ShadForm 配合 FormField 组件

---

## 🔧 下一步

1. 运行 `flutter pub get` 安装依赖
2. 替换现有 Material 组件为 Shadcn 组件
3. 测试所有页面功能
4. 根据需要定制主题

---

**状态**: ✅ 技能创建完成，项目已集成
**版本**: shadcn_ui 0.2.4