youhua

SHADCN_INTEGRATION.md

@@ -0,0 +1,266 @@
+# 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