功能组件 · AntDesign

核心 API 请查阅 功能组件-通用篇，本文档仅说明 AntDesign 框架下的特化配置。

导入路径

import { $initHook } from '@jiess/plus/react';

AntDesign 特化组件

Jiess 组件	AntDesign 组件	说明
$Button	Button	按钮
$Tag	Tag	标签
$Divider	Divider	分割线
$Badge	Badge	徽章
$Tooltip	Tooltip	工具提示
$Popover	Popover	弹出框
$Collapse	Collapse	折叠面板
$Spin	Spin	加载中

AntDesign 按钮类型

{
    $Button: {
        children: '操作',
        type: 'primary',      // 'primary' / 'default' / 'dashed' / 'text' / 'link'
        size: 'middle',       // 'large' / 'middle' / 'small'
        danger: false,        // 危险按钮
        loading: false,
        ghost: false,         // 幽灵按钮
        block: false,         // 块级按钮
        shape: 'default',     // 'default' / 'circle' / 'round'
        icon: <EditOutlined />,
    },
}

AntDesign 标签类型

{
    $Tag: {
        children: '已审核',
        color: 'success',     // preset: 'success'/'processing'/'error'/'warning' + 自定义色值
        closable: true,
        visible: true,
        icon: <CheckCircleOutlined />,
    },
}

AntDesign 功能组件示例

表格操作列的确认按钮

{
    $Space: {
        children: [
            { $Button: { children: '编辑', type: 'primary', onClick: edit } },
            {
                $Popconfirm: {
                    title: '确定要删除这条记录吗？',
                    onConfirm: () => del(row),
                    children: {
                        $Button: { children: '删除', danger: true },
                    },
                },
            },
        ],
    },
}

加载状态

{
    $Spin: {
        spinning: isLoading,
        tip: '数据加载中...',
        children: {
            $JiessTable: { /* 表格内容 */ },
        },
    },
}

实战示例

示例1：状态标签组合（多状态映射 + 表格列）

// 状态枚举 → 标签映射表
const statusTagMap = {
    draft: { text: '草稿', color: 'default' },
    pending: { text: '待审核', color: 'processing' },
    approved: { text: '已通过', color: 'success' },
    rejected: { text: '已拒绝', color: 'error' },
    published: { text: '已发布', color: 'blue' },
};

// 在表格列中使用
$JiessTable({
    $fields: [
        {
            $label: '状态',
            $name: 'status',
            $TableField: {
                render(row) {
                    const cfg = statusTagMap[row.status] || { text: row.status, color: 'default' };
                    return (
                        <Tag color={cfg.color}>
                            {cfg.text}
                        </Tag>
                    );
                },
            },
        },
    ],
});

// 独立使用的多状态标签组
{
    $Space: {
        size: 'small',
        children: [
            { $Tag: { children: '已审核', color: 'success' } },
            { $Tag: { children: '紧急', color: 'error' } },
            { $Tag: { children: 'VIP', color: 'gold', icon: <CrownOutlined /> } },
            { $Tag: { children: '新功能', color: 'blue' } },
        ],
    },
}

示例2：Spin 加载 + 表格（全屏/局部加载）

// 局部加载：表格数据加载中
{
    $Spin: {
        spinning: tableLoading,
        tip: '数据加载中...',
        children: {
            $JiessTable: {
                rowKey: 'id',
                action: '/api/users',
                $fields: [
                    { $label: '姓名', $name: 'name', $width: 120 },
                    { $label: '邮箱', $name: 'email', $width: 200 },
                    { $label: '状态', $name: 'status', $width: 80 },
                ],
            },
        },
    },
}

// 全页加载：弹框提交中
{
    $Spin: {
        spinning: submitting,
        tip: '正在保存...',
        size: 'large',
        children: {
            $Form: {
                layout: 'vertical',
                children: {
                    name: { $Input: { $label: '姓名', $rules: [{ required: true }] } },
                    email: { $Input: { $label: '邮箱', $rules: [{ email: true }] } },
                },
            },
        },
    },
}

示例3：操作列完整组合（按钮 + Popconfirm + 权限控制）

// 表格操作列：根据权限显示不同按钮
$JiessTable({
    $fields: [
        {
            $label: '操作',
            $TableField: {
                render(row) {
                    return (
                        <Space wrap>
                            <Button type="link" onClick={() => viewDetail(row)}>
                                查看
                            </Button>
                            {hasEditPerm && (
                                <Button type="link" onClick={() => editRow(row)}>
                                    编辑
                                </Button>
                            )}
                            {hasDeletePerm && (
                                <Popconfirm
                                    title={
                                        <span>
                                            确认删除 <strong>{row.name}</strong> ？
                                        </span>
                                    }
                                    description="删除后数据不可恢复"
                                    okText="确认删除"
                                    cancelText="取消"
                                    okButtonProps={{ danger: true }}
                                    onConfirm={() => deleteRow(row)}
                                >
                                    <Button type="link" danger>
                                        删除
                                    </Button>
                                </Popconfirm>
                            )}
                            {hasAuditPerm && row.status === 'pending' && (
                                <Button type="link" style={{ color: '#52c41a' }} onClick={() => auditRow(row)}>
                                    审核
                                </Button>
                            )}
                        </Space>
                    );
                },
            },
        },
    ],
});

注意事项

事项	说明
Button type	Antd 的 type='text' 和 type='link' 与 ElementPlus 不同
Popconfirm	Antd 独有的确认气泡组件，ElementPlus 用 Popover 模拟
Tag.CheckableTag	通过 $Tag 的 checkable: true 使用

下一步

• 功能组件-通用篇 — 跨框架通用组件 API