@安装使用

安装seven UI

# 没有安装nrm源管理工具时...
npm i -g nrm

# NPM全局切换到官方源
nrm use npm

# 安装sevenUI/React
npm i @steveouyang/sto-ui-react

@使用弹窗

import { useState } from 'react'
import { SevenPopup } from "@laoren1007/seven-ui-react"


const PopupDemo = () => {

    const [title, setTitle] = useState("标题")
    const [showPopup, setShowPopup] = useState(false)
    // 点击开启弹框
    const openShowPopup = () => {
        setShowPopup(true)
    }

    // 关闭弹框
    const closerShowPopup = () => {
        setShowPopup(false)
    }

    return (
        <>
            <button onClick={openShowPopup}>开启弹框</button>
            {
                showPopup && (
                    <SevenPopup 
                        title={title} 
                        titleColor="#ccc" 
                        onConfirm={openShowPopup} 
                        closer={closerShowPopup} 
                        >
                        {
                            <p>
                                窈窕淑女，君子好逑
                            </p>
                        }
                    </SevenPopup>
                )
            }

        </>
    )
}

export default PopupDemo

使用效果图

@使用表单

上传功能暂未完善，如有需要自行拿源码添加！！！！！

表单数据

 	formFrame: FormCell[][], 				//表达结构数组
    formData?: Record<string, any> 			//表单数据
    width?: number,							//表单的width
    inset?: boolean,						//是否显示确认取消按钮
    editable?: boolean,						// 是否可以更改
    formTitle?: string,						//表单标题
    onConfirm?: (newData: any) => void 		//点击que确定回调事件

表单结构数据

    label?: string; 			//表单title
    type?: string;				//类型 text/select
    key?: string;				//对应的数据
    options?: string[];			// select可选内容数组
    defaultRows?: number;		//默认
    rowSpan?: number;			// 跨行
    colSpan?: number;			// 跨列
    defLines?: number;			// textarea的默认行数
    required?: boolean;			// 是否必填
    size?: number[];			// 图片大小
    text?: string;				//图片上传按钮的文字
    formFrame?: FormCell[][];	//表格结构 如遇到内联表单
    callback?: () => void;		//上传按钮回调事件
    readonly: boolean			// 只读

使用案例

import React from 'react'

import { SevenForm } from '@laoren1007/seven-ui-react'

const SevenFromDemo = () => {

    // 上传图片回调事件
    const uploadImg = () => console.log("uploadImg");

    //表单结构
    const formFrame = [
        [
            {
                label: "姓名",
                type: "text",
                key: "username",
                required: true,
            },
            {
                label: "密码",
                type: "password",
                key: "like",
                required: true
            },
            {
                type: "form",
                rowSpan: 3,
                formFrame: [
                    [
                        {
                            type: "img",
                            size: [50, 50],
                            key: "avatar"
                        },
                    ],
                    [
                        {
                            type: "button",
                            text: "上传",
                            callback: uploadImg,
                        },
                    ]
                ]
            },
        ],
        [
            {
                label: "年龄",
                type: "text",
                options: ["男", '女'],
                key: "gender"
            },
            {
                label: "性别",
                required: true,
                type: "select",
                options: ["男", '女'],
                key: "gender"
            }
        ],
        [
            {
                label: "创建人",
                type: "input",
                // colSpan: 2,
                key: "creater"
            },
            {
                label: "创建人",
                type: "input",
                key: "creater"
            },
        ],
        [
            {
                label: "描述",
                colSpan: 4,
                type: "richtext",
                defLines: 12,
                key: "desc"
            }
        ]
    ]

    //表单数据
    const data = {
        username: "水区彭于晏",
        password: "123456",
        avatar: "/vite.svg",
        gender: "男",
        creater: "张三",
        like: "旅游",
        desc: `
        当你走过失败的道路时，不要停下来。 —— 勃朗特·斯蒂芬森
        成功不是最终目的，失败也不是致命的。重要的是继续前进。 —— 温斯顿·丘吉尔
        生活不是等待暴风雨过去，而是学会在雨中跳舞。 —— 维维安·格林
        `
    }
    
	//点击确定回调事件
    const onConfirm = (newData: any) => {
        console.log('onConfirm 回调函数');
    }
    
    return (
        <>
            <h3>SevenFromDemo</h3>
            <SevenForm
                editable={true}
                formData={data}
                formFrame={formFrame}
                inset={true}
                width={1000}
                title={'一个简单的form表单'}
                onConfirm={onConfirm}
            />
        </>
    )
}

export default SevenFromDemo

使用效果图

@使用分页器

import React, { useState } from 'react';
import { SevenPagination } from '@laoren1007/seven-ui-react'
import { getStudents } from "../common/commondata"

const SevenPaginationDemo = () => {
    // 从API或其他数据源获取的数据
    const [data, setdata] = useState(getStudents(20))
    
    // 当前页
    const [currentPage, setCurrentPage] = useState(1);
    
    // 每页显示的项数
    const pageSize = 5;

    // 点击按钮分页器将页码传递回来 在向表格渲染时需要进行传递
    const handlePageChange = (page: number) => {
        setCurrentPage(page);

        // 根据页码进行数据的加载或其他操作
        console.log(page, '父组件中');

    };

    return (
        <div className='paginatorDemo' style={{ width: '800px' }}>
            <h2>SevenPagination</h2>
            {/* 渲染实际的内容 */}
            <div className="content">
                <div>SevenPagination</div>
                {data.slice((currentPage - 1) * pageSize, currentPage * pageSize).map(item => (
                    // 渲染每个项的内容
                    <div key={item.id}>{item.name}</div>
                ))}
            </div>
            {/* 渲染分页器 */}
            <SevenPagination
                totalPages={Math.ceil(data.length / pageSize)}
                currentPage={currentPage}
                onPageChange={handlePageChange}
            />
        </div>
    );
};

export default SevenPaginationDemo

使用案例

https://img-blog.csdnimg.cn/img_convert/77e99126e3609248154eca58add9bbd3.png