# @meshmakers/octo-ui-legacy 中文文档

规范地址：https://npmcn.com/package/%40meshmakers/octo-ui-legacy/

版本：3\.5\.550
npm 元数据更新时间：2026-11-01T19:23:25.607Z
中文译文更新时间：2026-11-01T21:33:15.697Z
软件包许可：未声明

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

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

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

- 包体积（解压后）：132 kB，5 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：@angular/cdk ^22\.0\.0，@angular/core ^22\.0\.0，@angular/forms ^22\.0\.0，@angular/common ^22\.0\.0，@angular/router ^22\.0\.0，@angular/material ^22\.0\.0，@meshmakers/octo-services \*，@meshmakers/shared-services \*
- 首次发布：2026-02-22T21:07:30.732Z
- 最新版本发布：2026-11-01T19:23:25.446Z
- 已发布版本数：222（近 12 个月 222 个）

## 中文简介

遗留的Angular UI库 **角材料** 以向后兼容旧的OctoMesh应用程序。

## 安装

```sh
npm install @meshmakers/octo-ui-legacy
```

也可以使用：`pnpm add @meshmakers/octo-ui-legacy`、`yarn add @meshmakers/octo-ui-legacy`、`bun add @meshmakers/octo-ui-legacy`

## README

# @meshmakers / octo-ui-legacy

遗留的Angular UI库 **角材料** 以向后兼容旧的OctoMesh应用程序。

**注意：** 对于新项目，使用 `@meshmakers/octo-ui` （基于剑道UI）。

部分 [@meshmakers](https://www.npmjs.com/org/meshmakers) 包的生态系统。

## 目的

此库为尚未迁移到基于剑道UI的应用程序提供了基于材料设计的UI组件 `@meshmakers/octo-ui`． 它包含了表格、面包屑、通知和实体选择组件的现代化Material Design版本。

## 构建和测试

```bash
# Build
npm run build:octo-ui-legacy

# Lint
npm run lint:octo-ui-legacy
```

此项目没有单元测试。

## 体系结构

```
octo-ui-legacy/
├── src/
│   ├── public-api.ts
│   └── lib/
│       ├── table/
│       │   ├── mm-octo-table.component.ts    # Data table
│       │   ├── mm-octo-table.component.html
│       │   ├── mm-octo-table.component.scss
│       │   └── mm-octo-table.model.ts        # Column/action models
│       ├── breadcrumb/
│       │   └── mm-breadcrumb.component.ts     # Breadcrumb navigation
│       ├── notification-bar/
│       │   └── mm-notification-bar.component.ts # Error snack bar
│       └── entity-select-input/
│           └── mm-entity-select-input.component.ts # Entity autocomplete
```

## 组件

| 组件 | 选择器 | 描述 |
| --- | --- | --- |
| `MmOctoTableComponent` | `mm-octo-table` | 材料表与排序，分页，搜索，行动列，响应移动布局 |
| `MmBreadcrumbComponent` | `mm-breadcrumb` | 面包屑导航使用 `BreadCrumbService` |
| `MmNotificationBarComponent` | `mm-notification-bar` | 错误通知通过材料小吃栏与自动解散 |
| `MmEntitySelectInputComponent` | `mm-entity-select-input` | 材质自动完成实体选择 `ControlValueAccessor` |

### MmOctoTableComponent

材料设计数据表与GraphQL数据源集成。

**特点:** 排序、分页、debounce搜索、菜单操作栏、响应式移动布局（959px下基于卡片）、工具栏操作、行选择。

**输入:**

| 输入 | 类型 | 描述 |
| --- | --- | --- |
| `dataSource` | `AssetRepoGraphQlDataSource` | GraphQL数据源 |
| `columns` | `ColumnDefinition[]` | 列定义（字符串或tablecoln） |
| `actionColumns` | `ActionColumn[]` | 动作按钮列 |
| `optionActions` | `ActionColumn[]` | 下拉菜单操作 |
| `searchFilterColumns` | `string[]` | 要包含在搜索中的列 |
| `pageSizeOptions` | `number[]` | 页面大小选项 |
| `defaultSortColumn` | `string` | 默认排序字段 |
| `rowIsClickable` | `boolean` | 启用行单击事件 |

**输出:**

| 输出 | 类型 | 描述 |
| --- | --- | --- |
| `rowClicked` | `EventEmitter<any>` | 在行单击时触发 |
| `actionColumnClick` | `EventEmitter<{action, id, entry}>` | 点击动作时触发 |
| `searchFilterStringUpdated` | `EventEmitter<string>` | 在搜索文本更改时触发 |

### MmEntitySelectInputComponent

材料自动完成输入实现 `ControlValueAccessor`， `MatFormFieldControl`, `Validator`.

**特点:** 去噪搜索（300ms），过滤前至少3个字符，加载旋转器，自动选择模糊与单一结果，前缀支持直接查找。

## 模型

| 模型 | 描述 |
| --- | --- |
| `TableColumn` | 列定义与displayName， dataKey, templateName, sortingDisabled |
| `ColumnDefinition` | 联合类型: `string | TableColumn` |
| `ActionColumn` | 带有displayText， actionId, iconName， svgIconName的动作按钮 |
| `ToolbarAction` | 带有route， clickHandler, isDisabled， isHidden的工具栏动作 |

## 依赖关系

-   **角21** 使用Angular Material和CDK
-   **@meshmakers / octo-services** （GraphQL数据源，dto）
-   **@meshmakers /共享服务** （breadcrumservice, MessageService, EntitySelectDataSource）

## 迁移到octo-ui / shared-ui

| 遗产(材料) | 现代(剑道) |
| --- | --- |
| `MmOctoTableComponent` | `ListViewComponent` 从 `@meshmakers/shared-ui` |
| `MmBreadcrumbComponent` | Kendo Breadcrumb或自定义（在主机应用程序中） |
| `MmNotificationBarComponent` | `NotificationDisplayService` 从 `@meshmakers/shared-ui` |
| `MmEntitySelectInputComponent` | `EntitySelectInputComponent` 从 `@meshmakers/shared-ui` |

## 文件和测试标准

-   **所有开发人员文档必须用英语编写**
-   **每次代码更改都必须包含更新的文档** -更新自述文件。医学博士,克劳德。在添加、修改或删除功能时使用
-   **必须执行单元测试和集成测试** 每次代码更改之后
-   **必须更新现有的测试** 当被测试代码的行为发生变化时
-   **必须添加新的测试** 当实现新的特性、组件或服务时
-   永远不要提交测试失败的代码

## 常见问题

### @meshmakers/octo-ui-legacy 是什么？

遗留的Angular UI库 角材料 以向后兼容旧的OctoMesh应用程序。

### 如何安装 @meshmakers/octo-ui-legacy？

在项目目录运行 npm install @meshmakers/octo-ui-legacy，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/cdk（^22\.0\.0）、@angular/core（^22\.0\.0）、@angular/forms（^22\.0\.0）、@angular/common（^22\.0\.0）、@angular/router（^22\.0\.0）、@angular/material（^22\.0\.0）、@meshmakers/octo-services（\*）、@meshmakers/shared-services（\*）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @meshmakers/octo-ui-legacy 支持 TypeScript 吗？

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

### @meshmakers/octo-ui-legacy 支持 ESM 还是 CommonJS？

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

### @meshmakers/octo-ui-legacy 可以商用吗？

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

### @meshmakers/octo-ui-legacy 还在维护吗？

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