1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
import { Avatar } from '@astryxdesign/core/Avatar'
import { Badge } from '@astryxdesign/core/Badge'
import { Divider } from '@astryxdesign/core/Divider'
import { HStack } from '@astryxdesign/core/HStack'
import { List, ListItem } from '@astryxdesign/core/List'
import { Text } from '@astryxdesign/core/Text'
import { Table, pixel, proportional } from '@astryxdesign/core/Table'
import type { TableColumn } from '@astryxdesign/core/Table'
import { VStack } from '@astryxdesign/core/VStack'
interface Member extends Record<string, unknown> {
id: string
name: string
role: string
projects: number
}
const MEMBERS: Member[] = [
{ id: '1', name: '林晓', role: '产品设计', projects: 4 },
{ id: '2', name: '陈默', role: '前端开发', projects: 7 },
{ id: '3', name: '周雨', role: '内容运营', projects: 3 },
]
const COLUMNS: TableColumn<Member>[] = [
{ key: 'name', header: '成员', width: proportional(1) },
{ key: 'role', header: '角色', width: proportional(1) },
{ key: 'projects', header: '进行中', width: pixel(90) },
]
export function DataDemo() {
return (
<VStack gap={4}>
<List hasDividers>
<ListItem
label="林晓"
description="产品设计 · 4 个项目"
startContent={<Avatar name="林晓" size="sm" />}
endContent={<Badge variant="blue" label="3" />}
/>
<ListItem
label="陈默"
description="前端开发 · 7 个项目"
startContent={<Avatar name="陈默" size="sm" />}
endContent={<Badge variant="teal" label="8" />}
/>
<ListItem
label="周雨"
description="内容运营 · 3 个项目"
startContent={<Avatar name="周雨" size="sm" />}
endContent={<Badge variant="purple" label="2" />}
/>
</List>
<Divider />
<VStack gap={2}>
<HStack gap={2} vAlign="center">
<Text type="label">团队进度</Text>
<Text type="supporting" size="sm">
数据表格
</Text>
</HStack>
<Table
data={MEMBERS}
columns={COLUMNS}
idKey="id"
density="compact"
/>
</VStack>
</VStack>
)
}
|
