# @frigear-nu/ui 中文文档

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

版本：0\.2\.6
npm 元数据更新时间：2026-11-12T02:39:29.369Z
中文译文更新时间：2026-11-15T14:19:22.845Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40frigear-nu/ui
原文对照：https://npmcn.com/package/%40frigear-nu/ui/?lang=original
项目主页：https://docs.frigear.dev/modules/interface/ui
源码仓库：https://github.com/Frigear-nu/frigear-nu

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

- 包体积（解压后）：168 kB，140 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：4 个
- peer 依赖：vue 3\.x，nuxt ^4\.6\.4，@nuxt/ui ^4\.12\.0，monaco-editor ^0\.57\.0，nuxt-monaco-editor ^1\.4\.1
- 首次发布：2026-10-11T00:10:29.708Z
- 最新版本发布：2026-11-12T02:39:28.979Z
- 近 30 天下载量：4166（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：20（近 12 个月 20 个）

## 中文简介

用于Frigiar Nuxt应用的共享UI组件和可堆积物,建于Nuxt UI上.

## 安装

```sh
npm install @frigear-nu/ui
```

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

## README

# @frigear-nu/ ui (英语)

Frigiar Nuxt应用软件的共享UI组件,可堆肥和辅助器,以Nuxt UI为基础. 登记 全球组件(无前缀)和自动进口其可堆肥和辅助器。 它带来规律,而不是一个主题: 使用相同的卡片 `bg-elevated/50 ring ring-default rounded-lg` 表面和主机的 Nuxt UI 颜色.

内建字符串来自 `@nuxtjs/i18n` 安装时`patterns.*`, (中文(简体) ), `actions.*`· ; `en` 财务报告和审定财务报表 `da` (列入) 英语回落;每个回落都可以被道具所压倒.

## 应用程序外壳

`AppShell` 是应用区域(admin, account)的仪表板外壳;一个区域布局将它的页面包裹在其中:

```vue
<AppShell
  id="admin"
  :title="t('title', 'Administration')"
  home="/admin"
  :navigation="navigation"
  :nav-label="t('nav.label', 'Admin navigation')"
  :search-groups="searchGroups"
  :back-to="{ to: '/', label: t('backToSite', 'Back to the site') }"
>
  <template #sidebar-footer="{ collapsed }">
    <AccountMenu block :collapsed="collapsed" />
  </template>
  <slot />
</AppShell>
```

