@yl_lowcode/shared

React 通用工具组件库，提供水印、分割面板、虚拟列表、瀑布流、懒加载等高频场景的轻量级解决方案。零外部依赖，开箱即用。

✨ 特性

• 🪶 零外部 UI 依赖，轻量纯净
• 📦 按需导入，Tree-shaking 友好
• 🎯 TypeScript 类型完备
• ⚡ 高性能实现（虚拟滚动、RAF 节流等）
• 🧩 每个组件独立，互不耦合

📦 安装

# pnpm
pnpm install @yl_lowcode/shared

# npm
npm install @yl_lowcode/shared

前置依赖

{
  "peerDependencies": {
    "react": "^18.x",
    "react-dom": "^18.x"
  }
}

🚀 使用

import {
  Watermark,
  SplitPane,
  VirtualList,
  Masonry,
  LoadMore,
  FullScreen,
  Lazy,
  QrCode,
  copyToClipBoard,
} from "@yl_lowcode/shared";

📖 组件列表

Watermark 水印

在容器上覆盖文字水印，支持自定义内容、角度、颜色、字号等。基于 Canvas 生成，click 穿透不影响交互。

<Watermark content="内部机密" rotate={-20} fontSize={16}>
  <div>页面内容</div>
</Watermark>

| 属性 | 类型 | 默认值 | 说明 | | --------- | --------------- | -------------------- | ---------------- | | content | string | 'watermark' | 水印文字 | | width | number | 200 | 单个水印宽度(px) | | height | number | 200 | 单个水印高度(px) | | rotate | number | -20 | 旋转角度 | | zIndex | number | 9000 | 水印层级 | | color | string | 'rgba(0,0,0,0.15)' | 文字颜色 | | fontSize | number | 16 | 字体大小 | | style | CSSProperties | - | 容器样式 | | className | string | - | 容器类名 |

SplitPane 分割面板

可拖拽的双面板分割布局，支持水平/垂直方向，可设置最小尺寸约束。

<SplitPane
  direction="horizontal"
  initialSize={300}
  minFirstSize={100}
  minSecondSize={200}
>
  <div>左侧面板</div>
  <div>右侧面板</div>
</SplitPane>

| 属性 | 类型 | 默认值 | 说明 | | ------------- | ---------------------------- | -------------- | ------------------ | | direction | 'horizontal' \| 'vertical' | 'horizontal' | 分割方向 | | initialSize | number | 200 | 初始主面板大小(px) | | minFirstSize | number | 50 | 第一面板最小尺寸 | | minSecondSize | number | 50 | 第二面板最小尺寸 | | children | [ReactNode, ReactNode] | - | 两个子面板 | | style | CSSProperties | - | 容器样式 | | className | string | - | 容器类名 |

VirtualList 虚拟列表

高性能虚拟滚动列表，仅渲染可视区域 DOM，支持无限滚动加载。适用于大数据量列表场景（万级数据流畅滚动）。

<VirtualList
  height={500}
  data={items}
  itemHeight={60}
  renderItem={(item, index) => <div>{item.name}</div>}
  loading={loading}
  hasMore={hasMore}
  onLoad={fetchMore}
/>

| 属性 | 类型 | 默认值 | 说明 | | ---------- | --------------------------------------- | ------- | ------------------ | | height | number | - | 容器高度(px) | | data | T[] | - | 数据源 | | itemHeight | number | - | 每行固定高度(px) | | renderItem | (item: T, index: number) => ReactNode | - | 行渲染函数 | | loading | boolean | - | 是否加载中 | | hasMore | boolean | - | 是否有更多数据 | | onLoad | () => void | - | 触底加载回调 | | threshold | number | 50 | 触发加载的距离(px) | | error | boolean | false | 是否出错 | | footer | { loading?, noMore?, error? } | - | 自定义底部文案 |

Masonry 瀑布流

CSS + 贪心算法实现的瀑布流布局，自动将元素分配到最短列，实现视觉均衡。

<Masonry
  columnCount={3}
  items={[
    { key: 1, height: 200, content: <div>卡片1</div> },
    { key: 2, height: 150, content: <div>卡片2</div> },
  ]}
/>

| 属性 | 类型 | 默认值 | 说明 | | ----------- | -------------------------------------- | ------ | ---------- | | items | { key, content?, height?, style? }[] | [] | 数据项列表 | | columnCount | number | 3 | 列数 | | style | CSSProperties | - | 容器样式 |

LoadMore 滚动加载

滚动触底自动加载更多，支持加载中/无更多数据/错误重试状态，使用 RAF 节流优化性能。

<LoadMore height="400px" loading={loading} hasMore={hasMore} onLoad={fetchNext}>
  {list.map((item) => (
    <Card key={item.id} {...item} />
  ))}
</LoadMore>

| 属性 | 类型 | 默认值 | 说明 | | --------- | ------------------------------- | ------- | ---------------- | | height | string \| number | - | 容器高度（必填） | | loading | boolean | - | 是否加载中 | | hasMore | boolean | - | 是否有更多数据 | | onLoad | () => void | - | 触底回调 | | threshold | number | 50 | 触发距离(px) | | error | boolean | false | 错误状态 | | footer | { loading?, noMore?, error? } | - | 自定义底部文案 |

FullScreen 网页全屏

Web 全屏组件（非浏览器 Fullscreen API），通过 fixed 定位覆盖视口实现，支持 ESC 退出、ref 命令式控制。

const fullRef = useRef<WebFullScreenRef>(null);

<FullScreen ref={fullRef} backgroundColor="#fff">
  <div>内容区域</div>
  <button onClick={() => fullRef.current?.toggle()}>切换全屏</button>
</FullScreen>;

| 属性 | 类型 | 默认值 | 说明 | | --------------- | --------------------------- | -------- | ------------ | | backgroundColor | string | '#fff' | 全屏背景色 | | zIndex | number | 1000 | 全屏层级 | | className | string | - | 类名 | | style | CSSProperties | - | 样式 | | onChange | (isFull: boolean) => void | - | 状态变化回调 |

Ref 方法： enter() / exit() / toggle() / isFullscreen

Lazy 懒加载

基于 IntersectionObserver 的懒加载组件，元素进入视口时才渲染内容，适合长页面图片/组件按需加载。

<Lazy placeholder={<Skeleton />}>
  <HeavyComponent />
</Lazy>

| 属性 | 类型 | 默认值 | 说明 | | ----------- | -------------------------- | -------------------- | ---------------- | | children | ReactNode | - | 需要懒加载的内容 | | placeholder | ReactNode | null | 加载前的占位内容 | | options | IntersectionObserverInit | { threshold: 0.1 } | Observer 配置 |

QrCode 二维码

基于 Canvas 的二维码生成组件，支持自定义尺寸、颜色、纠错级别，可嵌入 Logo 图片。

<QrCode value="https://example.com" size={200} level="M" />

copyToClipBoard 复制到剪贴板

工具函数，优先使用 Clipboard API，降级兼容 execCommand。

import { copyToClipBoard } from "@yl_lowcode/shared";

await copyToClipBoard("要复制的文本", () => {
  message.success("复制成功");
});

📄 License

MIT