CNWei
cc35400f67
- TextButton：文字按钮（tone 主色/危险、可选图标、disabled）， 用于表格行内操作，hover 只加下划线 - ToggleRow：左标签 + 右开关的开关行，支持 hint 与 switchLabel - Table：新增 size='md' | 'sm'，sm 把行内边距收到 space-2 - 展示页：按钮补「文字按钮」、开关补「开关行」、表格补「紧凑档」； COMPONENTS.md 契约 3.46 / 3.47 与 README 清单同步
89 lines
2.8 KiB
TypeScript
89 lines
2.8 KiB
TypeScript
import { Table, Tag, Text } from '../../src'
|
|
import { Demo } from '../components/Demo'
|
|
import { PropsTable } from '../components/PropsTable'
|
|
import { Section } from '../components/Section'
|
|
|
|
const COLUMNS = [
|
|
{ key: 'name', title: '分区' },
|
|
{ key: 'kind', title: '类型', width: 100 },
|
|
{ key: 'count', title: '条目数', width: 100, align: 'right' as const },
|
|
{ key: 'status', title: '状态', width: 120 },
|
|
]
|
|
|
|
const ROWS = [
|
|
{
|
|
id: 'recommend',
|
|
name: '常用推荐',
|
|
kind: <Text size="sm">apps</Text>,
|
|
count: 18,
|
|
status: <Tag tone="success">已上线</Tag>,
|
|
},
|
|
{
|
|
id: 'movie',
|
|
name: '推荐电影',
|
|
kind: <Text size="sm">posters</Text>,
|
|
count: 12,
|
|
status: <Tag tone="success">已上线</Tag>,
|
|
},
|
|
{
|
|
id: 'ces',
|
|
name: 'CES 现场报道',
|
|
kind: <Text size="sm">articles</Text>,
|
|
count: 12,
|
|
status: <Tag tone="warning">草稿</Tag>,
|
|
},
|
|
]
|
|
|
|
export function Tables() {
|
|
return (
|
|
<Section
|
|
id="table"
|
|
title="表格"
|
|
api="Table"
|
|
desc="只做展示：列定义 + 行数据 + 空态。排序、筛选、分页由页面组合，组件不内置交互。"
|
|
>
|
|
<Demo
|
|
title="基础表格"
|
|
desc="列宽、对齐方式按列配置；单元格内容可以是任意 ReactNode（这里用了 Tag 与 Text）。"
|
|
layout="column"
|
|
code={`const columns = [
|
|
{ key: 'name', title: '分区' },
|
|
{ key: 'count', title: '条目数', width: 100, align: 'right' },
|
|
]
|
|
|
|
<Table columns={columns} rows={rows} rowKey="id" />`}
|
|
>
|
|
<Table columns={COLUMNS} rows={ROWS} rowKey="id" />
|
|
</Demo>
|
|
|
|
<Demo
|
|
title="紧凑档"
|
|
desc="size='sm' 把行高收一档，配置面板那种列多、面板窄的场景用它。"
|
|
layout="column"
|
|
code={`<Table columns={COLUMNS} rows={ROWS} size="sm" />`}
|
|
>
|
|
<Table columns={COLUMNS} rows={ROWS} size="sm" />
|
|
</Demo>
|
|
|
|
<Demo
|
|
title="空态"
|
|
desc="空数据时渲染默认文案；也可以传 emptyText 换一句更具体的说明。"
|
|
layout="column"
|
|
code={`<Table columns={columns} rows={[]} emptyText="还没有分区" />`}
|
|
>
|
|
<Table columns={COLUMNS} rows={[]} emptyText="还没有分区，先建一个吧。" />
|
|
</Demo>
|
|
|
|
<PropsTable
|
|
rows={[
|
|
{ name: 'columns', type: 'TableColumn[]', required: true, desc: '{ key, title, width?, align? }' },
|
|
{ name: 'rows', type: 'Record<string, ReactNode>[]', required: true, desc: '行数据，键对应列的 key' },
|
|
{ name: 'rowKey', type: 'string', defaultValue: "'id'", desc: '行的唯一键字段' },
|
|
{ name: 'size', type: "'md' | 'sm'", defaultValue: "'md'", desc: '行高密度' },
|
|
{ name: 'emptyText', type: 'ReactNode', defaultValue: "'暂无数据'", desc: '空态文案' },
|
|
]}
|
|
/>
|
|
</Section>
|
|
)
|
|
}
|