-   `id` 键 `dashboard-sidebar-<id>` cookie (collapse,宽;每个区域一. `home` 财务报告和审定财务报表 `backTo.to` 原为 路径, shell 添加了语言前缀.
-   `navigation` 是一个列表 `UNavigationMenu` 组别(`type: 'label'` 行头一团. 导航栏显示一个哑巴 眉间, `title › active section`,从没有标题: `<h1>` 结束 `PageHeading`。 。 。 .
-   `searchGroups` 添加 QQK 按钮和调色板( 不包含颜色- 模式组); 将其留出, 不进行搜索 .
-   身体的中心是 `max-w-7xl`· ; `wide` 或者说 `definePageMeta({ wide: true })` 让它宽到完全宽.
-   文档标题默认为活动区域( else) `title`); 页面本身 `useHead` 赢了.
-   槽数 : `brand`, (中文(简体) ), `sidebar-top`, (中文(简体) ), `sidebar-footer` (所有获得 `{ collapsed }`, (中文(简体) ), `navbar-left` (取代眉毛), `navbar-right` (违约) `LanguageSelect` 当应用程序有一个以上的地方时,默认.
-   轻度应用主题为 shell 上的效用类(`bg-default` 躯体, `bg-elevated/25` 侧边栏, a 主机可瞄准 `[data-area=app]`。 。 。 .

## 页面图案

| 构成部分 | 使用 |
| --- | --- |
| `PageHeading` | 应用程序页的标题块:面包屑(阵列)或眉毛线(字符串), `#badge`,描述,元行, `#actions` |
| `PageSectionSwitcher` | 全宽按钮命名当前区域,包含所有区域菜单(移动区域导航) |
| `PageTabs` | 标题下的标签:链接(`to`,路线决定)或状态(`v-model` + 键 `value`(中文(简体) ) |
| `SectionCard` | 一节(形式、关键事实)的标题卡; `flush` 表格和清单 |
| `TableCard` | 表面a `UTable` 座入( 二`:ui="tableUi()"`),与 `#header` 财务报告和审定财务报表 `#footer` (总数,平分) |
| `RowMenu` | 这个 `⋯` 菜单; 命令 打开 = 编辑 = 破坏性组 |
| `StatCard` | 带有标签、有色图标和提示的编号; 与列表的链接 `to` |
| `ListCard` | 带有“ 查看全部” 链接的简短分割列表 |
| `DescriptionList` | 标签/ 值行; 空值为“ 未设置 ” ; 空位 `key` |
| `PageToolbar` | 搜索和过滤表上方, `#right` 计数 |
| `FormRow` | A 类 `UFormField` 作为设置行( 标签和提示左侧, 控制右侧, 在下方堆叠) `sm`a. 内含形式 `SectionCard`; 父关 `divide-y divide-default` |
| `FormSlideover` | 使用 Cancel + 提交来创建/编辑幻灯片格式( E)`form="<formId>"`; 与 `useOverlay` |
| `ConfirmDialog` 编号 : `useConfirmDialog()` | 破坏行动前确认 |

| 可编曲 | 使用 |
| --- | --- |
| `useAction()` | `{ busy, run(fn, { success?, error? }) }`:祝成功,祝酒并吞错误 |
| `useErrorToast()` | `(e, title?) => void`: 作为红土司的错误 |
| `useCopyToClipboard()` | `{ copy(text, message?) }` 用"被收起"的祝酒词 |
| `useFormat()` | `{ date, dateTime, time, dateRange, money }` 在活动区和应用程序时区(`appConfig.frigearUi.timeZone`,比如说. `Europe/Copenhagen`),因此服务器和客户端渲染出相同的文本 |
| `useLocaleLink()` | `{ localize, strip, isActive }`: 位置前缀意识路径( 身份不包含 i18n) |
| `useNavLinks(items, { exact })` | 菜单项目到 `UNavigationMenu` 与本地化的链接 `to` 财务报告和审定财务报表 `active` |

| 帮助者( E)`@frigear-nu/ui/utils`(中文(简体) ) | 使用 |
| --- | --- |
| `errorMessage(e, fallback)`, (中文(简体) ), `errorToToast(e, overrides?)` | 一个有用的信息 `$fetch`编号 :`createError` 错误 |
| `formatDate`, (中文(简体) ), `formatDateTime`, (中文(简体) ), `formatTime`, (中文(简体) ), `formatDateRange` | `Intl` 日期格式化(`value, locale?, options?`(中文(简体) ) |
| `statusColor(status, overrides?)` | 状态标记颜色( 已公布/ 活动/ 付费 ) 成功 , 待 —— 警告 , 失败 —— 错误) |
| `stripLocale(path, codes)` | 一条没有它的道路 `/<locale>` 前缀 |
| `surfaceClass`, (中文(简体) ), `tableUi(overrides?)` | 纸牌表面和A `UTable` `:ui` 页:1 `TableCard` |

类型(`DescriptionItem`, (中文(简体) ), `PageTabItem`, (中文(简体) ), `StatusColor`,)从 `@frigear-nu/ui/types`。 。 。 .

## 投入

`CurrencyInput`, (中文(简体) ), `MoneyInput`, (中文(简体) ), `DateInput`, (中文(简体) ), `IntervalInput`, (中文(简体) ), `TagInput`, (中文(简体) ), `UrlInput`, (中文(简体) ), `IconInput`, (中文(简体) ), `SwitchToggle`, (中文(简体) ), `MarkdownTextarea`, (中文(简体) ), `TranslatedInput`· ; `MonacoCodeEditor` 仅在主机安装时 `nuxt-monaco-editor`。 。 。 .

见 [文档](https://npmcn.com/package/apps/docs/content/3.modules/4.interface/1.ui/index.md) 编辑 [游乐场](https://npmcn.com/package/%40frigear-nu/ui/playground)。 。 。 .

## 常见问题

### @frigear-nu/ui 是什么？

用于Frigiar Nuxt应用的共享UI组件和可堆积物,建于Nuxt UI上\.

### 如何安装 @frigear-nu/ui？

在项目目录运行 npm install @frigear-nu/ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（3\.x）、nuxt（^4\.6\.4）、@nuxt/ui（^4\.12\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @frigear-nu/ui 支持 TypeScript 吗？

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

### @frigear-nu/ui 支持 ESM 还是 CommonJS？

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

### @frigear-nu/ui 可以商用吗？

@frigear-nu/ui 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @frigear-nu/ui 的下载量有多少？

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

### @frigear-nu/ui 还在维护吗？

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