@yl_lowcode/pro-shineout

基于 Shineout 3.x 的中后台配置化 React 组件库，通过 Schema 驱动的方式快速构建表单、表格、CRUD 等常见业务场景。

特性

• 🚀 Schema 驱动 — 通过 JSON 配置即可生成完整的表单、表格、CRUD 页面
• 📦 开箱即用 — 内置 20+ 表单控件、表格增强、弹窗封装等企业级组件
• 🎨 主题定制 — 支持多种主题色（blue / red / pink / green / orange / purple）及暗色模式
• 🔧 灵活扩展 — 支持自定义 Widget 注册、自定义渲染、条件联动
• 📱 TypeScript — 完整的类型定义，提供良好的开发体验

安装

npm install @yl_lowcode/pro-shineout shineout react react-dom

组件一览

| 组件 | 说明 | | --------------- | ---------------------------------------------- | | ProForm | Schema 驱动的表单，支持多列布局、校验、联动 | | ProSearch | 搜索表单，支持展开/收起、自动布局 | | ProTable | 增强表格，支持异步请求、排序、列设置、枚举渲染 | | ProCrud | 完整 CRUD 方案，集成搜索 + 表格 + 弹窗表单 | | ProModal | 增强弹窗，内置 loading 和表单提交逻辑 | | ProDrawer | 抽屉组件，API 同 ProModal | | ProButton | 增强按钮，支持二次确认、自动 loading、权限控制 | | ProSubmit | 提交表单封装 | | ProTabs | 多 Tab 页签，每个 Tab 可承载独立 CRUD | | Drag | 拖拽排序列表 | | DragForm | 拖拽表单设计 | | Ellipsis | 文本省略组件 | | Icon | 图标注册与使用 | | ContextMenu | 右键菜单 | | Anchor | 锚点导航 |

快速上手

ProForm — 配置化表单

import { ProForm } from "@yl_lowcode/pro-shineout";

export default () => {
  const [form] = ProForm.useForm();
  return (
    <ProForm
      column={2}
      form={form}
      defaultValue={{ username: "admin" }}
      schema={[
        {
          type: "Input",
          name: "username",
          label: "用户名",
          required: true,
        },
        {
          type: "Select",
          name: "role",
          label: "角色",
          props: {
            data: [
              { label: "管理员", value: "admin" },
              { label: "普通用户", value: "user" },
            ],
          },
        },
        {
          type: "DatePicker",
          name: "birthday",
          label: "出生日期",
        },
        {
          type: "TextArea",
          name: "remark",
          label: "备注",
          span: 24,
          props: { rows: 3 },
        },
      ]}
      onSubmit={(values) => {
        console.log("提交数据:", values);
      }}
    />
  );
};

ProTable — 配置化表格

import { ProTable } from "@yl_lowcode/pro-shineout";
import axios from "axios";

export default () => {
  return (
    <ProTable
      title="用户列表"
      width={1200}
      height={430}
      bordered
      columns={[
        { title: "ID", dataIndex: "id", width: 80, sorter: "id" },
        { title: "姓名", dataIndex: "username" },
        {
          title: "性别",
          dataIndex: "sex",
          enums: [
            { value: 0, label: "男", color: "success" },
            { value: 1, label: "女", color: "danger" },
          ],
        },
        { title: "登录次数", dataIndex: "logins", useThousandth: 0 },
        { title: "分数占比", dataIndex: "score", usePercentage: 2 },
      ]}
      request={async (params, sorter) => {
        const { data } = await axios.get("/api/users", { params });
        return data; // 需返回 { count, list }
      }}
    />
  );
};

ProSearch — 搜索表单

import { ProSearch } from "@yl_lowcode/pro-shineout";

export default () => {
  return (
    <ProSearch
      column={3}
      onSearch={async (values) => {
        console.log("搜索条件:", values);
      }}
      onReset={() => console.log("重置")}
      schema={[
        { type: "Input", name: "keyword", label: "关键词" },
        {
          type: "Select",
          name: "status",
          label: "状态",
          props: {
            data: [
              { label: "启用", value: 1 },
              { label: "禁用", value: 0 },
            ],
          },
        },
        { type: "DatePicker", name: "date", label: "日期" },
      ]}
    />
  );
};

ProCrud — 完整 CRUD 方案

import { ProCrud } from "@yl_lowcode/pro-shineout";
import { Message } from "shineout";
import { useState } from "react";
import axios from "axios";

