@安装使用

安装 sk UI

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

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

# 安装石头UI/React
npm i @wsk1113/react-ui-sk

使用 sk 弹窗

  showPopup: boolean;//弹窗状态
  children: ReactNode;//插入dom元素
  toggle: React.Dispatch<React.SetStateAction<boolean>>;//修改弹窗状态
  title: string;//标题
  onConfirm: () => void;//确定事件

import React, { useState } from "react";

// 引入sk弹窗
import { MyPopup } from "@wsk1113/react-ui-sk";

export default function PopupDemo() {
  // 用一个state控制要不要显示弹窗
  const [showPopup, setShowPopup] = useState(false);

  return (
    <div>
      <h3>PopupDemo</h3>
      <button
        onClick={() => {
          console.log(111);
          setShowPopup(true);
        }}
      >
        开启弹窗
      </button>
      <MyPopup
        toggle={setShowPopup}
        showPopup={showPopup}
        title="弹窗标题"
        onConfirm={() => console.log("已确定")}
      >
        <p>This is a modal content</p>
      </MyPopup>
    </div>
  );
}

使用 sk 徽标数

  count?: number | ReactNode;//如果没有count 则显示点点
  overflowCount?: number;//数字超出范围
  color?: string;//徽标颜色
  children: ReactNode;//插入dom元素
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  offset?: Array<number> | any;//[10,10] 修改定位

// 引入sk 徽标数
import { MyBadge } from "@wsk1113/react-ui-sk";

export default function Demo() {
  return (
    <div>
      <MyBadge count={1} overflowCount={999} color="#007bff">
        <p style={{ width: "50px", height: "40px", background: "red" }}>Text</p>
      </MyBadge>
    </div>
  );
}

使用 sk 开关

  checked: boolean; //状态
  onChange: (event: ChangeEvent<HTMLInputElement>) => void; //监听状态变化事件
  bgColor?: string; //开关 开启背景色

// 引入sk 开关
import { MySwitch } from "@wsk1113/react-ui-sk";
import { ChangeEvent, useState } from "react";
export default function Demo() {
  const [isChecked, setIsChecked] = useState(false);
  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    setIsChecked(event.target.checked);
  };
  return (
    <div>
      <MySwitch checked={isChecked} onChange={handleChange} bgColor="red" />
    </div>
  );
}

使用 sk 签名组件

  width?: number; // 画布宽度 默认：400
  height?: number; // 画布高度 默认：200
  lineWidth?: number; // 线宽 默认：4
  strokeColor?: string; // 线段颜色 默认：'red'
  lineCap?: string; // 设置线条两端圆角 默认：'round'
  lineJoin?: string; // 线条交汇处圆角 默认：'round'
  bgColor?: string; // 画布背景颜色 默认：'transparent'
  showBtn?: boolean; // true 按钮 false 选中框
  onSave?: (blob: Blob) => void; //当保存时的回调, blob为生成的图片
  onClear?: (canvasContext: CanvasRenderingContext2D) => void; //当画布清空时的回调, 参数为画布的上下文对象,可以直接使用canvas的api
  onDrawEnd?: (canvas: HTMLCanvasElement) => void; //当画布结束时的回调

// 引入sk 签名组件
import { MySignature } from "@wsk1113/react-ui-sk";

export default function Demo() {
  return (
    <div>
      <MySignature width={400} showBtn={true}></MySignature>
    </div>
  );
}

表格数据和类型定义-参考

const columns = [
  { key: "id", label: "ID", type: "sort" },
  { key: "name", label: "缴纳项目", type: "normal" },
  { key: "personage", label: "个人", type: "normal" },
  { key: "firm", label: "企业", type: "sort" },
  { key: "img", label: "照片", type: "image" },
  {
    key: "linkname",
    label: "链接",
    type: "link",
    color: "",
    render: (_label: string, record: object) => {
      getLink(record);
    },
  },
  { key: "total", label: "合计", type: "normal" },
  {
    key: "Controls",
    label: "操作",
    type: "controls",
    render: (_: string, record: object) => (
      <>
        <button onClick={() => handleEdit(record)}>Edit</button>
        <button onClick={() => handleDelete(record)}>Delete</button>
      </>
    ),
  },
];
const [row, setRow] = useState([
  {
    id: 1,
    name: "养老保险",
    personage: 40,
    firm: 35,
    img: "/public/vite.svg",
    linkname: "百度",
    link: "https://www.baidu.com/",
    total: 1200,
  },
  {
    id: 2,
    name: "医疗保险",
    personage: 100,
    firm: 30,
    img: "/public/vite.svg",
    linkname: "百度",
    link: "https://www.baidu.com/",
    total: 1200,
  },
  {
    id: 3,
    name: "失业保险",
    personage: 25,
    firm: 35,
    img: "/public/vite.svg",
    linkname: "百度",
    link: "https://www.baidu.com/",
    total: 1200,
  },
  {
    id: 4,
    name: "养老保险",
    personage: 40,
    firm: 25,
    img: "/public/vite.svg",
    linkname: "百度",
    link: "https://www.baidu.com/",
    total: 1200,
  },
  {
    id: 5,
    name: "医疗保险",
    personage: 100,
    firm: 30,
    img: "/public/vite.svg",
    linkname: "百度",
    link: "https://www.baidu.com/",
    total: 1200,
  },
  {
    id: 6,
    name: "失业保险",
    personage: 25,
    firm: 35,
    img: "/public/vite.svg",
    linkname: "百度",
    link: "https://www.baidu.com/",
    total: 1200,
  },
  {
    id: 7,
    name: "养老保险",
    personage: 40,
    firm: 25,
    img: "/public/vite.svg",
    linkname: "百度",
    link: "https://www.baidu.com/",
    total: 1200,
  },
  {
    id: 8,
    name: "医疗保险",
    personage: 100,
    firm: 30,
    img: "/public/vite.svg",
    linkname: "百度",
    link: "https://www.baidu.com/",
    total: 1200,
  },
  {
    id: 9,
    name: "失业保险",
    personage: 25,
    firm: 35,
    img: "/public/vite.svg",
    linkname: "百度",
    link: "https://www.baidu.com/",
    total: 1200,
  },
  {
    id: 10,
    name: "养老保险",
    personage: 40,
    firm: 25,
    img: "/public/vite.svg",
    linkname: "百度",
    link: "https://www.baidu.com/",
    total: 1200,
  },
]);

