实现看板组件 (Implement Kanban Board Component)

apps/playground/src/data/examples.ts

@@ -638,6 +638,127 @@ export const examples = {
       ]
     }
   ]
+}`,
+
+  'kanban-board': `{
+  "type": "kanban",
+  "className": "w-full h-[600px]",
+  "columns": [
+    {
+      "id": "backlog",
+      "title": "📋 Backlog",
+      "cards": [
+        {
+          "id": "card-1",
+          "title": "User Authentication",
+          "description": "Implement user login and registration flow",
+          "badges": [
+            { "label": "Feature", "variant": "default" },
+            { "label": "High Priority", "variant": "destructive" }
+          ]
+        },
+        {
+          "id": "card-2",
+          "title": "API Documentation",
+          "description": "Write comprehensive API docs",
+          "badges": [
+            { "label": "Documentation", "variant": "outline" }
+          ]
+        },
+        {
+          "id": "card-3",
+          "title": "Database Optimization",
+          "description": "Improve query performance",
+          "badges": [
+            { "label": "Performance", "variant": "secondary" }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "todo",
+      "title": "📝 To Do",
+      "cards": [
+        {
+          "id": "card-4",
+          "title": "Design Landing Page",
+          "description": "Create wireframes and mockups",
+          "badges": [
+            { "label": "Design", "variant": "default" }
+          ]
+        },
+        {
+          "id": "card-5",
+          "title": "Setup CI/CD Pipeline",
+          "description": "Configure GitHub Actions",
+          "badges": [
+            { "label": "DevOps", "variant": "secondary" }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "in-progress",
+      "title": "⚙️ In Progress",
+      "limit": 3,
+      "cards": [
+        {
+          "id": "card-6",
+          "title": "Payment Integration",
+          "description": "Integrate Stripe payment gateway",
+          "badges": [
+            { "label": "Feature", "variant": "default" },
+            { "label": "In Progress", "variant": "secondary" }
+          ]
+        },
+        {
+          "id": "card-7",
+          "title": "Bug Fix: Login Issue",
+          "description": "Fix session timeout bug",
+          "badges": [
+            { "label": "Bug", "variant": "destructive" }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "review",
+      "title": "👀 Review",
+      "cards": [
+        {
+          "id": "card-8",
+          "title": "Dashboard Analytics",
+          "description": "Add charts and metrics",
+          "badges": [
+            { "label": "Feature", "variant": "default" },
+            { "label": "Needs Review", "variant": "outline" }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "done",
+      "title": "✅ Done",
+      "cards": [
+        {
+          "id": "card-9",
+          "title": "Project Setup",
+          "description": "Initialize repository and dependencies",
+          "badges": [
+            { "label": "Completed", "variant": "outline" }
+          ]
+        },
+        {
+          "id": "card-10",
+          "title": "Basic Layout",
+          "description": "Create header and navigation",
+          "badges": [
+            { "label": "Completed", "variant": "outline" }
+          ]
+        }
+      ]
+    }
+  ]
 }`
 };
 
@@ -646,5 +767,6 @@ export type ExampleKey = keyof typeof examples;
 export const exampleCategories = {
   'Primitives': ['simple-page', 'input-states', 'button-variants'],
   'Layouts': ['grid-layout', 'dashboard', 'tabs-demo'],
-  'Forms': ['form-demo']
+  'Forms': ['form-demo'],
+  'Complex': ['kanban-board']
 };

packages/components/package.json

@@ -18,6 +18,9 @@
     "test": "vitest run"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@object-ui/core": "workspace:*",
     "@object-ui/react": "workspace:*",
     "@radix-ui/react-accordion": "^1.2.12",

packages/components/src/renderers/complex/README-KANBAN.md

@@ -0,0 +1,208 @@
+# Kanban Board Component
+
+A fully functional, schema-driven Kanban board component for Object UI with drag-and-drop support.
+
+## Features
+
+- **Multiple Columns**: Create unlimited columns with customizable titles
+- **Rich Cards**: Cards support title, description, and multiple badges
+- **Drag & Drop**: Smooth drag-and-drop functionality powered by @dnd-kit
+- **Reordering**: Reorder cards within the same column
+- **Cross-Column Moves**: Move cards between different columns
+- **Column Limits**: Optional capacity limits with visual indicators
+- **Card Counters**: Shows current count and limit per column
+- **Schema-Driven**: Configure entirely through JSON/YAML
+- **Event Callbacks**: Custom event handling for card movements
+
+## Usage
+
+### Basic Example
+
+```json
+{
+  "type": "kanban",
+  "className": "w-full h-[600px]",
+  "columns": [
+    {
+      "id": "todo",
+      "title": "To Do",
+      "cards": [
+        {
+          "id": "card-1",
+          "title": "Task Title",
+          "description": "Task description",
+          "badges": [
+            { "label": "High Priority", "variant": "destructive" }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "in-progress",
+      "title": "In Progress",
+      "limit": 3,
+      "cards": []
+    },
+    {
+      "id": "done",
+      "title": "Done",
+      "cards": []
+    }
+  ]
+}
+```
+
+### With Event Handling
+
+```json
+{
+  "type": "kanban",
+  "columns": [...],
+  "onCardMove": "(event) => { console.log('Card moved:', event); }"
+}
+```
+
+## Schema Reference
+
+### Kanban Props
+
+| Property | Type | Required | Description |
+|----------|------|----------|-------------|
+| `type` | `"kanban"` | Yes | Component type identifier |
+| `columns` | `KanbanColumn[]` | Yes | Array of column configurations |
+| `className` | `string` | No | Custom CSS classes |
+| `onCardMove` | `function` | No | Callback when a card is moved |
+
+### KanbanColumn
+
+| Property | Type | Required | Description |
+|----------|------|----------|-------------|
+| `id` | `string` | Yes | Unique column identifier |
+| `title` | `string` | Yes | Column header title |
+| `cards` | `KanbanCard[]` | Yes | Array of cards in this column |
+| `limit` | `number` | No | Maximum number of cards allowed |
+| `className` | `string` | No | Custom CSS classes for column |
+
+### KanbanCard
+
+| Property | Type | Required | Description |
+|----------|------|----------|-------------|
+| `id` | `string` | Yes | Unique card identifier |
+| `title` | `string` | Yes | Card title |
+| `description` | `string` | No | Card description text |
+| `badges` | `Badge[]` | No | Array of badge objects |
+
+### Badge
+
+| Property | Type | Required | Description |
+|----------|------|----------|-------------|
+| `label` | `string` | Yes | Badge text |
+| `variant` | `"default" \| "secondary" \| "destructive" \| "outline"` | No | Badge color variant |
+
+## Examples
+
+### Simple Task Board
+
+```json
+{
+  "type": "kanban",
+  "columns": [
+    {
+      "id": "backlog",
+      "title": "📋 Backlog",
+      "cards": [
+        {
+          "id": "1",
+          "title": "Setup project",
+          "badges": [{ "label": "Setup" }]
+        }
+      ]
+    },
+    {
+      "id": "doing",
+      "title": "🚀 Doing",
+      "limit": 2,
+      "cards": []
+    },
+    {
+      "id": "done",
+      "title": "✅ Done",
+      "cards": []
+    }
+  ]
+}
+```
+
+### Issue Tracking Board
+
+```json
+{
+  "type": "kanban",
+  "columns": [
+    {
+      "id": "new",
+      "title": "New Issues",
+      "cards": [
+        {
+          "id": "issue-1",
+          "title": "Bug: Login fails on Safari",
+          "description": "Users can't login using Safari browser",
+          "badges": [
+            { "label": "Bug", "variant": "destructive" },
+            { "label": "P0", "variant": "destructive" }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "investigating",
+      "title": "Investigating",
+      "limit": 3,
+      "cards": []
+    },
+    {
+      "id": "fixed",
+      "title": "Fixed",
+      "cards": []
+    }
+  ]
+}
+```
+
+## Styling
+
+The Kanban component uses Tailwind CSS and can be customized using the `className` prop:
+
+```json
+{
+  "type": "kanban",
+  "className": "w-full h-[800px] bg-gray-50 p-4 rounded-lg",
+  "columns": [...]
+}
+```
+
+Individual columns can also be styled:
+
+```json
+{
+  "id": "urgent",
+  "title": "🔥 Urgent",
+  "className": "bg-red-50",
+  "cards": [...]
+}
+```
+
+## Technical Details
+
+- Built with React 18+ and TypeScript
+- Uses @dnd-kit for drag-and-drop functionality
+- Integrates with Shadcn UI components (Card, Badge, ScrollArea)
+- Supports both pointer and touch interactions
+- Accessible keyboard navigation (via @dnd-kit)
+
+## Browser Support
+
+- Chrome/Edge: Full support
+- Firefox: Full support
+- Safari: Full support
+- Mobile browsers: Full support with touch gestures

packages/components/src/renderers/complex/index.ts

@@ -1,4 +1,5 @@
 import './carousel';
+import './kanban';
 import './scroll-area';
 import './resizable';
 import './table';