react-public-components 1.2.0 → 1.2.1

package/README.md

@@ -3,13 +3,13 @@
 [![npm version](https://img.shields.io/npm/v/react-public-components.svg)](https://www.npmjs.com/package/react-public-components)
 [![license](https://img.shields.io/npm/l/react-public-components.svg)](https://github.com/xhua007/react-public-components)
 
-📦 **企业级现代 React 通用核心组件库**。零沉重 UI 库绑定，开箱即用，提供 64 款真正高频、极客质感的中后台与现代 Web 应用组件。
+📦 **企业级现代 React 通用核心组件库**。零沉重 UI 库绑定，开箱即用，提供 61 款真正高频、极客质感的中后台与现代 Web 应用组件。
 
 ---
 
 ## 🌟 特性亮点
 
-- 💎 **精炼通用**：涵盖中后台与 SaaS 产品的通用、布局导航、数据录入、数据展示、反馈 5 大类别共 64 款高频组件。
+- 💎 **精炼通用**：涵盖中后台与 SaaS 产品的通用、布局导航、数据录入、数据展示、反馈 5 大类别共 61 款高频组件。
 - ⚡ **轻量零依赖**：不强制依赖 Ant Design 等庞大第三方 UI 库，体积小巧，按需引入。
 - 🛡️ **工业级防御**：核心安全组件（如 `Watermark`）采用原生 DOM 脱离 VDOM 注入防篡改架构，支持毫秒自愈与防审查元素删除。
 - 🎨 **极客质感**：现代设计语言，自带平滑微动效、毛玻璃（Glassmorphism）、硬件加速流光与暗色模式适配。
@@ -35,20 +35,19 @@ import 'react-public-components/styles.css';
 
 ---
 
-## 🧩 组件全览（64 款核心高频组件）
+## 🧩 组件全览（61 款核心高频组件）
 
-### 1. 通用 General (9 款)
+### 1. 通用 General (8 款)
 | 组件名 | 中文名称 | 特性与场景说明 |
 | :--- | :--- | :--- |
-| **`CodeSnippet`** | 极客代码块 | Mac 终端风格代码块卡片，带红黄绿圆点、语言标签与一键平滑复制。 |
-| **`Watermark`** | 防篡改水印 | 动态防截屏安全水印，基于原生 DOM 独立注入与 ComputedStyle 校验，毫秒自愈防 F12 审查元素删除/隐藏。 |
-| **`QrCodeCard`** | 二维码卡片 | 多功能扫码登录/支付卡片，支持 Logo 嵌入、失效过期遮罩、高清下载与精致 Loading。 |
-| **`GuidedTour`** | 漫游引导 | 新手引导步进器，带智能镂空高亮遮罩、步骤弹窗与状态持久化。 |
+| **`CodeSnippet`** | 代码预览块 | 极客代码展示块，支持暗色主题、一键复制与多行展开收起。 |
+| **`Watermark`** | 安全水印 | DOM 防篡改盲水印，脱离 VDOM 具备毫秒级自愈与防审查元素删除能力。 |
+| **`QrCodeCard`** | 二维码卡片 | 优雅企业级二维码展示卡片，支持 Logo 嵌入、状态覆盖（加载/过期刷新）与一键下载。 |
+| **`GuidedTour`** | 新手引导 | 新手引导步进器，带智能镂空高亮遮罩、步骤弹窗与状态持久化。 |
 | **`FilePreviewer`** | 文件预览 | 多格式文件与媒体统一弹窗预览器，支持图片、音视频、PDF、代码与一键下载。 |
-| **`FloatingActionBar`** | 悬浮操作栏 | 表格与列表多选时从屏幕底部浮出的毛玻璃操作栏，内置统计与批量动作。 |
 | **`Fullscreen`** | 全屏容器 | 支持局部元素原生全屏与网页内最大化置顶切换，支持快捷悬浮按钮与 Render Props。 |
-| **`CopyButton`** | 复制按钮 | 提供点击复制到剪贴板功能，支持纯图标、带文字按钮与内联文本，内置 Tooltip 动效。 |
-| **`ContextMenu`** | 右键菜单 | 为任意区域或列表行提供右键上下文菜单，支持视口防溢出翻转、二级子菜单与快捷键。 |
+| **`CopyButton`** | 复制按钮 | 增强型剪贴板复制组件，支持 Tooltip 状态反馈、输入框后缀吸附与异步文本。 |
+| **`ContextMenu`** | 右键快捷菜单 | 自定义右键上下文菜单，支持多级嵌套、分割线、禁用态与快捷键提示。 |
 
 ---
 
@@ -67,7 +66,7 @@ import 'react-public-components/styles.css';
 
 ---
 
-### 3. 数据录入 Data Entry (16 款)
+### 3. 数据录入 Data Entry (15 款)
 | 组件名 | 中文名称 | 特性与场景说明 |
 | :--- | :--- | :--- |
 | **`DualRangeSlider`** | 双滑块区间选择器 | 双向双滑块区间选择器，支持数值/价格跨度筛选与防交叉穿透。 |
@@ -75,7 +74,6 @@ import 'react-public-components/styles.css';
 | **`FileDropZone`** | 拖拽上传容器 | 现代极客拖拽上传虚线容器，支持流光呼吸高亮与剪贴板截图粘贴。 |
 | **`TreeTransfer`** | 树形穿梭框 | 树形层级穿梭框，左侧目录树级联勾选与右侧平铺已选列表。 |
 | **`NumberStepper`** | 平滑数字步进器 | 长按连续加减数字步进器，支持步长控制与上下限保护。 |
-| **`CountdownButton`** | 验证码倒计时按钮 | 短信验证码 60s 倒计时按钮，支持异步前置检查与防刷锁定。 |
 | **`KeyValEditor`** | 键值对编辑器 | 动态增删 API Headers 与环境变量配置项，支持密码掩码与单行禁用。 |
 | **`QuickDateRange`** | 快捷日期筛选 | 今日/近7天/本月等预设日期胶囊标签与自定义日期范围双向联动。 |
 | **`TreeFilterPanel`** | 树形平铺筛选 | 多级分类平铺联动筛选器，支持多选、快捷全部、分类汇总与一键清空。 |
@@ -89,7 +87,7 @@ import 'react-public-components/styles.css';
 
 ---
 
-### 4. 数据展示 Display (27 款)
+### 4. 数据展示 Display (26 款)
 | 组件名 | 中文名称 | 特性与场景说明 |
 | :--- | :--- | :--- |
 | **`JsonDiffViewer`** | JSON 差异比对器 | JSON 结构体增删改差异彩色高亮探查，支持新旧值对照。 |
@@ -98,7 +96,6 @@ import 'react-public-components/styles.css';
 | **`SegmentedProgress`** | 分段多色进度条 | 单条轨道并列展示多色分段比例，支持存储空间占比与图例。 |
 | **`TrendIndicator`** | KPI 趋势升降胶囊 | 微型 KPI 指标变动升降胶囊，自动根据正负值判断涨跌并支持红绿反转。 |
 | **`PhotoViewer`** | 相册画廊查看器 | 全功能多图画廊查看器，支持左右键盘按键切图与缩略图底栏联动。 |
-| **`DiffTable`** | 两期差异对比表格 | 两期数据差异对比表格，自动计算增减差值与百分比红绿高亮。 |
 | **`StatusTimeline`** | 审批流时间轴 | 高级审批流与动态耗时时间轴，包含节点状态徽标、经办人与流转耗时。 |
 | **`GradientText`** | 流光渐变文字 | 现代 SaaS 霓虹横向流光渐变文字，支持背景平滑滚动动画。 |
 | **`VideoPlayer`** | 视频播放器 | 轻量现代化视频播放器，暗黑毛玻璃控制条、快进快退 10s、0.75x~2.0x 倍速与画中画。 |
@@ -203,21 +200,60 @@ npm install
 npm run dev
 ```
 
-浏览器打开 `http://localhost:5173` 即可浏览全部 64 款组件的实时效果、代码与参数调节面板。
+浏览器打开 `http://localhost:5173` 即可浏览全部 61 款组件的实时效果、代码与参数调节面板。
 
 ---
 
-## 📦 发布与构建
+## 📦 标准化发布流程 (Release Workflow)
 
+本项目已配置 `"prepublishOnly": "npm run build"` 自动化钩子，每次执行 `npm publish` 时会自动先执行全量类型与产物打包构建。
+
+### 1. 前置准备与环境检查
+```bash
+# 检查当前 npm 源是否为官方镜像源（若不是需切换）
+npm config get registry
+# 切换为 npm 官方源（发布必须使用官方源）
+npm config set registry https://registry.npmjs.org/
+
+# 登录 npm 账号（会自动唤起网页完成 2FA / Web 授权）
+npm login --auth-type=web
+```
+
+### 2. 更新版本号 (遵循 SemVer 规范)
+```bash
+# 小修复与优化（Patch）：1.2.0 -> 1.2.1
+npm version patch
+
+# 新功能与组件迭代（Minor）：1.2.0 -> 1.3.0
+npm version minor
+
+# 架构破坏性更新（Major）：1.2.0 -> 2.0.0
+npm version major
+```
+
+### 3. 构建与本地验证
 ```bash
-# 1. 构建全量产物（dist/ ESM, CJS, DTS 与 CSS）
+# 验证组件库核心打包（生成 dist/ 产物）
 npm run build
 
-# 2. 构建 Demo 预览站点
+# 验证 Demo 演示站编译
 npm run build:demo
+```
+
+### 4. 提交代码与推送到 GitHub
+```bash
+git add .
+git commit -m "chore(release): bump version to x.x.x"
+git push
+```
 
-# 3. 发布到 npm
+### 5. 正式发布到 npm
+```bash
+# 执行发布（自动触发 prepublishOnly 构建）
 npm publish --access public
+
+# 验证发布状态
+npm view react-public-components version
 ```
 
 ---