安装组件

npm i antd @ant-design/icons @ccreator/ant-extra

样式依赖和配置

1. 引入样式资源

// main.jsx
import '@ccreator/ant-extra/dist/style.css';

2. 修改tailwind配置文件(新版本可以忽略，样式已合并到dist/style.css)

// tailwind.config.js
... ...
export default {
    important: true,
    content: [
        './src/**/*.{js,ts,jsx,tsx}',
        // 设置此目录进入tailwind编译目录
        './node_modules/@ccreator/ant-extra/**/*.js',
    ],
    ... ...
};

表单示例

字段配置

// fields.jsx
import React from 'react';
import { Input, Radio, Button, Space } from 'antd';

export default [
    {
        name: 'name',
        label: '姓名',
        colspan: 12,
        rules: [{ required: true, message: '请输入姓名' }],
        Component: Input,
    },
    ......
    {
        name: 'hideAddress',
        label: '隐藏控件',
        rules: [{ required: true }],
        initialValue: '2',
        Component: Radio.Group,
        componentProps: {
            options: [
                { label: '显示', value: '1' },
                ......
            ],
        },
    },
    ......
    {
        wrapperCol: { offset: 5, col: 19 },
        render: ({ form }) => {
            const test01 = () => {
                form.setFieldsValue({
                    name: '测试',
                    users: [{ name: 'xxx', mobile: '22323' }],
                });
            };
            return (
                <Space>
                    <Button type="primary" htmlType="submit">保存</Button>
                    <Button onClick={test01}>测试01</Button>
                </Space>
            );
        },
    },
];

表单输出和动态逻辑控制

import React from 'react';
import { Card } from 'antd';
import { Form, FormUtil, Logger } from '@ccreator/ant-extra';
import fields2 from './fields';

const FormDynamic = () => {

    const [fields, setFields] = React.useState([...fields2]);
    const [form] = Form.useForm();
    const hideAddress = Form.useWatch('hideAddress', form);

    React.useEffect(() => {
        Logger.debug(hideAddress);
        if (hideAddress === '2') {
            const temp = FormUtil.remove(fields, 'address');
            setFields(temp);
        } else {
            setFields([...fields2]);
        }
    }, [hideAddress]);

    return (
        <Card title="动态的表单">
            <Form
                fields={fields}
                labelCol={{ span: 5 }}
                form={form}
            />
        </Card>
    );
};

export default FormDynamic;

最小化引入：手动引入最小化模块

import Form from '@ccreator/ant-extra/dist/Form';
... ...

最小化引入：vite工程优化

// vite.config.js
// 针对全模块导入的优化
// import { Form } from '@ccreator/ant-extra';
import vitePluginImportus from 'vite-plugin-importus';

export default defineConfig({
    plugins: [
        react(),
        vitePluginImportus([
            {
                libraryName: 'lodash',
                camel2DashComponentName: false,
                customName: (name) => `lodash/${name}`,
            },
            {
                libraryName: '@ccreator/ant-extra',
                camel2DashComponentName: false,
                customName: (name) => `@ccreator/ant-extra/dist/${name}`,
            },
        ]),
    ],
});

在线文档

内网在线文档