export default () => {
  const [visible, setVisible] = useState(false);
  const [record, setRecord] = useState({});

  return (
    <ProCrud
      keygen="id"
      height={400}
      bordered
      tools={[
        {
          type: "primary",
          label: "新增",
          icon: "plus",
          onClick: () => {
            setRecord({});
            setVisible(true);
          },
        },
      ]}
      rowOperations={{
        width: 140,
        menus: [
          {
            label: "编辑",
            onClick: ({ record }) => {
              setRecord(record);
              setVisible(true);
            },
          },
          {
            label: "删除",
            confirm: "确认删除?",
            onClick: async ({ search }) => {
              Message.success("已删除");
              await search?.();
            },
          },
        ],
      }}
      columns={[
        { title: "ID", dataIndex: "id", width: 60 },
        { title: "名称", dataIndex: "name" },
        { title: "类型", dataIndex: "type" },
      ]}
      request={async (params) => {
        const { data } = await axios.get("/api/list", { params });
        return data;
      }}
      pages={{
        add: {
          type: "modal",
          title: "新增/编辑",
          visible,
          defaultValue: record,
          schema: [
            { type: "Input", name: "name", label: "名称", required: true },
            {
              type: "Select",
              name: "type",
              label: "类型",
              required: true,
              props: {
                data: [
                  { label: "A", value: "A" },
                  { label: "B", value: "B" },
                ],
              },
            },
          ],
          async onSubmit(values, api) {
            Message.success("提交成功");
            api?.search();
          },
          onClose: () => setVisible(false),
        },
      }}
    />
  );
};

ProButton — 增强按钮

import { ProButton } from "@yl_lowcode/pro-shineout";

export default () => {
  return (
    <>
      {/* 异步 onClick 自动 loading */}
      <ProButton
        type="primary"
        onClick={async () => {
          await new Promise((res) => setTimeout(res, 1000));
        }}
      >
        提交
      </ProButton>

      {/* 二次确认 */}
      <ProButton
        type="danger"
        confirm="确认删除此记录?"
        onClick={async () => {
          await deleteRecord();
        }}
      >
        删除
      </ProButton>
    </>
  );
};

Schema 配置说明

表单项 Schema（ProFormItemProps）

| 属性 | 类型 | 说明 | | ---------- | ----------------------- | -------------------------------- | | type | string | 组件类型，见下方支持列表 | | name | string | 字段名 | | label | string | 标签文本 | | required | boolean | 是否必填 | | span | number | 栅格宽度（1-24） | | tooltip | string | 提示信息 | | tip | string | 描述信息 | | props | object | 传递给底层 Shineout 组件的 props | | visible | (formData) => boolean | 条件显隐 | | disabled | (formData) => boolean | 条件禁用 | | effect | string[] | 依赖字段列表（联动） |

支持的表单组件类型

| type | 说明 | | ----------------- | ------------ | | Input | 输入框 | | InputNumber | 数字输入框 | | Password | 密码输入框 | | TextArea | 多行文本 | | Select | 下拉选择 | | AsyncSelect | 异步下拉选择 | | RadioGroup | 单选按钮组 | | CheckGroup | 复选框组 | | Switch | 开关 | | Slider | 滑块 | | Rate | 评分 | | DatePicker | 日期选择器 | | TreeSelect | 树选择 | | AsyncTreeSelect | 异步树选择 | | Cascader | 级联选择器 | | RangeInput | 区间输入 | | InputMore | 多条输入 | | UploadFile | 文件上传 | | Block | 分区标题块 | | FormList | 动态表单列表 | | FieldSet | 字段集 |

表格列 Schema（ProTableColumnProps）

| 属性 | 类型 | 说明 | | --------------- | ------------------------------------- | ------------------------------ | | title | string | 列标题 | | dataIndex | string | 数据字段名 | | width | number | 列宽 | | sorter | string | 排序字段标识 | | enums | Array<{value, label, color}> | 枚举映射渲染 | | useThousandth | number | 千分位格式化（参数为小数位数） | | usePercentage | number | 百分比格式化（参数为小数位数） | | tooltips | string | 列标题提示 | | render | (value, record, index) => ReactNode | 自定义渲染 |

全局配置

import { setConfig } from "@yl_lowcode/pro-shineout";

setConfig({
  defaultMaskCloseAble: true, // 点击遮罩关闭弹窗
  enterPressTouchSubmit: true, // 回车触发提交
  defaultPageSize: 10, // 默认分页大小
  btnAuthList: [], // 按钮权限列表
});

主题切换

import { setTheme } from "@yl_lowcode/pro-shineout";

// 切换主题色
setTheme("blue"); // blue | red | pink | green | orange | purple

// 切换暗色模式
setTheme("dark");

工具函数与 Hooks

import { utils, useUpdateEffect, useRefresh } from "@yl_lowcode/pro-shineout";

// 工具函数
utils.uuid(8); // 生成随机 ID
utils.isEmpty(value); // 判断是否为空
utils.copyToClipBoard(text, cb); // 复制到剪贴板

// Hooks
useUpdateEffect(() => {}, [deps]); // 跳过首次执行的 useEffect
const refresh = useRefresh(); // 获取刷新触发器

开发

# 构建
npm run build

# 发布
./publish.sh

依赖

• peerDependencies: react >= 18、react-dom >= 18、shineout 3.x
• 运行时依赖: dayjs、lodash.debounce、lodash.clonedeep、lodash.mergewith

License

MIT