# @ethisyscore/plugin-ui 中文文档

规范地址：https://npmcn.com/package/%40ethisyscore/plugin-ui/

版本：1\.167\.0
npm 元数据更新时间：2026-10-25T16:31:58.399Z
中文译文更新时间：2026-11-13T23:47:35.497Z
软件包许可：SEE LICENSE IN LICENSE

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40ethisyscore/plugin-ui
原文对照：https://npmcn.com/package/%40ethisyscore/plugin-ui/?lang=original

弃用说明：This package has moved to the Ethisys Core package feed\. In Ethisys Core, open the Developers page and follow the setup steps \(cc login connects npm to the feed\)\.

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：6.7 MB，112 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=20
- 运行依赖：11 个
- peer 依赖：dayjs \>=1\.11，react \>=18，@mui/material \>=7，@mui/x-data-grid \>=7，react-router-dom \>=6，@mui/x-date-pickers \>=7，@tanstack/react-query \>=5
- 首次发布：2026-06-10T17:37:35.832Z
- 最新版本发布：2026-10-24T20:27:19.708Z
- 近 30 天下载量：8212（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：232（近 12 个月 232 个）

## 中文简介

插件-UI 雨伞 SDK:客户端桥+a11y/l10n原始人+经纪-MCP客户端(WI 4858).

## 安装

```sh
npm install @ethisyscore/plugin-ui
```

也可以使用：`pnpm add @ethisyscore/plugin-ui`、`yarn add @ethisyscore/plugin-ui`、`bun add @ethisyscore/plugin-ui`

## README

# @ethisyscore/plugin-ui (英语)

EthysCore插件的平台反应前端基础. 它给出了插件 将单片反应特性提升到插件表面所需的一切: 页 并覆盖工厂,一个静态 `useView` 适配器,一种 MCP-over-hoks 服务 层, 反应- 平滑 / 反应- router shims, 范围化样式, 相邻图标集, 和共享的 MUI 组件表面外接到主机实例.

> **MUI 7或更新.** 可选 `@mui/material` 端点是 `>=7`,匹配主机和沙盒主题工具包(它使用MUI 7-只使用API).

