55 lines
1.3 KiB
HTML
55 lines
1.3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Kanban Test Bench</title>
|
||
|
|
<style>
|
||
|
|
body { margin: 0; background: #ebedf0; height: 100vh; }
|
||
|
|
#app { height: 100%; }
|
||
|
|
</style>
|
||
|
|
<script type="importmap">
|
||
|
|
{
|
||
|
|
"imports": {
|
||
|
|
"@web/kanban": "../src/index.js"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="app">
|
||
|
|
<web-kanban id="kanban"></web-kanban>
|
||
|
|
</div>
|
||
|
|
<script type="module">
|
||
|
|
import '@web/kanban';
|
||
|
|
|
||
|
|
const kanban = document.getElementById('kanban');
|
||
|
|
kanban.data = [
|
||
|
|
{
|
||
|
|
id: 'todo',
|
||
|
|
title: '待处理',
|
||
|
|
items: [
|
||
|
|
{ id: '1', content: '设计看板原型' },
|
||
|
|
{ id: '2', content: '实现拖拽逻辑' }
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 'in-progress',
|
||
|
|
title: '进行中',
|
||
|
|
items: [
|
||
|
|
{ id: '3', content: '基础架构搭建' }
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 'done',
|
||
|
|
title: '已完成',
|
||
|
|
items: []
|
||
|
|
}
|
||
|
|
];
|
||
|
|
|
||
|
|
kanban.addEventListener('@update', (e) => {
|
||
|
|
console.log('Kanban Updated:', e.detail);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|