avc-ui

基于 React + TypeScript + Vite 的最小模板，用于快速构建用户界面组件库。

项目概述

avc-ui 是一个轻量级的 React 组件库模板，旨在帮助开发者快速搭建基于 React、TypeScript 和 Vite 的开发环境。该项目提供了一个可扩展的基础架构，支持热更新（HMR）和代码规范检查，适合前端开发者和 UI 组件库开发者使用。

技术栈

• React: 用于构建用户界面的 JavaScript 库。
• TypeScript: 为 JavaScript 添加静态类型定义，提高代码的可维护性和可靠性。
• Vite: 快速的前端构建工具，提供即时的模块热更新（HMR）体验。
• ESLint: 用于代码规范检查和质量控制。

安装与使用

安装依赖

npm install

启动开发服务器

npm run dev

构建生产版本

npm run build

预览部署

npm run preview

代码规范检查

npm run lint

目录结构

.
├── src
│   ├── components
│   │   └── Button.tsx        # 示例组件
│   ├── index.ts               # 主入口文件
│   └── vite-env.d.ts          # Vite 环境定义
├── README.md                  # 项目说明文档
├── eslint.config.js           # ESLint 配置
├── index.html                 # 开发入口 HTML
├── package.json               # 项目元信息与脚本
├── tsconfig.app.json          # 应用 TS 配置
├── tsconfig.json              # 总体 TS 引用配置
├── tsconfig.node.json         # Node 环境 TS 配置
└── vite.config.ts             # Vite 构建配置

组件文档

本项目包含以下组件：

Table 表格

基本用法

import {Table, ATitle, ATag, getRandomInt} from 'avc-ui';
import {Button, Col, Form, Input, InputNumber, Modal, Space} from 'antd';
import {useEffect, useState} from "react";

interface User {
    id: number;
    name: string;
    age: number;
}

interface ModalState<T> {
    record?: T;
    queryList?: () => void;
}

function App() {
    const [open, setOpen] = useState<ModalState<User> | false>(false);
    const [form] = Form.useForm();
    useEffect(() => {
        if (open === false) {
            form.resetFields();
            return;
        }
        if (open?.record) {
            form.setFieldsValue(open.record);
        }
    }, [open]);
    return (
        <div>
            <ATitle text={'表格：'}/>
            <Table<User>
                FilterOptions={() => {
                    return <>
                        <Col span={8}>
                        <Col span={8}>
                            <Form.Item
                                label={'姓名'}
                                name={'name'}
                            >
                                <Input placeholder={'请输入姓名'}/>
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item
                                label={'年龄'}
                                name={'age'}
                            >
                                <InputNumber style={{width: '100%'}} placeholder={'请输入年龄'}/>
                            </Form.Item>
                        </Col>
                    </>
                }}
                action={(params) => new Promise((resolve) => {
                    // 远程请求的数据
                    const res = {
                        data: [
                            {
                                id: 1,
                                name: '张三',
                                age: getRandomInt(18, 30),
                            },
                            {
                                id: 2,
                                name: '李四',
                                age: getRandomInt(18, 30),
                            },
                        ],
                        current: 1,
                        pageSize: 2,
                        total: 5
                    }
                    setTimeout(() => {
                        resolve({
                            data: res.data,
                            current: res.current,
                            pageSize: res.pageSize,
                            total: res.total
                        })
                    }, 1000)
                })}
                slot={queryList => <Space>
                    <Button
                        onClick={() => setOpen({
                            queryList
                        })}
                    >添加</Button>
                    <ATag
                        onClick={() => {
                            queryList();
                        }}
                    >刷新</ATag>
                </Space>}
                getColumns={({queryList}) => {
                    return [
                        {
                            title: '姓名',
                            dataIndex: 'name',
                            key: 'name'
                        },
                        {
                            title: '年龄',
                            dataIndex: 'age',
                            key: 'age'
                        },
                        {
                            title: '操作',
                            key: 'action',
                            render: (_, record) => (
                                <Space>
                                    <ATag
                                        onClick={() => setOpen({
                                            record,
                                            queryList
                                        })}
                                    >编辑</ATag>
                                    <ATag
                                        danger
                                        onClick={() => {
                                            queryList();
                                        }}
                                    >删除</ATag>
                                </Space>
                            )
                        }
                    ]
                }}
            />
            <Modal
                title={open && open?.record ? '编辑' : '添加'}
                open={!!open}
                onOk={() => {
                    form.validateFields().then(values => {
                        if (typeof open !== 'boolean' && open?.queryList) {
                            open.queryList();
                        }
                        setOpen(false);
                    })
                }}
                onCancel={() => setOpen(false)}
            >
                <Form
                    form={form}
                >
                    <Form.Item
                        name={'id'}
                        hidden={true}
                    ></Form.Item>
                    <Form.Item
                        label={'姓名'}
                        name={'name'}
                        rules={[
                            {
                                required: true,
                                message: '请输入姓名'
                            }
                        ]}
                    >
                        <Input placeholder={'请输入姓名'}/>
                    </Form.Item>
                    <Form.Item
                        label={'年龄'}
                        name={'age'}
                        rules={[
                            {
                                required: true,
                                message: '请输入年龄'
                            }
                        ]}
                    >
                        <InputNumber placeholder={'请输入年龄'}/>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
}

属性说明

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | action | (params: TableFilter) => Promise<ActionResponse> | - | 获取数据的异步函数 | | getColumns | () => TableColumnsType | - | 定义表格列的函数 | | FilterOptions | (props: FilterOptionsProps) => React.ReactNode | - | 自定义筛选条件组件 | | slot | (queryList: (params?: TableFilter) => Promise) => React.ReactNode | - | 自定义操作区域 | | instanceRef | React.MutableRefObject<{queryList(): void }> | - | 引用查询函数 | | log | boolean | false | 是否启用日志 | | fromRef | FormInstance | - | 表单引用 |

贡献指南

欢迎贡献代码和提出建议！请遵循以下步骤：

1. Fork 项目仓库
2. 创建新分支 (git checkout -b feature/new-feature)
3. 提交更改 (git commit -am 'Add some feature')
4. 推送至分支 (git push origin feature/new-feature)
5. 创建 Pull Request

许可证

MIT License