@pnt-team/pnt-component-frontend 0.0.40 → 0.0.41

package/README.md

@@ -24,15 +24,12 @@ yarn add @pnt-team/pnt-component-frontend
 
 ```tsx
 import {
-  // 组件
-  PntCopyData,
+  // L1 基础展示组件
   PntImagePreview,
+  // L2 业务复合组件
   PntSecureBox,
-  // Hooks
-  usePagination,
-  useBtnPermission,
-  useHighSecurity,
-  useOsPlatformList,
+  // L3 布局组件
+  PntGeneralLayout,
 } from '@pnt-team/pnt-component-frontend';
 ```
 
@@ -40,44 +37,6 @@ import {
 
 ### L1 基础展示组件
 
-#### PntCopyData — 数据复制组件
-
-点击触发元素将数据复制到剪贴板，通过 Popup 气泡提示复制结果。优先使用 `navigator.clipboard`，非安全上下文自动降级为 `document.execCommand('copy')`。
-
-**Props：**
-
-| 属性        | 类型                                              | 必填 | 说明                                 |
-| ----------- | ------------------------------------------------- | ---- | ------------------------------------ |
-| `data`      | `string \| (() => Promise<string>)`               | ✅   | 需要复制的数据，支持字符串或异步函数 |
-| `tips`      | `(isCopy: boolean, isFail: boolean) => ReactNode` | ✅   | 提示内容渲染函数                     |
-| `contentFn` | `(props: { onClick, onMouseLeave }) => ReactNode` | ✅   | 触发元素渲染函数                     |
-| `placement` | `PopupPlacement`                                  | ❌   | Popup 弹出位置，默认由 TDesign 决定  |
-| `className` | `string`                                          | ❌   | 自定义类名                           |
-
-**示例：**
-
-```tsx
-// 基础用法
-<PntCopyData
-  data="这是一段需要复制的文本"
-  tips={(isCopy, isFail) => (isFail ? '复制失败' : '复制成功')}
-  contentFn={({ onClick, onMouseLeave }) => (
-    <Button onClick={onClick} onMouseLeave={onMouseLeave}>复制</Button>
-  )}
-/>
-
-// 异步获取数据（如从接口获取密码）
-<PntCopyData
-  data={async () => await fetchSecret()}
-  tips={(isCopy, isFail) => (isFail ? '获取失败' : '已复制到剪贴板')}
-  contentFn={({ onClick, onMouseLeave }) => (
-    <Link onClick={onClick} onMouseLeave={onMouseLeave}>查看密码</Link>
-  )}
-/>
-```
-
----
-
 #### PntImagePreview — 图片预览组件
 
 用于展示上传的图片，支持预览、删除功能和上传状态显示。
@@ -110,7 +69,7 @@ import {
 
 #### PntSecureBox — 高敏信息展示组件
 
-统一处理和展示高敏信息，支持脱敏显示和按需获取真实数据。内部集成 `useHighSecurity` Hook，通过接口解锁敏感数据。
+统一处理和展示高敏信息，支持脱敏显示和按需获取真实数据。通过外部注入 `fetcher` 请求函数解锁敏感数据，零内部依赖。
 
 **Props：**
 
@@ -121,169 +80,91 @@ import {
 | `env`       | `string \| number`                     | ✅   | 环境标识（如 dev / test / production） |
 | `gameId`    | `string \| number`                     | ✅   | 游戏 ID                                |
 | `renderDom` | `(content: string) => React.ReactNode` | ✅   | 自定义渲染函数                         |
+| `fetcher`   | `HighSecurityFetcher`                  | ✅   | 高敏数据请求函数（外部注入）           |
 | `viewText`  | `string`                               | ❌   | 查看按钮文案，默认 `'View'`            |
 | `pageId`    | `string`                               | ❌   | 页面 ID（用于操作日志和权限验证）      |
 
 **示例：**
 
 ```tsx
+import http from '@/utils/request';
+import { PntSecureBox } from '@pnt-team/pnt-component-frontend';
+
 <PntSecureBox
   dataKey="userPhone"
   dataValue="138****8888"
   env="production"
   gameId={12345}
+  fetcher={(params) =>
+    http
+      .post('/api/v3/business/game_info/high-security-decrypt', params)
+      .then((r) => r.data)
+  }
   renderDom={(content) => <span>{content}</span>}
   viewText="查看"
-/>
-```
-
----
-
-### L3 业务 Hooks
-
-#### usePagination — 分页 Hook
-
-维护分页状态，页码/每页条数变化时通过回调通知外部发起请求。`totalCount` 为 0 时返回 `undefined`，可直接条件渲染 `<Pagination>`。
-
-**参数：**
-
-| 参数                  | 类型                                         | 说明                                   |
-| --------------------- | -------------------------------------------- | -------------------------------------- |
-| `onPaginationRequest` | `(params: { pageNumber, pageSize }) => void` | 分页变化时的回调，外部在此发起列表请求 |
-
-**返回值：**
-
-| 返回值              | 类型                                               | 说明                                               |
-| ------------------- | -------------------------------------------------- | -------------------------------------------------- |
-| `paginationData`    | `{ currentPage, totalCount, totalPage, pageSize }` | 当前分页数据                                       |
-| `setPaginationData` | `(data: PaginationData) => void`                   | 回写分页数据（通常由外部请求完成后调用）           |
-| `paginationProps`   | `PaginationProps \| undefined`                     | 可直接展开到 `<Pagination {...paginationProps} />` |
-
-**示例：**
-
-```tsx
-const Demo = () => {
-  const [list, setList] = useState([]);
-  const { paginationData, setPaginationData, paginationProps } = usePagination(
-    async ({ pageNumber, pageSize }) => {
-      const res = await fetchList({ page: pageNumber, size: pageSize });
-      setList(res.data.list);
-      setPaginationData((prev) => ({
-        ...prev,
-        currentPage: pageNumber,
-        pageSize,
-        totalCount: res.data.total,
-        totalPage: Math.ceil(res.data.total / pageSize),
-      }));
-    },
-  );
-
-  return (
-    <>
-      <Table data={list} />
-      {paginationProps && <Pagination {...paginationProps} />}
-    </>
-  );
-};
-```
-
----
-
-#### useBtnPermission — 按钮权限 Hook
-
-获取按钮权限处理方式，支持演示游戏判定和无权限兜底配置。零业务侵入：权限列表与演示游戏信息均通过入参注入。
-
-**参数：**
-
-| 参数          | 类型                                     | 说明                                                |
-| ------------- | ---------------------------------------- | --------------------------------------------------- |
-| `permissions` | `BtnPermissionMap`                       | 按钮权限映射 `{ [type]: { [key]: 1 \| -1 \| -2 } }` |
-| `demoGame`    | `{ id: number \| string; name: string }` | 演示游戏信息                                        |
-| `serviceInfo` | `{ serviceType?, serviceName? }`         | 当前服务信息                                        |
-
-**返回值：**
-
-| 返回值             | 类型                                          | 说明                                         |
-| ------------------ | --------------------------------------------- | -------------------------------------------- |
-| `btnPermission`    | `BtnPermissionMap`                            | 权限映射原文                                 |
-| `isDemoGame`       | `boolean`                                     | 是否为演示游戏                               |
-| `getBtnPermission` | `(type, key, defaultValue?) => 1 \| -1 \| -2` | 获取按钮权限（1 有权限 / -1 隐藏 / -2 禁用） |
-
-**示例：**
-
-```tsx
-const Demo = ({ btnPermission, userInfo }) => {
-  const { isDemoGame, getBtnPermission } = useBtnPermission({
-    permissions: btnPermission,
-    demoGame: userInfo?.demoGame,
-    serviceInfo: {
-      serviceType: userInfo?.serviceType,
-      serviceName: userInfo?.serviceName,
-    },
-  });
-
-  const createPerm = getBtnPermission('global', 'create');
-  if (createPerm === -1) return null; // 隐藏
-  return (
-    <Button disabled={createPerm === -2}>
-      新建{isDemoGame ? '（演示）' : ''}
-    </Button>
-  );
-};
+/>;
 ```
 
 ---
 
-#### useHighSecurity — 高敏数据解锁 Hook
-
-管理高敏数据的解锁状态，通过接口请求获取真实数据。配合 `PntSecureBox` 组件使用。
-
-**返回值：**
-
-| 返回值                | 类型                               | 说明                                    |
-| --------------------- | ---------------------------------- | --------------------------------------- |
-| `securityData`        | `object`                           | 已解锁的高敏数据映射 `{ [key]: value }` |
-| `setSecurityData`     | `(data: object) => void`           | 手动设置已解锁数据                      |
-| `requestSecurityData` | `({ gameId, param, env }) => void` | 请求解锁指定高敏数据                    |
-
----
-
-#### useOsPlatformList — OS/平台列表 Hook
+### L3 布局组件
 
-拉取 OS 与平台枚举数据并做模块级缓存，整个会话只请求一次，并发调用共享同一请求。
+#### PntGeneralLayout — 通用页面布局组件
 
-**参数：**
+提供标准的「头部 + 子头部 + 内容区 + 底部」页面布局结构，基于 TDesign Layout 封装，适用于后台管理系统的详情页、表单页等场景。
 
-| 参数      | 类型                                 | 说明                                         |
-| --------- | ------------------------------------ | -------------------------------------------- |
-| `fetcher` | `() => Promise<{ code, msg, data }>` | 自定义请求函数（不传则使用内置默认 fetcher） |
-
-**返回值：**
+**Props：**
 
-| 返回值           | 类型                                                                | 说明        |
-| ---------------- | ------------------------------------------------------------------- | ----------- |
-| `osPlatformList` | `{ os_list: OsItem[]; platform_list: PlatformItem[] } \| undefined` | OS/平台数据 |
+| 属性                | 类型                  | 必填 | 默认值 | 说明                                 |
+| ------------------- | --------------------- | ---- | ------ | ------------------------------------ |
+| `className`         | `string`              | ❌   | -      | 自定义类名                           |
+| `headerTitle`       | `ReactNode`           | ❌   | -      | 头部标题内容，传入后渲染 Header 区域 |
+| `showBackButton`    | `boolean`             | ❌   | false  | 是否显示返回按钮                     |
+| `onBackButtonClick` | `() => void`          | ❌   | -      | 返回按钮点击回调                     |
+| `subHeaderContent`  | `ReactNode`           | ❌   | -      | 子头部内容，位于 Header 下方         |
+| `operation`         | `ReactNode`           | ❌   | -      | 头部右侧操作区，常用于放置按钮组     |
+| `bodyRef`           | `Ref<HTMLDivElement>` | ❌   | -      | 内容区 ref 引用                      |
+| `bodyStyle`         | `CSSProperties`       | ❌   | -      | 内容区自定义样式                     |
+| `footer`            | `ReactNode`           | ❌   | -      | 底部内容，传入后渲染 Footer 区域     |
+| `children`          | `ReactNode`           | ❌   | -      | 页面主体内容                         |
 
 **示例：**
 
 ```tsx
-// 使用默认 fetcher
-const { osPlatformList } = useOsPlatformList();
-
-// 注入自定义 fetcher
-const { osPlatformList } = useOsPlatformList(() => http.get('/my/os/platform'));
-
-// 渲染下拉选项
-<Select
-  options={osPlatformList?.platform_list.map((p) => ({
-    label: p.platform_name_zh,
-    value: p.id,
-  }))}
-/>;
+// 基础用法：仅内容区
+<PntGeneralLayout>
+  <div>页面内容</div>
+</PntGeneralLayout>
+
+// 带标题和操作按钮
+<PntGeneralLayout
+  headerTitle="业务配置"
+  operation={
+    <Space>
+      <Button theme="primary">保存</Button>
+      <Button variant="outline">取消</Button>
+    </Space>
+  }
+>
+  <Form />
+</PntGeneralLayout>
+
+// 带返回按钮和底部操作栏
+<PntGeneralLayout
+  headerTitle="详情页"
+  showBackButton
+  onBackButtonClick={() => history.back()}
+  footer={
+    <Space>
+      <Button theme="primary">提交</Button>
+      <Button variant="outline">重置</Button>
+    </Space>
+  }
+>
+  <Detail />
+</PntGeneralLayout>
 ```
 
-> 💡 如需强制刷新缓存，可调用 `clearOsPlatformListCache()` 清除全部缓存，或传入指定 fetcher 清除对应缓存。
-
 ---
 
 ## 本地开发
@@ -304,7 +185,13 @@ yarn build
 yarn test
 ```
 
-> 📝 本地开发涉及接口调试时，需手动更新 `src/configs/token.ts` 中的 token 值。
+## 发布流程
+
+1. 推送代码到 `master` 分支
+2. 触发 Coding 自动构建流程
+3. 自动发布到 npm 制品库：[点击查看](https://ptc.coding.intlgame.com/p/player-network/artifacts/158595/npm/packages)
+4. 自动发布组件文档到测试机
+5. 组件文档预览：http://component.pnt-dev.intlgame.com/
 
 ## 技术栈
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pnt-team/pnt-component-frontend",
-  "version": "0.0.40",
+  "version": "0.0.41",
   "description": "A react library developed with dumi",
   "license": "MIT",
   "exports": {