# @aglyn/shared-ui-next 中文文档

规范地址：https://npmcn.com/package/%40aglyn/shared-ui-next/

版本：1\.19\.0
npm 元数据更新时间：2026-11-07T14:00:57.235Z
中文译文更新时间：2026-11-05T22:37:32.867Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40aglyn/shared-ui-next
原文对照：https://npmcn.com/package/%40aglyn/shared-ui-next/?lang=original
项目主页：https://aglyn.com/
源码仓库：https://github.com/aglyn/aglyn

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

- 包体积（解压后）：119 kB，24 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：6 个
- peer 依赖：next ^16\.3\.3，react ^19\.2\.8，@mui/lab ^9\.0\.0-beta\.8，@mui/material ^9\.3\.1
- 首次发布：2026-09-20T23:54:27.226Z
- 最新版本发布：2026-11-07T14:00:56.865Z
- 近 30 天下载量：11566（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：161（近 12 个月 161 个）

## 中文简介

反应依赖于 Next.js 的组件和钩子: 双柱制表符中枢,其活性制表符活在 URL 中,基于路由的路段铁路, a `next/image` 包装有闪光的占位符和页标题提供者。 Aglyn控制台和控制台的页面

## 安装

```sh
npm install @aglyn/shared-ui-next
```

也可以使用：`pnpm add @aglyn/shared-ui-next`、`yarn add @aglyn/shared-ui-next`、`bun add @aglyn/shared-ui-next`

## README

# @aglyn/ shared- ii- next

反应依赖于 Next.js 的组件和钩子: 双柱制表符中枢,其活性制表符活在 URL 中,基于路由的路段铁路, a `next/image` 包装有闪光的占位符和页标题提供者。 Aglyn控制台和用于插件飞船的控制台页面都是用它建造的. 它假设 App 路由器(`next/navigation`) (中文(简体) ).

> 从Aglyn monorepo出版到npm. 随后的版本 [语义版本](https://semver.org/)。 。 。 .

## 安装

```
npm install @aglyn/shared-ui-next
```

同伴依赖性 : `react`, (中文(简体) ), `next`, (中文(简体) ), `@mui/material` 财务报告和审定财务报表 `@mui/lab` (标签组件使用) `TabContext`, (中文(简体) ), `TabList` 财务报告和审定财务报表 `TabPanel` 从 `@mui/lab`) (中文(简体) ).

## 里面有什么东西

从根入:

-   `HubTabs` ——一通导航卡,左边有垂直标签,右边有活动面板,倒塌为小屏幕上水平标签. 带 `tabs: { id, label, content }[]`,可选 `navHeader`,以及 `lazy` 将安装面板推迟到首次打开。 活动标签被映射到 `?tab=` 查询参数,所以一个标签可以链接到前后并存活下来. 一旦显示, 面板就会挂载 .
-   `HubSections` ——同道道道,按路由选择一段而不用取道板. 带 `sections: { href, label, visible?, locked? }[]` 生成 `children` 铁路旁边 每个区段都应该是自己的代码分割路由时使用. 过 `wide` 对于需要整行的一页,例如宽表或记录的细节:然后将铁道划出上方作为水平条.
-   `useActiveSection(sections)` ——当前路径名所在区域,与最长的路径名相匹配 `href` 前缀在路径分隔边界上,或 `null`一种与铁路一致的面包屑.
-   `Image` —— 说 `next/image` 包裹为情感风格组件,以动画SVG闪光为模糊的占位符. `width` 财务报告和审定财务报表 `height` 默认为100;通过 `disableShimmer` 关闭占位符.
-   `NextPageTitleProvider`, (中文(简体) ), `NextPageTitle`, (中文(简体) ), `useNextPageTitle`, (中文(简体) ), `useNextPageTitleContext` 由各部分组成一个文件标题,并通过 `next/head`。 。 。 .
-   `PageDecorated` 编辑 `NextPageWithLayout` 类型 —— 使页面本身声明的版式内有一个页面.

由子路径:

-   `@aglyn/shared-ui-next/hooks/use-tab-param` —— 说 `useTabParam({ ids, param?, fallback?, onChange? })` 返回时 `{ tab, onTabChange }`,以 URL 为基础的标签状态 `HubTabs` 继续发展. `onTabChange` 是一个物质UI的入站 `TabList`是因为 `onChange`。 。 。 .

## 使用量

```tsx
'use client'

import { HubTabs } from '@aglyn/shared-ui-next'

export function SettingsHub() {
  return (
    <HubTabs
      navHeader="Settings"
      tabs={[
        { id: 'general', label: 'General', content: <p>General settings</p> },
        { id: 'members', label: 'Members', content: <p>Members</p> },
      ]}
    />
  )
}
```

`/settings?tab=members` 打开第二个标签.

## 怎样才合适

A 类 `shared` UI软件包. 这取决于 `@aglyn/shared-ui-jsx`, (中文(简体) ), `@aglyn/shared-ui-theme`, (中文(简体) ), `@aglyn/shared-data-enums`, (中文(简体) ), `@aglyn/shared-util-dom` 财务报告和审定财务报表 `@aglyn/shared-util-tools`;特性插件在它们的控制台页面上依赖于它. 共享软件包是通用的:它们只导入其他共享软件包并持有没有插件的域名.

## 许可证

阿帕奇2.0 (英语). 资料来源: [https://github.com/aglyn/aglyn/tree/main/libs/shared/ui/next 页面存档备份,存于互联网档案馆](https://github.com/aglyn/aglyn/tree/main/libs/shared/ui/next)

## 常见问题

### @aglyn/shared-ui-next 是什么？

反应依赖于 Next\.js 的组件和钩子: 双柱制表符中枢,其活性制表符活在 URL 中,基于路由的路段铁路, a next/image 包装有闪光的占位符和页标题提供者。 Aglyn控制台和控制台的页面

### 如何安装 @aglyn/shared-ui-next？

在项目目录运行 npm install @aglyn/shared-ui-next，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：next（^16\.3\.3）、react（^19\.2\.8）、@mui/lab（^9\.0\.0-beta\.8）、@mui/material（^9\.3\.1）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @aglyn/shared-ui-next 支持 TypeScript 吗？

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

### @aglyn/shared-ui-next 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @aglyn/shared-ui-next 可以商用吗？

@aglyn/shared-ui-next 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @aglyn/shared-ui-next 的下载量有多少？

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

### @aglyn/shared-ui-next 还在维护吗？

最新版本 1\.19\.0 发布于 2026/11/07（今天）；至今共发布 161 个版本，其中过去 12 个月发布了 161 个；首次发布于 2026/09/21。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。