react-public-components 1.1.18 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +165 -324
- package/dist/index.cjs +7021 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +4596 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +1517 -2
- package/dist/index.d.ts +1517 -2
- package/dist/index.js +6993 -13
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,386 +1,227 @@
|
|
|
1
1
|
# react-public-components
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/react-public-components)
|
|
4
|
+
[](https://github.com/xhua007/react-public-components)
|
|
4
5
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
1. **CollapseBox** — 可折叠的内容容器组件
|
|
8
|
-
2. **Splitter** — 可拖拽调整、可折叠的分屏面板组件
|
|
9
|
-
3. **DisabledBox** — 禁用态包装容器组件（带锁图标及拦截事件）
|
|
10
|
-
4. **Masonry** — 瀑布流布局组件（一比一复刻 Ant Design V6 规范）
|
|
6
|
+
📦 **企业级现代 React 通用核心组件库**。零沉重 UI 库绑定，开箱即用，提供 64 款真正高频、极客质感的中后台与现代 Web 应用组件。
|
|
11
7
|
|
|
12
8
|
---
|
|
13
9
|
|
|
14
|
-
##
|
|
15
|
-
|
|
16
|
-
### 简介
|
|
17
|
-
|
|
18
|
-
`CollapseBox` 是一个带切换按钮的可折叠容器。支持水平（左右收起）与垂直（上下收起）两种方向，按钮可放置在容器四条边的任意一侧，适合用作侧边栏、详情面板等可隐藏区域。
|
|
10
|
+
## 🌟 特性亮点
|
|
19
11
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
import 'react-public-components/styles.css';
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
### Props
|
|
29
|
-
|
|
30
|
-
| 属性 | 类型 | 默认值 | 说明 |
|
|
31
|
-
| ---------------- | ---------------------------------------- | -------------- | ---------------------------------------------------------------------------------- |
|
|
32
|
-
| `children` | `ReactNode` | - | 容器内部渲染的内容 |
|
|
33
|
-
| `title` | `string` | `'内容区域'` | 标题（当前版本内部隐藏渲染，仅作为占位属性保留） |
|
|
34
|
-
| `direction` | `'horizontal' \| 'vertical'` | `'horizontal'` | 折叠方向：`horizontal` 沿 X 轴收起，`vertical` 沿 Y 轴收起 |
|
|
35
|
-
| `buttonPosition` | `'right' \| 'left' \| 'top' \| 'bottom'` | `'right'` | 切换按钮位置。`horizontal` 时建议 `left`/`right`，`vertical` 时建议 `top`/`bottom` |
|
|
36
|
-
| `defaultWidth` | `number \| string` | `600` | 容器宽度（支持像素数字如 `500` 或百分比字符串如 `'50%'`） |
|
|
37
|
-
| `defaultHeight` | `number \| string` | `300` | 容器高度（支持像素数字如 `300` 或百分比字符串如 `'50%'`） |
|
|
38
|
-
| `contentPadding` | `string` | `'16px'` | 内容区内边距 |
|
|
39
|
-
| `headerHeight` | `number` | `16` | 头部预留高度，用于计算内容区最大高度 |
|
|
40
|
-
| `className` | `string` | - | 根节点自定义类名 |
|
|
41
|
-
|
|
42
|
-
### 基础用法
|
|
43
|
-
|
|
44
|
-
```tsx
|
|
45
|
-
import { CollapseBox } from 'react-public-components';
|
|
46
|
-
|
|
47
|
-
export default function Demo() {
|
|
48
|
-
return (
|
|
49
|
-
<CollapseBox
|
|
50
|
-
direction="horizontal"
|
|
51
|
-
buttonPosition="right"
|
|
52
|
-
defaultWidth="50%"
|
|
53
|
-
defaultHeight={400}
|
|
54
|
-
>
|
|
55
|
-
<p>这里是折叠容器中的内容。</p>
|
|
56
|
-
</CollapseBox>
|
|
57
|
-
);
|
|
58
|
-
}
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
### 垂直方向示例
|
|
62
|
-
|
|
63
|
-
```tsx
|
|
64
|
-
<CollapseBox direction="vertical" buttonPosition="bottom" defaultHeight={300}>
|
|
65
|
-
<p>上下方向折叠的内容。</p>
|
|
66
|
-
</CollapseBox>
|
|
67
|
-
```
|
|
12
|
+
- 💎 **精炼通用**：涵盖中后台与 SaaS 产品的通用、布局导航、数据录入、数据展示、反馈 5 大类别共 64 款高频组件。
|
|
13
|
+
- ⚡ **轻量零依赖**：不强制依赖 Ant Design 等庞大第三方 UI 库，体积小巧，按需引入。
|
|
14
|
+
- 🛡️ **工业级防御**：核心安全组件（如 `Watermark`）采用原生 DOM 脱离 VDOM 注入防篡改架构，支持毫秒自愈与防审查元素删除。
|
|
15
|
+
- 🎨 **极客质感**：现代设计语言，自带平滑微动效、毛玻璃（Glassmorphism）、硬件加速流光与暗色模式适配。
|
|
16
|
+
- 📦 **开箱即用**：原生支持 TypeScript 类型定义、ESM、CommonJS 与样式自动构建。
|
|
68
17
|
|
|
69
18
|
---
|
|
70
19
|
|
|
71
|
-
##
|
|
72
|
-
|
|
73
|
-
### 简介
|
|
74
|
-
|
|
75
|
-
`Splitter` 是一个支持拖拽调整大小、可折叠、可重置的分屏面板组件，灵感来自 Ant Design 的 Splitter，但提供了更精细的折叠按钮交互。支持 `horizontal`（左右分屏）与 `vertical`（上下分屏）两种方向。
|
|
76
|
-
|
|
77
|
-
### 引入方式
|
|
20
|
+
## 快速安装
|
|
78
21
|
|
|
79
|
-
```
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
| 属性 | 类型 | 默认值 | 说明 |
|
|
86
|
-
| ---------------------- | ------------------------------------------------------------------------------------------------------------------- | -------------- | ------------------------------------------------------------------------------------- |
|
|
87
|
-
| `children` | `ReactNode`（建议传入 `Splitter.Panel`） | - | 面板集合，建议 2 个及以上 |
|
|
88
|
-
| `className` | `string` | - | 根节点自定义类名 |
|
|
89
|
-
| `classNames` | `Partial<Record<SemanticDOM, string>> \| ((info: { props }) => Partial<Record<SemanticDOM, string>>)` | - | 自定义组件内部各语义化结构（`root` / `panel` / `dragger`）的类名，支持对象或函数 |
|
|
90
|
-
| `style` | `CSSProperties` | - | 根节点自定义 CSS 样式 |
|
|
91
|
-
| `styles` | `Partial<Record<SemanticDOM, CSSProperties>> \| ((info: { props }) => Partial<Record<SemanticDOM, CSSProperties>>)` | - | 自定义组件内部各语义化结构（`root` / `panel` / `dragger`）的 CSS 样式，支持对象或函数 |
|
|
92
|
-
| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | 分屏方向（优先级高于 `vertical`） |
|
|
93
|
-
| `vertical` | `boolean` | `false` | 是否垂直分屏（兼容写法） |
|
|
94
|
-
| `lazy` | `boolean` | `false` | 是否在拖拽结束时才更新视图（提升性能） |
|
|
95
|
-
| `onResizeStart` | `(sizes: number[]) => void` | - | 拖拽开始回调 |
|
|
96
|
-
| `onResize` | `(sizes: number[]) => void` | - | 拖拽过程中尺寸变化回调 |
|
|
97
|
-
| `onResizeEnd` | `(sizes: number[]) => void` | - | 拖拽/折叠/重置结束回调 |
|
|
98
|
-
| `onCollapse` | `(collapsed: boolean[], sizes: number[]) => void` | - | 面板展开或折叠状态发生变化时的回调 |
|
|
99
|
-
| `onDraggerDoubleClick` | `(index: number) => void` | - | 双击拖拽条回调 |
|
|
100
|
-
| `draggerIcon` | `ReactNode` | - | 自定义拖拽手柄指示图标节点 |
|
|
101
|
-
| `destroyOnHidden` | `boolean` | `false` | 折叠/隐藏时是否销毁所有面板内容节点 |
|
|
102
|
-
|
|
103
|
-
### Splitter.Panel Props
|
|
104
|
-
|
|
105
|
-
| 属性 | 类型 | 默认值 | 说明 |
|
|
106
|
-
| ----------------- | ---------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------- |
|
|
107
|
-
| `children` | `ReactNode` | - | 面板内容 |
|
|
108
|
-
| `className` | `string` | - | 面板自定义类名 |
|
|
109
|
-
| `size` | `number \| '${number}%'` | - | 受控尺寸 |
|
|
110
|
-
| `defaultSize` | `number \| '${number}%'` | - | 初始尺寸（未设置时按剩余空间平均分配） |
|
|
111
|
-
| `min` | `number \| '${number}%'` | `0` | 最小尺寸 |
|
|
112
|
-
| `max` | `number \| '${number}%'` | - | 最大尺寸 |
|
|
113
|
-
| `collapsible` | `boolean \| { start?: boolean; end?: boolean; showCollapsibleIcon?: boolean \| 'auto' }` | `false` | 是否允许折叠面板。支持配置指定折叠方向（`start`/`end`）及图标显示策略（`showCollapsibleIcon`） |
|
|
114
|
-
| `destroyOnHidden` | `boolean` | - | 折叠/隐藏时是否销毁当前面板内容节点（可覆盖 Splitter 根属性） |
|
|
115
|
-
| `resizable` | `boolean` | `true` | 是否允许拖拽调整（两侧任一为 `false` 都会禁用对应分隔条） |
|
|
116
|
-
| `style` | `CSSProperties` | - | 面板自定义样式 |
|
|
117
|
-
|
|
118
|
-
### 基础用法
|
|
119
|
-
|
|
120
|
-
```tsx
|
|
121
|
-
import { Splitter } from 'react-public-components';
|
|
122
|
-
|
|
123
|
-
export default function Demo() {
|
|
124
|
-
return (
|
|
125
|
-
<Splitter style={{ height: 400 }}>
|
|
126
|
-
<Splitter.Panel defaultSize="40%" min="20%">
|
|
127
|
-
<p>左侧面板</p>
|
|
128
|
-
</Splitter.Panel>
|
|
129
|
-
<Splitter.Panel>
|
|
130
|
-
<p>右侧面板</p>
|
|
131
|
-
</Splitter.Panel>
|
|
132
|
-
</Splitter>
|
|
133
|
-
);
|
|
134
|
-
}
|
|
22
|
+
```bash
|
|
23
|
+
npm install react-public-components
|
|
24
|
+
# 或使用 pnpm
|
|
25
|
+
pnpm add react-public-components
|
|
26
|
+
# 或使用 yarn
|
|
27
|
+
yarn add react-public-components
|
|
135
28
|
```
|
|
136
29
|
|
|
137
|
-
|
|
30
|
+
在项目入口文件中引入全局样式：
|
|
138
31
|
|
|
139
32
|
```tsx
|
|
140
|
-
|
|
141
|
-
<Splitter.Panel defaultSize="30%" collapsible min="10%">
|
|
142
|
-
<p>上方面板（可折叠）</p>
|
|
143
|
-
</Splitter.Panel>
|
|
144
|
-
<Splitter.Panel collapsible>
|
|
145
|
-
<p>下方面板（可折叠）</p>
|
|
146
|
-
</Splitter.Panel>
|
|
147
|
-
</Splitter>
|
|
33
|
+
import 'react-public-components/styles.css';
|
|
148
34
|
```
|
|
149
35
|
|
|
150
|
-
|
|
36
|
+
---
|
|
151
37
|
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
38
|
+
## 🧩 组件全览（64 款核心高频组件）
|
|
39
|
+
|
|
40
|
+
### 1. 通用 General (9 款)
|
|
41
|
+
| 组件名 | 中文名称 | 特性与场景说明 |
|
|
42
|
+
| :--- | :--- | :--- |
|
|
43
|
+
| **`CodeSnippet`** | 极客代码块 | Mac 终端风格代码块卡片，带红黄绿圆点、语言标签与一键平滑复制。 |
|
|
44
|
+
| **`Watermark`** | 防篡改水印 | 动态防截屏安全水印，基于原生 DOM 独立注入与 ComputedStyle 校验，毫秒自愈防 F12 审查元素删除/隐藏。 |
|
|
45
|
+
| **`QrCodeCard`** | 二维码卡片 | 多功能扫码登录/支付卡片，支持 Logo 嵌入、失效过期遮罩、高清下载与精致 Loading。 |
|
|
46
|
+
| **`GuidedTour`** | 漫游引导 | 新手引导步进器，带智能镂空高亮遮罩、步骤弹窗与状态持久化。 |
|
|
47
|
+
| **`FilePreviewer`** | 文件预览 | 多格式文件与媒体统一弹窗预览器，支持图片、音视频、PDF、代码与一键下载。 |
|
|
48
|
+
| **`FloatingActionBar`** | 悬浮操作栏 | 表格与列表多选时从屏幕底部浮出的毛玻璃操作栏，内置统计与批量动作。 |
|
|
49
|
+
| **`Fullscreen`** | 全屏容器 | 支持局部元素原生全屏与网页内最大化置顶切换，支持快捷悬浮按钮与 Render Props。 |
|
|
50
|
+
| **`CopyButton`** | 复制按钮 | 提供点击复制到剪贴板功能，支持纯图标、带文字按钮与内联文本，内置 Tooltip 动效。 |
|
|
51
|
+
| **`ContextMenu`** | 右键菜单 | 为任意区域或列表行提供右键上下文菜单，支持视口防溢出翻转、二级子菜单与快捷键。 |
|
|
157
52
|
|
|
158
|
-
|
|
53
|
+
---
|
|
159
54
|
|
|
160
|
-
|
|
161
|
-
|
|
55
|
+
### 2. 布局与导航 Layout & Nav (9 款)
|
|
56
|
+
| 组件名 | 中文名称 | 特性与场景说明 |
|
|
57
|
+
| :--- | :--- | :--- |
|
|
58
|
+
| **`CascadeDrawer`** | 级联下钻抽屉 | 多层级无限下钻抽屉容器，带顶部面包屑返回导航与平滑推拉动效。 |
|
|
59
|
+
| **`KanbanBoard`** | 任务看板 | 轻量任务看板与泳道管理，基于原生 HTML5 Drag & Drop 跨列平滑拖拽。 |
|
|
60
|
+
| **`DragSortList`** | 拖拽排序列表 | 纯原生轻量拖拽重排序列表，支持平滑占位与阴影反馈。 |
|
|
61
|
+
| **`Marquee`** | 无缝跑马灯 | 基于硬件加速的无缝平滑滚动 Logo 墙与广播通知条，支持悬停暂停与边缘渐变。 |
|
|
62
|
+
| **`ScrollTracker`** | 滚动与吸顶 | 阅读进度条（ScrollTracker）与智能吸顶容器（StickyHeader，带毛玻璃与阴影）。 |
|
|
63
|
+
| **`InfiniteScrollList`** | 无限滚动列表 | 触底自动触发异步加载的无限滚动列表容器，内置加载骨架与到底提示。 |
|
|
64
|
+
| **`CollapseBox`** | 折叠容器 | 支持水平与垂直方向折叠的弹性容器组件，支持自定义按钮位置与默认尺寸。 |
|
|
65
|
+
| **`Splitter`** | 分隔面板 | 支持多面板拖拽调整尺寸、折叠与双击重置的可定制分隔面板组件。 |
|
|
66
|
+
| **`Masonry`** | 瀑布流 | 基于列优先的高性能响应式瀑布流布局组件，遵循 AntD 规范。 |
|
|
162
67
|
|
|
163
68
|
---
|
|
164
69
|
|
|
165
|
-
|
|
70
|
+
### 3. 数据录入 Data Entry (16 款)
|
|
71
|
+
| 组件名 | 中文名称 | 特性与场景说明 |
|
|
72
|
+
| :--- | :--- | :--- |
|
|
73
|
+
| **`DualRangeSlider`** | 双滑块区间选择器 | 双向双滑块区间选择器，支持数值/价格跨度筛选与防交叉穿透。 |
|
|
74
|
+
| **`FilterChips`** | 已选筛选胶囊栏 | 多维已选筛选项胶囊汇总栏，支持单项删除与一键清空全部。 |
|
|
75
|
+
| **`FileDropZone`** | 拖拽上传容器 | 现代极客拖拽上传虚线容器，支持流光呼吸高亮与剪贴板截图粘贴。 |
|
|
76
|
+
| **`TreeTransfer`** | 树形穿梭框 | 树形层级穿梭框，左侧目录树级联勾选与右侧平铺已选列表。 |
|
|
77
|
+
| **`NumberStepper`** | 平滑数字步进器 | 长按连续加减数字步进器，支持步长控制与上下限保护。 |
|
|
78
|
+
| **`CountdownButton`** | 验证码倒计时按钮 | 短信验证码 60s 倒计时按钮，支持异步前置检查与防刷锁定。 |
|
|
79
|
+
| **`KeyValEditor`** | 键值对编辑器 | 动态增删 API Headers 与环境变量配置项，支持密码掩码与单行禁用。 |
|
|
80
|
+
| **`QuickDateRange`** | 快捷日期筛选 | 今日/近7天/本月等预设日期胶囊标签与自定义日期范围双向联动。 |
|
|
81
|
+
| **`TreeFilterPanel`** | 树形平铺筛选 | 多级分类平铺联动筛选器，支持多选、快捷全部、分类汇总与一键清空。 |
|
|
82
|
+
| **`NumericRangeInput`** | 数值区间输入 | 价格与数值区间范围输入框，自带双向联动校验与快捷区间预设标签。 |
|
|
83
|
+
| **`CronPicker`** | Cron 选择器 | 定时任务 Cron 表达式可视化生成器，支持按天/周/月多周期配置与中文人话翻译。 |
|
|
84
|
+
| **`TagInput`** | 标签输入器 | 自由标签输入组件，支持回车/逗号打标签、退格删除、双击编辑与正则校验。 |
|
|
85
|
+
| **`PasswordStrength`** | 密码强度检测 | 多维度密码复杂度实时评分与 4 段彩色进度条可视化指示器。 |
|
|
86
|
+
| **`ImageCropper`** | 图片裁剪 | 轻量原生 Canvas 图片裁剪器，支持拖拽、滚轮缩放、90° 旋转、圆形头像裁剪与 Modal 弹窗。 |
|
|
87
|
+
| **`DebounceSelect`** | 防抖下拉框 | 防抖异步搜索选择器，内置时序竞态保护、单选/多选 Tags 模式与加载态。 |
|
|
88
|
+
| **`ColorPicker`** | 颜色选择器 | 支持 HEX、HSB、RGB 及渐变色模式的高级颜色选择与调色板组件。 |
|
|
166
89
|
|
|
167
|
-
|
|
90
|
+
---
|
|
168
91
|
|
|
169
|
-
|
|
92
|
+
### 4. 数据展示 Display (27 款)
|
|
93
|
+
| 组件名 | 中文名称 | 特性与场景说明 |
|
|
94
|
+
| :--- | :--- | :--- |
|
|
95
|
+
| **`JsonDiffViewer`** | JSON 差异比对器 | JSON 结构体增删改差异彩色高亮探查，支持新旧值对照。 |
|
|
96
|
+
| **`JsonTree`** | JSON 树状探查器 | 树状无限折叠展开的 JSON 探查器，支持数据类型高亮与路径探查。 |
|
|
97
|
+
| **`MiniSparkline`** | 单行微趋势折线图 | 指标卡与表格专用的极简微折线走势图，纯 SVG 贝塞尔曲线平滑绘制。 |
|
|
98
|
+
| **`SegmentedProgress`** | 分段多色进度条 | 单条轨道并列展示多色分段比例，支持存储空间占比与图例。 |
|
|
99
|
+
| **`TrendIndicator`** | KPI 趋势升降胶囊 | 微型 KPI 指标变动升降胶囊，自动根据正负值判断涨跌并支持红绿反转。 |
|
|
100
|
+
| **`PhotoViewer`** | 相册画廊查看器 | 全功能多图画廊查看器，支持左右键盘按键切图与缩略图底栏联动。 |
|
|
101
|
+
| **`DiffTable`** | 两期差异对比表格 | 两期数据差异对比表格，自动计算增减差值与百分比红绿高亮。 |
|
|
102
|
+
| **`StatusTimeline`** | 审批流时间轴 | 高级审批流与动态耗时时间轴，包含节点状态徽标、经办人与流转耗时。 |
|
|
103
|
+
| **`GradientText`** | 流光渐变文字 | 现代 SaaS 霓虹横向流光渐变文字，支持背景平滑滚动动画。 |
|
|
104
|
+
| **`VideoPlayer`** | 视频播放器 | 轻量现代化视频播放器，暗黑毛玻璃控制条、快进快退 10s、0.75x~2.0x 倍速与画中画。 |
|
|
105
|
+
| **`PdfViewer`** | PDF 在线阅读器 | 轻量 Web PDF 阅读器，支持缩放 Zoom、90° 顺时针旋转与一键下载。 |
|
|
106
|
+
| **`BadgeRibbon`** | 斜角丝带角标 | 卡片左上/右上 45° 倾斜缎带徽章，支持 HOT/PRO 推荐与渐变色。 |
|
|
107
|
+
| **`ShimmerSkeleton`** | 流光骨架屏 | 高质感渐变流光掠过骨架屏，支持卡片、列表、头像与多行文本。 |
|
|
108
|
+
| **`FlipCard`** | 3D 翻转卡片 | 3D 正反面翻转卡片，鼠标悬停或点击触发 180° 平滑翻转展示详情。 |
|
|
109
|
+
| **`VirtualList`** | 虚拟列表 | 零依赖轻量虚拟滚动列表，万级海量数据 60FPS 极速渲染不卡顿。 |
|
|
110
|
+
| **`MetricCard`** | KPI 指标卡 | Dashboard 看板指标卡片，集成 CountUp 数字跳动、环比升降趋势与微折线 Sparkline。 |
|
|
111
|
+
| **`ActivityLog`** | 操作审计日志 | 中后台业务操作与审批流动态时间轴，支持操作人头像、相对时间与变动详情折叠。 |
|
|
112
|
+
| **`AudioPlayer`** | 音频播放条 | 轻量客服录音与语音回放条，支持 Seek 拖拽、倍速切换与一键下载。 |
|
|
113
|
+
| **`TiltCard`** | 3D 倾斜卡片 | 鼠标悬停 3D 景深物理倾斜与流光高光跟随卡片。 |
|
|
114
|
+
| **`SpotlightCard`** | 聚光灯卡片 | 鼠标光晕聚光灯实时追踪跟随卡片，具备前沿极客科技感与暗色模式。 |
|
|
115
|
+
| **`SensitiveMask`** | 敏感脱敏 | 手机号/身份证/银行卡/邮箱等敏感数据脱敏展示，支持点击眼睛解密与复制。 |
|
|
116
|
+
| **`DiffViewer`** | 差异比对 | 轻量文本与代码行级差异比对器，支持分栏 Split 与行内 Unified 模式。 |
|
|
117
|
+
| **`JsonEditor`** | JSON 查看与编辑 | 轻量免外部依赖的 JSON 语法高亮查看与编辑器，支持格式化、单行压缩与错误定位。 |
|
|
118
|
+
| **`CountUp`** | 数字滚动 | 基于高质量缓动算法的平滑数字跳动动画组件，支持前缀后缀与命令式 Ref 控制。 |
|
|
119
|
+
| **`TextEllipsis`** | 文本省略 | 支持单行/多行文本截断、展开/收起切换、溢出智能 Tooltip 与一键复制。 |
|
|
120
|
+
| **`BorderBeam`** | 边框流光 | 为卡片或容器边框添加流动高亮与自定义渐变动画的特效组件。 |
|
|
121
|
+
| **`DisabledBox`** | 禁用遮罩 | 为子级元素或复杂区域提供统一的禁用态透明遮罩与防交互保护。 |
|
|
170
122
|
|
|
171
|
-
|
|
123
|
+
---
|
|
172
124
|
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
125
|
+
### 5. 反馈 Feedback (3 款)
|
|
126
|
+
| 组件名 | 中文名称 | 特性与场景说明 |
|
|
127
|
+
| :--- | :--- | :--- |
|
|
128
|
+
| **`AnnouncementBar`** | 广播通知横幅 | 页面顶部吸顶渐变广播横幅，支持可配置关闭与持久化记忆。 |
|
|
129
|
+
| **`HoverCard`** | 悬浮资料卡 | Twitter / GitHub 风格悬浮信息卡片，防误触延迟与视口防溢出。 |
|
|
130
|
+
| **`EnvBadge`** | 环境防误触角标 | 醒目的环境状态标识胶囊，点击查看构建版本详情并支持多环境跳转。 |
|
|
176
131
|
|
|
177
|
-
|
|
132
|
+
---
|
|
178
133
|
|
|
179
|
-
|
|
180
|
-
| ----------- | ------------------- | -------- | ------------------------------------------------------ |
|
|
181
|
-
| `children` | `ReactNode` | - | 容器包裹的主体内容 |
|
|
182
|
-
| `title` | `ReactNode` | - | 标题或替代内容（当未传入 `children` 时生效） |
|
|
183
|
-
| `disabled` | `boolean` | `false` | 是否禁用，禁用时显示锁图标、文字呈现灰色且拦截点击事件 |
|
|
184
|
-
| `iconAlign` | `'left' \| 'right'` | `'left'` | 锁图标的对齐位置 |
|
|
134
|
+
## 💻 典型用法示例
|
|
185
135
|
|
|
186
|
-
###
|
|
136
|
+
### 1. Watermark 防篡改水印
|
|
187
137
|
|
|
188
138
|
```tsx
|
|
189
|
-
import {
|
|
190
|
-
|
|
191
|
-
export default function
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
139
|
+
import { Watermark } from 'react-public-components';
|
|
140
|
+
|
|
141
|
+
export default function App() {
|
|
142
|
+
return (
|
|
143
|
+
<Watermark
|
|
144
|
+
content={['内部机密 严禁外传', 'alex.chen 2026-08-18']}
|
|
145
|
+
color="rgba(0, 0, 0, 0.10)"
|
|
146
|
+
antiTamper
|
|
147
|
+
>
|
|
148
|
+
<div style={{ padding: 32, height: 400 }}>
|
|
149
|
+
<h2>核心财务分析报告</h2>
|
|
150
|
+
<p>即便在控制台尝试删除 DOM 或在 Styles 面板取消勾选属性，水印也会毫秒自愈复原。</p>
|
|
151
|
+
</div>
|
|
152
|
+
</Watermark>
|
|
153
|
+
);
|
|
197
154
|
}
|
|
198
155
|
```
|
|
199
156
|
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
## 四、Masonry 瀑布流组件
|
|
203
|
-
|
|
204
|
-
### 简介
|
|
205
|
-
|
|
206
|
-
`Masonry` 是一个符合 Ant Design V6 规范的瀑布流布局组件。支持固定或响应式列数配置（`columns`）、水平垂直间距配置（`gutter`）、持续监听子项尺寸变化（`fresh`）、自定义语义化结构样式/类名（`styles`/`classNames`）以及列排序回调（`onLayoutChange`）。
|
|
207
|
-
|
|
208
|
-
### 引入方式
|
|
157
|
+
### 2. Splitter 分隔面板
|
|
209
158
|
|
|
210
159
|
```tsx
|
|
211
|
-
import {
|
|
212
|
-
```
|
|
213
|
-
|
|
214
|
-
### Masonry Props
|
|
215
|
-
|
|
216
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
217
|
-
| ---------------- | -------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------- |
|
|
218
|
-
| `classNames` | 自定义内部语义化结构 class，支持对象或函数 | `Record<'root' \| 'item', string> \| ((info: { props }) => Record<'root' \| 'item', string>)` | `-` |
|
|
219
|
-
| `columns` | 列数，固定数字或响应式配置 | `number \| { xs?: number; sm?: number; md?: number; lg?: number; xl?: number; xxl?: number }` | `3` |
|
|
220
|
-
| `fresh` | 是否持续监听子项尺寸变化 | `boolean` | `false` |
|
|
221
|
-
| `gutter` | 间距，固定数字、响应式配置或水平垂直间距配置 | `Gap \| [Gap, Gap]` | `0` |
|
|
222
|
-
| `items` | 瀑布流数据项 | `MasonryItem[]` | `-` |
|
|
223
|
-
| `itemRender` | 自定义数据项渲染函数 | `(item: MasonryItem) => ReactNode` | `-` |
|
|
224
|
-
| `styles` | 语义化结构 style，支持对象和函数形式 | `Record<'root' \| 'item', CSSProperties> \| ((info: { props }) => Record<'root' \| 'item', CSSProperties>)` | `-` |
|
|
225
|
-
| `onLayoutChange` | 列排序计算完成回调 | `(layout: { key: React.Key; column: number }[]) => void` | `-` |
|
|
226
|
-
|
|
227
|
-
### MasonryItem 属性
|
|
228
|
-
|
|
229
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
230
|
-
| ---------- | ------------------------------------------------ | ------------------ | ------ |
|
|
231
|
-
| `children` | 自定义展示内容，相对 `itemRender` 具有更高优先级 | `ReactNode` | `-` |
|
|
232
|
-
| `column` | 自定义指定放置列（0-indexed） | `number` | `-` |
|
|
233
|
-
| `data` | 自定义存储数据 | `T` | `-` |
|
|
234
|
-
| `height` | 高度（手指定时优先使用） | `number` | `-` |
|
|
235
|
-
| `key` | 唯一标识 | `string \| number` | `-` |
|
|
236
|
-
|
|
237
|
-
### 基础用法
|
|
160
|
+
import { Splitter } from 'react-public-components';
|
|
238
161
|
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
{ key: '2', height: 180, children: <div>卡片 2</div> },
|
|
251
|
-
{ key: '3', height: 150, children: <div>卡片 3</div> },
|
|
252
|
-
]}
|
|
253
|
-
/>
|
|
254
|
-
);
|
|
162
|
+
export default function App() {
|
|
163
|
+
return (
|
|
164
|
+
<Splitter style={{ height: 400 }}>
|
|
165
|
+
<Splitter.Panel defaultSize="30%" min="15%" collapsible>
|
|
166
|
+
<div style={{ padding: 16 }}>左侧导航树</div>
|
|
167
|
+
</Splitter.Panel>
|
|
168
|
+
<Splitter.Panel>
|
|
169
|
+
<div style={{ padding: 16 }}>主体工作区内容</div>
|
|
170
|
+
</Splitter.Panel>
|
|
171
|
+
</Splitter>
|
|
172
|
+
);
|
|
255
173
|
}
|
|
256
174
|
```
|
|
257
175
|
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
## 五、BorderBeam 边框流光组件
|
|
261
|
-
|
|
262
|
-
### 简介
|
|
263
|
-
|
|
264
|
-
`BorderBeam` 是一个给任意容器边框添加持续流动高亮效果的组件。使用现代 CSS Mask 遮罩与 CSS Motion Path 动画，支持单色与多点渐变色配置、多条流光均匀分布、流光尺寸与线宽调节，以及贴合自定义宿主容器。
|
|
265
|
-
|
|
266
|
-
### 引入方式
|
|
267
|
-
|
|
268
|
-
```tsx
|
|
269
|
-
import { BorderBeam } from 'react-public-components';
|
|
270
|
-
```
|
|
271
|
-
|
|
272
|
-
### API
|
|
273
|
-
|
|
274
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 | 全局配置 |
|
|
275
|
-
| ----------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------ | ----- | -------- |
|
|
276
|
-
| `children` | 装饰内容 | `ReactNode` | `-` | 6.4.0 | × |
|
|
277
|
-
| `color` | 流光颜色配置，支持单色字符串或渐变停靠点数组。`percent` 使用 `0 ~ 100` 的输入区间，组件会在内部为尾部透明过渡预留空间 | `string \| { color: string; percent: number }[]` | `-` | 6.4.0 | × |
|
|
278
|
-
| `count` | 流光数量 | `number` | `1` | 6.6.0 | × |
|
|
279
|
-
| `duration` | 流光完成一圈动画的时间，单位秒 | `number` | `6` | 6.5.0 | × |
|
|
280
|
-
| `lineWidth` | 流光线宽，数字类型按像素处理 | `number \| string` | `1px` | 6.5.0 | × |
|
|
281
|
-
| `outset` | 流光层相对容器边缘的外扩距离，遇到裁剪容器时可设为 `0` | `number \| string` | `-` | 6.4.0 | × |
|
|
282
|
-
| `size` | 流光可见段的尺寸，数字类型按像素处理 | `number \| string` | `100` | 6.5.0 | × |
|
|
283
|
-
|
|
284
|
-
### 基础用法
|
|
176
|
+
### 3. CodeSnippet 极客代码块
|
|
285
177
|
|
|
286
178
|
```tsx
|
|
287
|
-
import {
|
|
288
|
-
|
|
289
|
-
export default function
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
);
|
|
179
|
+
import { CodeSnippet } from 'react-public-components';
|
|
180
|
+
|
|
181
|
+
export default function App() {
|
|
182
|
+
return (
|
|
183
|
+
<CodeSnippet
|
|
184
|
+
language="typescript"
|
|
185
|
+
code={`const greeting: string = "Hello, react-public-components!";\nconsole.log(greeting);`}
|
|
186
|
+
showLineNumbers
|
|
187
|
+
/>
|
|
188
|
+
);
|
|
298
189
|
}
|
|
299
190
|
```
|
|
300
191
|
|
|
301
192
|
---
|
|
302
193
|
|
|
303
|
-
##
|
|
194
|
+
## 🛠️ 本地开发与预览
|
|
304
195
|
|
|
305
|
-
|
|
306
|
-
.
|
|
307
|
-
├── CollapseBox/
|
|
308
|
-
│ ├── index.tsx
|
|
309
|
-
│ └── index.less
|
|
310
|
-
├── Splitter/
|
|
311
|
-
│ └── index.tsx
|
|
312
|
-
├── DisabledBox/
|
|
313
|
-
│ ├── index.tsx
|
|
314
|
-
│ └── index.less
|
|
315
|
-
├── Masonry/
|
|
316
|
-
│ ├── index.tsx
|
|
317
|
-
│ └── index.less
|
|
318
|
-
└── BorderBeam/
|
|
319
|
-
├── index.tsx
|
|
320
|
-
└── index.less
|
|
321
|
-
```
|
|
322
|
-
|
|
323
|
-
---
|
|
324
|
-
|
|
325
|
-
## 七、发布到 npm
|
|
326
|
-
|
|
327
|
-
### 1. 前置准备
|
|
328
|
-
|
|
329
|
-
1. **登录 npm**：确保已注册 npm 账号，并在终端中完成登录：
|
|
330
|
-
|
|
331
|
-
```bash
|
|
332
|
-
npm login --auth-type=web
|
|
333
|
-
```
|
|
334
|
-
|
|
335
|
-
_检查当前登录状态：_
|
|
336
|
-
|
|
337
|
-
```bash
|
|
338
|
-
npm whoami
|
|
339
|
-
```
|
|
340
|
-
|
|
341
|
-
2. **检查镜像源**：发布必须使用 npm 官方镜像源，如果使用了国内镜像源（如淘宝/npmmirror），请切换回官方源：
|
|
342
|
-
```bash
|
|
343
|
-
# 查看当前镜像源
|
|
344
|
-
npm config get registry
|
|
345
|
-
|
|
346
|
-
# 切换为官方源
|
|
347
|
-
npm config set registry https://registry.npmjs.org/
|
|
348
|
-
```
|
|
349
|
-
|
|
350
|
-
### 2. 更新版本号
|
|
351
|
-
|
|
352
|
-
根据 [语义化版本 (SemVer)](https://semver.org/lang/zh-CN/) 规范更新 `package.json` 中的版本号：
|
|
196
|
+
克隆本仓库并在本地启动全功能交互 Demo 预览站点：
|
|
353
197
|
|
|
354
198
|
```bash
|
|
355
|
-
#
|
|
356
|
-
npm
|
|
357
|
-
|
|
358
|
-
# 新功能（Minor）：0.1.1 -> 0.2.0
|
|
359
|
-
npm version minor
|
|
199
|
+
# 安装依赖
|
|
200
|
+
npm install
|
|
360
201
|
|
|
361
|
-
#
|
|
362
|
-
npm
|
|
202
|
+
# 启动本地开发与组件预览站点（基于 Vite）
|
|
203
|
+
npm run dev
|
|
363
204
|
```
|
|
364
205
|
|
|
365
|
-
|
|
206
|
+
浏览器打开 `http://localhost:5173` 即可浏览全部 64 款组件的实时效果、代码与参数调节面板。
|
|
366
207
|
|
|
367
|
-
|
|
208
|
+
---
|
|
209
|
+
|
|
210
|
+
## 📦 发布与构建
|
|
368
211
|
|
|
369
212
|
```bash
|
|
370
|
-
# 1.
|
|
213
|
+
# 1. 构建全量产物（dist/ ESM, CJS, DTS 与 CSS）
|
|
371
214
|
npm run build
|
|
372
215
|
|
|
373
|
-
# 2.
|
|
374
|
-
npm
|
|
216
|
+
# 2. 构建 Demo 预览站点
|
|
217
|
+
npm run build:demo
|
|
375
218
|
|
|
376
|
-
# 3.
|
|
377
|
-
npm publish
|
|
219
|
+
# 3. 发布到 npm
|
|
220
|
+
npm publish --access public
|
|
378
221
|
```
|
|
379
222
|
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
> npm publish --access public
|
|
386
|
-
> ```
|
|
223
|
+
---
|
|
224
|
+
|
|
225
|
+
## 📄 开源许可
|
|
226
|
+
|
|
227
|
+
[MIT License](LICENSE)
|