# @brighterly/lib-lumee-ui 中文文档

规范地址：https://npmcn.com/package/%40brighterly/lib-lumee-ui/

版本：1\.25\.3
npm 元数据更新时间：2026-11-02T17:00:57.735Z
中文译文更新时间：2026-11-08T15:28:16.191Z
软件包许可：未声明

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

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

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

- 包体积（解压后）：2.3 MB，511 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：11 个
- peer 依赖：vue ^3\.5\.0
- 首次发布：2026-07-30T16:35:41.190Z
- 最新版本发布：2026-11-02T17:00:57.476Z
- 近 30 天下载量：4398（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：94（近 12 个月 94 个）

## 中文简介

官方更闪亮的发光

## 安装

```sh
npm install @brighterly/lib-lumee-ui
```

也可以使用：`pnpm add @brighterly/lib-lumee-ui`、`yarn add @brighterly/lib-lumee-ui`、`bun add @brighterly/lib-lumee-ui`

## README

# @brighterly/lib-lumee-ui (英语)

更明亮的设计系统——设计标志(并随着时间的推移,Vue 3组件).

## 使用量

```ts
// main.ts — load exactly ONE mode file per app (apps never mix modes)
import '@brighterly/lib-lumee-ui/client.css'    // one mode per product: client.css | admin.css | smartest-minds.css
import '@brighterly/lib-lumee-ui/style.css'     // component styles
import '@brighterly/lib-lumee-ui/fonts.css'     // self-hosted DS fonts at the token weights
import '@brighterly/lib-lumee-ui/scrollbar.css' // tints the thumb of every native scrollbar, the page's included — opt-in
```

```vue
<script setup lang="ts">
import { ItemAnswerHorizontal } from '@brighterly/lib-lumee-ui'
</script>
```

带有语义的样式自定义 UI `--btly-*` CSS 变量和 `.btly-text-<style>` 印刷课. 为难得的联署材料需求(图表,内含样式): `import { token, brand, textClass } from '@brighterly/lib-lumee-ui'` ——模式不可知 `var(--btly-…)` 参考字符串.

带有软件包的字体船 : `fonts.css` inter/Mona Sans/机器人通过 `@fontsource/*` (运行时间依赖性) 准确的重数 打印符号使用.

滚动栏 : `scrollbar.css` 样式只包含每个本地滚动条的缩略图 —— 包含该页面的标准属性 : `scrollbar-color` 轻而易举 `brand-gray-200` 在一个透明的轨道上 `scrollbar-width: thin` 是Figma 4px药丸最接近的原生厚度。 栏本身保留了引擎的:将站台上覆放的地方(macOS,iOS,Android)上覆,因此不需要布局空间,经典的站台上覆放的地方(Windows). 从不作风 `::-webkit-scrollbar*` 在应用程序或组件中,任何这样的规则都会使该栏变成一个能吃到内容宽度的经典的12–15px道. 故意隐藏一个 `scrollbar-width: none` 加号 `::-webkit-scrollbar { display: none }` (伪封面为Safari 在18.2年前);从未设置 `scrollbar-width` 编号 : `scrollbar-color` 否则——床单是他们的.

套装大小( opt- in): `lumee()` Vite 插件只让 app 的 生产 构建 船 图标 和 `Logo` 绘制其代码用途(完整的图标注册为~58 KB gzip,Logo艺术~48 KB).

```ts
// nuxt.config.ts
import { lumee } from '@brighterly/lib-lumee-ui/vite'
export default defineNuxtConfig({ vite: { plugins: [lumee()] } })
// vite.config.ts: plugins: [vue(), lumee()]
```

它在生产中运行只构建(dev 保存一切),扫描项目目录(最近的) `package.json` 或者说 `.git` 在Vite 根上方)和指纹 `[lumee] icons: N of 171 names kept · logo: N of 22 variants kept`图标名称和 `Logo` 道具为文. 建筑警告 `… imports @brighterly/lib-lumee-ui but was not scanned` 指项目外的代码(一个工作空间包,npm Nuxt层)使用DS,其图标可能缺失——将该代码移入项目中或放下插件.

## 所需资源

对于完整的 Figma QQ 代码工作流程,克洛德需要 **图像插件** (单位:千美元)`figma@claude-plugins-official`)——它提供 `figma:*` 技术与Figma MCP。 这回波可以让它通过 `.claude/settings.json`,但插件为 **每名发展中国家** 配置和不到达 `git clone`,因此每个开发商设置一次:

1.  **安装** - 在克洛德代码运行中 `/plugin` 并安装 `figma` (从) `claude-plugins-official`) (中文(简体) ).
2.  **认证** —— 说 `/mcp` → `figma` → **认证** (打开浏览器). 已安装 QQ 认证 .
3.  **校验** —— 说 `/mcp` 显示 `figma … ✓ Connected`· ; `/skills` 列表 `figma:*`。 。 。 .

这使得每个开发者都来到了相同的Figma驱动状态. 回收船只有自己的技能, `brighterly-design-system` (单位:千美元)`.claude/skills/`figma 插件技术的复制件.

### 字体优美的代理工具

此 DS 中的图标是 **FontAwesome 7 Pro 软件**所以克劳德也需要官员 **字体赞美代理工具插件** (单位:千美元)`icons@fontawesome-agent-tools`)——它提供 `icons:*` 技能(`/suggest-icon`, (中文(简体) ), `/add-icon`, (中文(简体) ), `/fa-help`, (中文(简体) ), `/setup-fa`),用于对照直播的FA库/docs查找并验证FA图标,而不是过时的训练数据. 和 Figma 插件一样, 它通过承诺启用 `.claude/settings.json` (其市场公布于 `extraKnownMarketplaces`),但插件是 **每名发展中国家** 配置和不到达 `git clone`,因此每个开发者安装一次:

