开发预览更新于 2026-05-10

Kanban 看板

多列卡片看板，使用原生 HTML5 拖拽在列间移动卡片，支持 WIP 限额与列强调色。

基础用法

CfKanban 接受 KanbanColumn[]，每列含 id / title / cards，每张卡片可含 title / description / tag / meta。按住卡片向其它卡片或空列拖拽即可移动；放下后组件会更新 modelValue 并触发 cardMove。

背景

待办2

设计登录页

design

梳理 API 字段

backend

进行中1 / 3

埋点 SDK 接入

frontend@小明

已完成1

更新 README

昨天

<script setup lang="ts">
import { ref } from 'vue';
import { CfKanban, type KanbanColumn } from '@chufix-design/vue';

const board = ref<KanbanColumn[]>([
  {
    id: 'todo',
    title: '待办',
    cards: [
      { id: 'c1', title: '设计登录页', tag: 'design' },
      { id: 'c2', title: '梳理 API 字段', tag: 'backend' },
    ],
  },
  {
    id: 'doing',
    title: '进行中',
    limit: 3,
    cards: [
      { id: 'c3', title: '埋点 SDK 接入', tag: 'frontend', meta: '@小明' },
    ],
  },
  {
    id: 'done',
    title: '已完成',
    accent: 'oklch(70% 0.16 145)',
    cards: [
      { id: 'c4', title: '更新 README', meta: '昨天' },
    ],
  },
]);
</script>

<template>
  <CfKanban v-model="board" />
</template>

import { useState } from 'react';
import { CfKanban, type KanbanColumn } from '@chufix-design/react';

export default function Demo() {
const [board, setBoard] = useState<KanbanColumn[]>([
  {
    id: 'todo',
    title: '待办',
    cards: [
      { id: 'c1', title: '设计登录页', tag: 'design' },
      { id: 'c2', title: '梳理 API 字段', tag: 'backend' },
    ],
  },
  { id: 'doing', title: '进行中', limit: 3, cards: [
    { id: 'c3', title: '埋点 SDK 接入', tag: 'frontend', meta: '@小明' },
  ] },
  { id: 'done', title: '已完成', accent: 'oklch(70% 0.16 145)', cards: [
    { id: 'c4', title: '更新 README', meta: '昨天' },
  ] },
]);
return <CfKanban value={board} onChange={setBoard} />;
}

列限额 + 强调色

column.limit 在表头展示成 已用 / 上限（数字本身只是提示，不会强行拒绝拖入）。column.accent 把表头标题着色 — 可视化区分「优先级 / 状态 / 负责人」之类语义。

背景

Backlog3

设计 Brand 系统

design

梳理 SLA 表

docs

调研监控方案

进行中2 / 2

新版仪表盘

frontend@小明

统一鉴权 SDK

backend@小红

待评审1

埋点白名单

data

已完成2

部署稳定性周报

昨天

修复时区 bug

bugfix前天

<script setup lang="ts">
import { ref } from 'vue';
import { CfKanban, type KanbanColumn } from '@chufix-design/vue';

const board = ref<KanbanColumn[]>([
  {
    id: 'backlog',
    title: 'Backlog',
    accent: 'oklch(70% 0.04 260)',
    cards: [
      { id: 'b1', title: '设计 Brand 系统', tag: 'design' },
      { id: 'b2', title: '梳理 SLA 表', tag: 'docs' },
      { id: 'b3', title: '调研监控方案' },
    ],
  },
  {
    id: 'wip',
    title: '进行中',
    limit: 2,
    accent: 'oklch(70% 0.16 60)',
    cards: [
      { id: 'w1', title: '新版仪表盘', tag: 'frontend', meta: '@小明' },
      { id: 'w2', title: '统一鉴权 SDK', tag: 'backend', meta: '@小红' },
    ],
  },
  {
    id: 'review',
    title: '待评审',
    accent: 'oklch(70% 0.16 280)',
    cards: [{ id: 'r1', title: '埋点白名单', tag: 'data' }],
  },
  {
    id: 'done',
    title: '已完成',
    accent: 'oklch(70% 0.16 145)',
    cards: [
      { id: 'd1', title: '部署稳定性周报', meta: '昨天' },
      { id: 'd2', title: '修复时区 bug', tag: 'bugfix', meta: '前天' },
    ],
  },
]);
</script>

<template>
  <CfKanban v-model="board" />
</template>

const [board, setBoard] = useState<KanbanColumn[]>([
{
  id: 'wip', title: '进行中', limit: 2,
  accent: 'oklch(70% 0.16 60)',
  cards: [/* ... */],
},
// ...
]);

<CfKanban value={board} onChange={setBoard} />

禁用拖拽

draggable={false} 关掉所有交互 — 只读看板视图。卡片仍按 props 渲染，仅鼠标手型与 dragstart 事件不再绑定。

背景

待办2

设计登录页

design

梳理 API 字段

backend

进行中1

埋点 SDK 接入

frontend@小明

已完成1

更新 README

昨天

<script setup lang="ts">
import { ref } from 'vue';
import { CfKanban, type KanbanColumn } from '@chufix-design/vue';

const board = ref<KanbanColumn[]>([
  {
    id: 'todo',
    title: '待办',
    cards: [
      { id: 'c1', title: '设计登录页', tag: 'design' },
      { id: 'c2', title: '梳理 API 字段', tag: 'backend' },
    ],
  },
  {
    id: 'doing',
    title: '进行中',
    cards: [{ id: 'c3', title: '埋点 SDK 接入', tag: 'frontend', meta: '@小明' }],
  },
  {
    id: 'done',
    title: '已完成',
    cards: [{ id: 'c4', title: '更新 README', meta: '昨天' }],
  },
]);
</script>

<template>
  <CfKanban v-model="board" :draggable="false" />
</template>

<CfKanban value={board} onChange={setBoard} draggable={false} />

API

属性	类型	默认值	说明
`modelValue` (Vue) / `value` (React)	`KanbanColumn[]`	`[]`	全板状态
`defaultValue`	`KanbanColumn[]`	`[]`	非受控初值
`draggable`	`boolean`	`true`	是否启用 HTML5 拖拽
`bordered`	`boolean`	`true`	边框
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	字号

事件：

onChange(cols) / update:modelValue — 看板任意变化
onCardMove({ cardId, from, to, toIndex }) / card-move — 卡片移动后触发，包含来源列、目标列和目标位置索引

类型导出：

interface KanbanCard {
  id: string;
  title: string;
  description?: string;
  tag?: string;
  meta?: string;
}
interface KanbanColumn {
  id: string;
  title: string;
  cards: KanbanCard[];
  limit?: number;
  accent?: string;
}