使用 sk Export 导出组件

interface DataSourceItem {
  [key: string]: string | number;
}

export interface ExportColumnItem {
    label: string;
    [key: string]: string | number | any;
}
export type ExportRefType = Ref<{ exportXlsx: () => void }>;

interface MyExportProps {
    children: ReactNode;
    dataSource: DataSourceItem[];// 数据源数组
    columns: ExportColumnItem[]// 列定义数组
    filename?:string;//导出的文件名
}
type ExportXlsx = {
    props:MyExportProps,
    ref:ExportRefType
}

// 引入sk 导出组件
import { MyExport, ExportRefType } from "@wsk1113/react-ui-sk";

export default function Demo() {
  const ExportRef: ExportRefType = useRef(null);
  const exportXlsx = () => {
    if (ExportRef.current) {
      ExportRef.current.exportXlsx();
    }
  };
  return (
    <div>
      <MyExport dataSource={row} columns={columns} ref={ExportRef}>
        <button onClick={exportXlsx}>导出</button>
      </MyExport>
    </div>
  );
}

使用 sk 导入组件

export interface ImportColumnItem {
  [key: string]: string | number | any;
}
interface MyImportProps {
    columns: ImportColumnItem[]// 定义导入列名数组
    importXlsx: (data: Array<object>) => void //调用函数，获取导入的数据
    inputShow?: boolean;//按钮形式：false;上传边框样式：ture
    width?:string;//边框宽度
    height?:string;//边框高度
}

// 引入sk 导入组件
import { MyImport } from "@wsk1113/react-ui-sk";

export default function Demo() {
  const importXlsx = (data: Array<any>) => {
    console.log(data);
  };
  return (
    <div>
      <MyImport
        columns={columns}
        importXlsx={importXlsx}
        inputShow={false}
      ></MyImport>
    </div>
  );
}

使用 sk 提示组件

title: string; //标题
duration: number; //延迟时间
type: string; //类型 成功success、失败error、警告warning、提示tips

// 引入sk 提示组件
import { useMessage } from "@wsk1113/react-ui-sk";
export default function Demo() {
  const [MessageJSX, openMessage] = useMessage({
    title: "哥的窗窗",
    duration: 1000,
    type: "tips",
  });
  return (
    <div>
      <button
        onClick={() => {
          openMessage();
        }}
      >
        显示提示
      </button>
      弹窗JSX
      {MessageJSX}
    </div>
  );
}

使用 sk 表格组件

interface Column {
  key: string;
  label: string;
  type: ("normal" & "controls" & "imges" & "link" & "sort") | string;
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  render?:
    | ((_: Array<object> | string, item: TableDataItem) => ReactNode)
    | any;
  color?: string; //行中字体颜色
}

export interface TableDataItem {
  id: number;
  [key: string]: string | number | undefined;
}

interface CustomTableProps {
  columns: Column[]; //表头及数据类型
  data: TableDataItem[]; //表格数据
  width?: string; //表格的整体宽度
  lineHeight?: string; //行高
}

// 引入sk 表单组件
import { MyTable } from "@wsk1113/react-ui-sk";
export default function Demo() {
  //columns和rows可以看--表格数据和类型定义-参考
  return (
    <div>
      <MyTable columns={columns} data={rows} lineHeight="45px" width="600px" />
    </div>
  );
}

使用 sk 搜索筛选组件

export interface InputField {
    key: string;
    placeholder?: string;
    type: 'text' | 'select' | 'datetime-local';
    options?: string[];
    handleChange: (val: string) => void
}
interface SearchBoxProps {
    onSearch: () => void;//搜索
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    onReset?: (() => void | undefined) | any;//重置
    inputFields: InputField[];//每个搜索的类型数据
    inputData: { [key: string]: string | number };//搜索框表单数据
}

// 引入sk 搜索筛选组件
import { MySearchBox,InputField } from "@wsk1113/react-ui-sk";
export default function Demo() {
  const [query, setQuery] = useState("");
  const [category, setCategory] = useState("");
  const [time, setTime] = useState("");
  const inputFields: Array<InputField> = [
    {
      key: "query",
      placeholder: "Enter Value 1",
      type: "text",
      handleChange: (val: string) => {
        setQuery(val);
      },
    },
    {
      key: "category",
      placeholder: "Enter Value 2",
      type: "select",
      options: ["www", "eee", "rrr"],
      handleChange: (val: string) => {
        setCategory(val);
      },
    },
    {
      key: "time",
      placeholder: "Enter Value 3",
      type: "datetime-local",
      handleChange: (val: string) => {
        setTime(val);
      },
    },
  ];
  const handleSearch = () => {
    // 处理搜索逻辑
    console.log("query:", query, "category:", category, "time:", time);
  };
  const handleReset = () => {
    setQuery("");
    setCategory("");
    setTime("");
  };
  return (
    <div>
      <MySearchBox
        onSearch={handleSearch}
        onReset={handleReset}
        inputFields={inputFields}
        inputData={{ query, category, time }}
      ></MySearchBox>
    </div>
  );
}