> 平台反应是高信任级(RFC0003),仅限于 第一当事方 `PlatformPlugin` 建设。 见上层 [渲染模式概览](https://npmcn.com/package/README.md#render-modes--three-ui-contracts) 编辑 [平台反应作者指南](https://npmcn.com/package/docs/authoring/platform-react.md)。 。 。 .

## 导出表面

| 子路径 | 主要出口 | 目的 |
| --- | --- | --- |
| `.` | `createPortBridgeClient`, (中文(简体) ), `BridgeClientContext` 编号 : `useBridgeClient`, (中文(简体) ), `useBridgeTheme` 编号 : `useBridgeLocale`, (中文(简体) ), `ExtensionRuntimeProvider`, (中文(简体) ), `useMcpResource` 编号 : `useMcpTool` 编号 : `useMcpQuery` 编号 : `unwrapItems`, (中文(简体) ), `useHostIdentity` 编号 : `useCurrentUser`, (中文(简体) ), `definePlatformReactPage` 编号 : `emitNavigation` 编号 : `PlatformReactPageProps` | Bridge 客户端 + 主题/ 本地语境, 中介- MCP 数据钩, 主机身份, 以及基础平台反应页面合同 |
| `./platform-react` | `definePlatformReactPluginPage` 编号 : `createPluginPageDefiner`, (中文(简体) ), `definePlatformReactPluginOverlay` 编号 : `useOverlayHost`, (中文(简体) ), `useView` 编号 : `createUseView` 编号 : `ViewComponent` 编号 : `isComponent`, (中文(简体) ), `BaseMcpService` 编号 : `useToolInvoker` 编号 : `useToolInvokerMap`, (中文(简体) ), `useAuthenticatedQuery` 编号 : `useAuthenticatedQueries`, (中文(简体) ), `injectPluginStyles` 编号 : `PluginStyleScope`, (中文(简体) ), `createReactRouterShim`, (中文(简体) ), `usePluginRealtime`, (中文(简体) ), `useBackgroundOperation` 编号 : `useOperationsByParent` 编号 : `useLatestTerminalOperationByParent` 编号 : `hasKind`, (中文(简体) ), `useUploadToStorage` 编号 : `PluginStorageUploadError` 编号 : `isPluginStorageUploadError` 编号 : `validatePluginStoragePrefix`, (中文(简体) ), `useMcpUpload` (遗留CORE储存), `useManagedLifecycle` | 插件编写层: 页面/覆盖包 (反应- query + 显示 + 样式根), 静态 `useView` 适配器模式, MCP 服务基础 + 工具引用器, 预认证反应- query 包装器, 范围化式注入, 路由器shim, 实时, 遵循插件本身的背景操作, 文件上传 |
| `./icons` | `NextureIcons`, (中文(简体) ), `IconMap`,470+ (单位:千美元) `Ni*` 图标组件, `sizeHelper` 编号 : `strokeSizeHelper`, (中文(简体) ), `IconName` 编号 : `IconSize` 编号 : `IconVariant` | Gogo-ui “nexture” SVG 图标集,包含道具类型和大小/中程帮助器 |
| `./components/ui` | `Button`, (中文(简体) ), `Card`, (中文(简体) ), `Dialog`, (中文(简体) ), `Table`, (中文(简体) ), `TextField`, (中文(简体) ), `Select`, (中文(简体) ), `Tabs`, (中文(简体) ), `Typography`, (中文(简体) ), `Grid`, (中文(简体) ), `Stack`, (中文(简体) ), `Menu`, (中文(简体) ), `DebouncedSearchInput`, (中文(简体) ), `cn`, (中文(简体) ), `useDebounce`,, , , , , , , , | MUI组件再出口 + Dialog 滚动锁包装器, `cn` 财务报告和审定财务报表 `useDebounce` (所有三个来自 `@ethisyscore/foundation-ui`)和被解除的搜索场. 这些是 **主机外部设备** ——从不捆绑;生产建设将它们与宿主的MUI实例捆绑在一起 |
| `./components/layout` | `PageHeader` 编号 : `usePageHeader` 编号 : `withPageHeader`, (中文(简体) ), `FillGrid` 编号 : `FillGridItem` 编号 : `FillGap` 编号 : `FillSpan`边栏行动上下文(`SidebarActionProvider`, (中文(简体) ), `useSidebarAction` 编号 : `useSidebarActions` 编号 : `useTriggerSidebarAction`, (中文(简体) ), `RouteMeta` 编号 : `RouteMetaEntry`; 页眉动作选择 `attributes` 包,仅限 `data-*` (例如:. `onboardingTarget("x")`(中文(简体) ) | 原始版式(从 `@ethisyscore/foundation-ui`),页面标题层+面包屑构建器,以及侧边栏-动作上下文/提供器 |
| `./components/shared` | `ConfirmActionDialog`, (中文(简体) ), `ConfirmDeleteDialog`, (中文(简体) ), `useConfirmDialog` 编号 : `useTargetDialog` 编号 : `useReasonDialog` (从) `@ethisyscore/foundation-ui`, (中文(简体) ), `useToast`, (中文(简体) ), `showSuccessToast` 编号 : `showErrorToast` 编号 : `showWarningToast` | 综合确认对话和土司通知 |
| `./components/data-grid` | `PersistentDataGrid` (带有打字符) `toolbar` 编号 : `toolbarProps`, (中文(简体) ), `setGridUserId` 编号 : `getGridUserId`, (中文(简体) ), `buildDataGridPaginationProps`, (中文(简体) ), `buildDataGridSlots`, (中文(简体) ), `DataGridPaginationFullPage`, (中文(简体) ), `usePaginationSlot`,网格状态持续帮助 | 共享列表页面网格, 包含每个用户状态的持久性, 房屋插位设置和页形插位 。 需要一个 **选项对等点** `@mui/x-data-grid` |
| `./components/date` | `DateInput` 编号 : `DateInputProps`, (中文(简体) ), `toIsoString` 编号 : `parseIsoValue`, (中文(简体) ), `DATE_INPUT_MIN` 编号 : `DATE_INPUT_MAX`, (中文(简体) ), `DateInputType` | 共享日期 / 日期时间字段通过 MUI X pickers, 说出 ISO 字符串 。 需要一个 **选项同伴** `@mui/x-date-pickers` 财务报告和审定财务报表 `dayjs` |
| `./components/connectors` | `ConnectorMappingView`, (中文(简体) ), `MappingCompletenessBanner`, (中文(简体) ), `ConnectorMappingTranslationEditorView`, (中文(简体) ), `selectRequiredIncompleteOperations` 编号 : `selectOptionalIncompleteOperations` 编号 : `selectIncompleteOperations` 编号 : `selectMappingReadiness`, (中文(简体) ), `connectorMappingsQueryKey` 编号 : `connectorMappingCompletenessQueryKey`, (中文(简体) ), `MappingCompletenessItem` 编号 : `MappingCompletenessResult`, (中文(简体) ), `ConnectorCanonicalField` 编号 : `TestToolMappingRequest` 编号 : `TestToolMappingResult` 编号 : `ConnectorMappingSuggestionResult` | 共享工具映射表面的介绍半,用于任何通过连接器——映射表,完整性横幅和每个映射场-翻译编辑器——到达外部系统的模块. 需要一个 **选项对等点** `@mui/material`. Carrys 4 修补一个副本丢失: 横幅上说 FIELDS 而不是工具, 完整性查询密钥被嵌入到映射密钥下, 所以一个无效化覆盖了两者, 编辑器的“ 测试映射” 按钮被打开 `onTestMapping` (一个挂起的复制件使一个呼叫器的接线器的死控器只能自动配置) `?? []` 在两条条条形字段列表上的可容忍性,视图中未设定的警告没有锁定 `aiAvailable` (只有关键词的自动匹配总是报告不实,这使得一个警告操作员必须针对无法到达的行为采取行动) |
| `./connector-mappings` | `ConnectorMappingService` 编号 : `CONNECTOR_MAPPING_TOOLS`, (中文(简体) ), `useConnectorToolMappings`, (中文(简体) ), `useConnectorMappings` 编号 : `useConnectorMappingCompleteness`, (中文(简体) ), `useConnectorMappingMutations`, (中文(简体) ), `useMappingTranslationEditor`, (中文(简体) ), `useAutoMatchOnConnectorSwitch`, (中文(简体) ), `useMappingBannerDismissal`, (中文(简体) ), `useSuggestMappingTranslation` 编号 : `useTestMapping`, (中文(简体) ), `mapConnectorsToOptions` 编号 : `mapConnectorToolsToOptions`, (中文(简体) ), `ConnectorMappingItem` 编号 : `AutoMatchResponse` 编号 : `ConnectorMappingWriteArgs` | 同一地表的DATA半个: `connectors:mappings:*` MCP服务加每个反应-平滑钩,一个工具映射页面需要,由 `useConnectorToolMappings` 装入三个道具包,组件取入。 需要一个 **选项对等点** `@tanstack/react-query`,没有其他的——身份,路由,连接器计数和选择全部被注入. 从三个插件中升级,它们之间有~3,300的重复线条,每次重播时必须修补相同的两个生产缺陷;见 [文件/采用-共用工具绘图](https://npmcn.com/package/%40ethisyscore/plugin-ui/docs/adopting-shared-tool-mappings.md) |
| `./org-format` | `formatDate` 编号 : `formatDateTime` 编号 : `formatTime` 编号 : `formatDateOrPresent` 编号 : `formatRelativeTime`, (中文(简体) ), `getOrgDateInputFormat` 编号 : `getOrgDateTimeInputFormat`, (中文(简体) ), `formatMoney` 编号 : `formatCompactMoney` 编号 : `getCurrencySymbol`, (中文(简体) ), `setOrgFormats` 编号 : `getOrgDateFormat` 编号 : `getOrgTimeFormat` 编号 : `resolveOrgDateFormat` 编号 : `resolveOrgTimeFormat`, (中文(简体) ), `setOrgReportingCurrency` 编号 : `getOrgReportingCurrency` 编号 : `resolveOrgReportingCurrencyCode`, (中文(简体) ), `ORG_DATE_FALLBACK_FORMAT` 编号 : `ORG_TIME_FALLBACK_FORMAT` 编号 : `MONEY_FALLBACK_CURRENCY` | 本组织的日期/时间格式和报告货币 `useOrgFormatSync` 编号 : `useReportingCurrencySync`,以及阅读这些文本的无参数格式化工具(联合王国) `dd/MM/yyyy`, (中文(简体) ), `HH:mm`, (中文(简体) ), `GBP` 当无物被封印的时候。 钱是用GB做的 `symbol` 显示,因此,USD、CAD和AUD读作"US$"、"CA$"和"A$",而不是一个赤裸的"$"(Foundation-utils的自有货币格式化器仍然使用) `narrowSymbol`) (中文(简体) ). 纯日期格式化生活在 `@ethisyscore/foundation-utils`; 插件- ui 通过其包指定符导入此条目, 这样整个捆绑共享一个状态副本 |
| `./a11y` | `useA11yAnnounce` | 无障碍直播区域公告钩 |
| `./l10n` | `usePluginLocale` 编号 : `PluginLocale` | 语言+方向/RTL 帮助器 |
| `./token` | `useFrontendSessionToken`, (中文(简体) ), `useAuth`, (中文(简体) ), `decodeJwtPayload` | 前端会话符号 + JWT 认证工具 |
| `./tailwind-preset` | `ehxTailwindPreset` | 带有gogo-ui主题尺度(屏幕、字体、大小、颜色、阴影)的尾风预设 |
| `./plugin-base.css` | (中央支助系统资产) | 插件表面的静态基底样式表 |

## 典型用途

```tsx
// A PlatformReact page module the host dynamic-imports at surface mount.
import { definePlatformReactPluginPage } from "@ethisyscore/plugin-ui/platform-react";
import { useView } from "@ethisyscore/plugin-ui/platform-react";

function MyFeaturePage() {
  const View = useView("my-feature/list");
  return <View />;
}

export default definePlatformReactPluginPage(MyFeaturePage);
```

帮手们做的 **没有** 直接调用 MCP 工具—— 将每个被调用者域包入一个已键入 服务扩展 `BaseMcpService` 并消耗它通过 `useToolInvoker`。见 最高层的 README §“服务于 MCP”和 [FE 移民游戏本](https://npmcn.com/package/docs/app-migration/fe-migration-playbook.md)。 。 。 .

### 正在上传浏览器文件

浏览器上传 `useUploadToStorage` 输入应用程序自己的插件存储。 Never base 64 通过工具调用文件 .

```tsx
import { useUploadToStorage, isPluginStorageUploadError } from "@ethisyscore/plugin-ui/platform-react";

const { upload, loading, error } = useUploadToStorage();

async function onFile(file: File) {
  try {
    const { path } = await upload(file, { pathPrefix: "cvs" });
    await recordCv({ path }); // the app's own command; the backend reads `path` via IPluginStorage
  } catch (err) {
    if (isPluginStorageUploadError(err) && err.reason === "quota_exceeded") { /* ... */ }
  }
}
```

前缀为一个或多个 `/`\- 分开 `[A-Za-z0-9_-]` 片段,最多84个字符,没有前行或后行 `/`它被拒绝,从未修复。 文件上限为 30 MB, 只允许列出被动类型( M)`PLUGIN_STORAGE_UPLOAD_CONTENT_TYPES`页:1 见 [能力.md](https://npmcn.com/package/CAPABILITIES.md#browser-file-uploads) 完全规则和错误的原因.

## 构建和测试

```bash
npm ci && npm run build && npm test
```

> 最后更新:2026-07-10

## 常见问题

### @ethisyscore/plugin-ui 是什么？

插件-UI 雨伞 SDK:客户端桥\+a11y/l10n原始人\+经纪-MCP客户端\(WI 4858\)\.注意：该包已被作者标记为弃用——This package has moved to the Ethisys Core package feed\. In Ethisys Core, open the Developers page and follow the setup steps \(cc login connects npm to the feed\)\.

### 如何安装 @ethisyscore/plugin-ui？

在项目目录运行 npm install @ethisyscore/plugin-ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @ethisyscore/plugin-ui 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @ethisyscore/plugin-ui 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @ethisyscore/plugin-ui 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @ethisyscore/plugin-ui 可以商用吗？

@ethisyscore/plugin-ui 使用 SEE LICENSE IN LICENSE 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。

### @ethisyscore/plugin-ui 的下载量有多少？

根据 npm 官方下载统计，@ethisyscore/plugin-ui 在 2026/10/14 – 2026/11/12 这 30 天内被下载 8,212 次，日均约 274 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @ethisyscore/plugin-ui 还在维护吗？

最新版本 1\.167\.0 发布于 2026/10/25（20 天前）；至今共发布 232 个版本，其中过去 12 个月发布了 232 个；首次发布于 2026/06/11。作者已将其标记为弃用，新项目建议寻找替代方案。