Data Display
看板
一个带列、任务卡片和优先级标签的可拖拽看板。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度advanced
英文提示词
Create a kanban board with 4 columns: Backlog, To Do, In Progress, and Done. Each column contains draggable task cards with title, description, assignee avatar, priority badge (Low, Medium, High), and due date. Include an "Add task" button per column. Use shadcn/ui Card, Badge, Avatar, and Button components, plus Tailwind CSS. Implement drag-and-drop between columns and responsive horizontal scrolling. Make cards keyboard focusable.
中文提示词
创建一个包含 4 列的看板:Backlog、To Do、In Progress 和 Done。每列包含可拖拽的任务卡片,包含标题、描述、负责人头像、优先级徽章(Low、Medium、High)和截止日期。每列包含 "Add task" 按钮。使用 shadcn/ui Card、Badge、Avatar 和 Button 组件以及 Tailwind CSS。实现列之间的拖放和响应式水平滚动。使卡片支持键盘聚焦。

概述
一个带列和可拖拽卡片的任务管理看板。非常适合项目管理和工作流可视化。
功能特性
- 4 个可自定义列
- 可拖拽任务卡片
- 优先级徽章
- 负责人头像
- 截止日期
- 添加任务按钮
- 响应式水平滚动
使用方法
将提示词复制到 v0 或 Cursor 中。将拖放事件连接到你的状态管理或后端。
自定义选项
修改提示词以:
- 为卡片添加标签
- 包含故事点或预估
- 添加列 WIP 限制
- 支持卡片归档