1.  **添加市场** - 在克洛德代码运行中 `/plugin marketplace add FortAwesome/fontawesome-agent-tools` (或 `npx skills add FortAwesome/fontawesome-agent-tools` 用于没有插件包装器的技能.
2.  **安装** —— 说 `/plugin install icons@fontawesome-agent-tools`。 。 。 .
3.  **校验** —— 说 `/skills` 列表 `icons:*` (例如:. `icons:suggest-icon`) (中文(简体) ).

范围说明:使用这些工具 **查找/ 验证** 正确的 FA 图标名称并回答 FA 问题 - **代码中的图标如何由DS自己管理 `<Icon>` 组成部分和登记册**,而不是原始输出 `/add-icon` (它释放出FontAwesome通用的平角集成). 处理 `/add-icon` 输出作为参考,而不是DS模式。 FA-Pro登记证书`NPM_FORTAWESOME_ACCESS`,见下文)仍然需要安装图标包本身.

## 发布新版本

出版是自动的,只有CI. `.github/workflows/publish.yml` 有两个工作: `verify` (冷冻装置、组件结构检查、全 `pnpm build`单位测试) 公关和每一个推向 `main` 编号 : `staging` 编号 : `develop` 编号 : `sandbox`· ; `publish` 自己开的.. 推动到 `main` 谁 `package.json` npm 版本还没有,它需要 `dist/` 那个 `verify` 新建和运行 `npm publish`因此,发布是一个版本的凸起,达到 `main`数字 :

1.  **弹出版本** 使用以下命令更新 `package.json` 并创建 git 标签 :
    
    ```bash
    pnpm version patch   # 1.0.0 -> 1.0.1 (bug fixes)
    pnpm version minor   # 1.0.0 -> 1.1.0 (new features)
    pnpm version major   # 1.0.0 -> 2.0.0 (breaking changes)
    ```
    
2.  推动 `main` (直接或通过公关):
    
    ```bash
    git push
    ```
    
3.  Npm 发布会自动创建.

一个不更改版本的推动跳过 `publish` 任务。 别 `npm publish` 从a 笔记本电脑: `dist/` 被点缀,只有 `verify` 建造一个船.

## 巨钩

### 承诺前钩

运行 `pnpm lint` 财务报告和审定财务报表 `pnpm typecheck` 在舞台上进行 `.ts` 编号 : `.vue` 文档.

准备:

```shell
chmod +x _tools/git/pre-commit
ln -s ../../_tools/git/pre-commit .git/hooks/pre-commit
```

### 预推钩

验证释放标记( E)`v*`) 匹配该版本 `package.json` 在推进之前.

准备:

```shell
chmod +x _tools/git/pre-push
ln -s ../../_tools/git/pre-push .git/hooks/pre-push
```

## 依赖关系

创建.env :

```bash
cp .env.example .env
```

编辑.env并添加 `NPM_FORTAWESOME_ACCESS` (登记)和 `FIGMA_ACCESS_TOKEN` (代码连接发布) - 范围(下文)

安装道具 :

```bash
make install
```

### 视野

代币被消耗 **只有一点**: 密码连接 CLI(`make figma:publish` 编号 : `figma:unpublish`) (中文(简体) ). 代理读取的 Figma MCP 设计是 OAuth 上的远程服务器—— 因此这些瞄准镜永远不会影响 `get_design_context` 还有朋友.

生成时间 _图片 – 设置 – 安全 – 个人访问标志_ 改为:

| 范围 | 为什么 |
| --- | --- |
| `file_code_connect:write` | **要求.** 这个 `POST /v1/code_connect` 出版发行. |
| `file_content:read` | **要求.** `GET /files/:key/nodes` 用于 `figma connect preview` 财务报告和审定财务报表 `create`。 。 。 . |
| `library_content:read` | 组件/组件设置 ids + 密钥通过 `/files/:key/components`。 。 。 . |
| `team_library_content:read` | 团队库也是如此. |
| `file_comments:read` | 每个节点的设计者评论. |
| `file_versions:read` | "我们造它以来这个框架有变化"的检查. |
| `file_metadata:read` | 文件名 / 最后修改的疗理检查 . |

最后五个还没有被任何脚本使用——它们被授予,所以未来的工具不需要新的符号. 故意 **没有** 授予: `file_comments:write` (将担任维护者), `file_dev_resources:*`, (中文(简体) ), `library_assets:read`, (中文(简体) ), `folders:read`, (中文(简体) ), `webhooks:*`, (中文(简体) ), `current_user:read`。 。 。 .

Tokens 过期( 90天是 Figma 的默认) —— 当出版开始返回 403 时, 与 都一样 注意变数 REST API是企业定型的,在这里根本没有范围,这就是为什么 符号来自设计者的 DTCG 导出(`tokens/*.json`)而不是活拉.

## 常见问题

### @brighterly/lib-lumee-ui 是什么？

官方更闪亮的发光

### 如何安装 @brighterly/lib-lumee-ui？

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

### @brighterly/lib-lumee-ui 支持 TypeScript 吗？

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

### @brighterly/lib-lumee-ui 支持 ESM 还是 CommonJS？

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

### @brighterly/lib-lumee-ui 可以商用吗？

@brighterly/lib-lumee-ui 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @brighterly/lib-lumee-ui 的下载量有多少？

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

### @brighterly/lib-lumee-ui 还在维护吗？

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