# @conduction/nextcloud-vue 中文文档

规范地址：https://npmcn.com/package/%40conduction/nextcloud-vue/

版本：2\.180\.0
npm 元数据更新时间：2026-11-06T21:42:53.976Z
中文译文更新时间：2026-11-10T15:04:14.952Z
软件包许可：EUPL-1\.2

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

原始 npm 页面：https://www.npmjs.com/package/%40conduction/nextcloud-vue
原文对照：https://npmcn.com/package/%40conduction/nextcloud-vue/?lang=original
项目主页：https://github.com/ConductionNL/nextcloud-vue#readme
源码仓库：https://github.com/ConductionNL/nextcloud-vue

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

- 包体积（解压后）：189 MB，6613 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：36 个
- peer 依赖：vue ^3\.5\.0，dexie ^4\.0\.8，pinia ^2\.0\.0 \|\| ^3\.0\.0 \|\| ^4\.0\.0，eslint ^8\.56\.0 \|\| ^9\.0\.0 \|\| ^10\.0\.0，marked \>=12 \<19，axe-core ^4\.10\.0，dompurify ^3\.0\.0，gridstack ^12\.0\.0 \|\| ^13\.0\.0，stylelint ^17\.9\.1，@vueuse/core ^11\.0\.0 \|\| ^14\.0\.0，@nextcloud/vue ^9\.0\.0，@nextcloud/auth ^2\.0\.0 \|\| ^3\.0\.0，@nextcloud/l10n ^2\.0\.0 \|\| ^3\.0\.0，@nextcloud/axios ^2\.0\.0，@nextcloud/router ^2\.0\.0 \|\| ^3\.0\.0，eslint-plugin-vue ^9\.21\.0 \|\| ^10\.0\.0，vue-eslint-parser ^9\.4\.0 \|\| ^10\.0\.0，@nextcloud/capabilities ^1\.2\.1，@nextcloud/initial-state ^2\.2\.0 \|\| ^3\.0\.0，vue-material-design-icons ^5\.0\.0，@nextcloud/stylelint-config ^3\.2\.2
- 首次发布：2026-02-27T11:20:49.116Z
- 最新版本发布：2026-11-06T21:42:53.628Z
- 近 30 天下载量：100070（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：690（近 12 个月 690 个）

## 中文简介

共享 Vue 组件库用于操作 Nextcloud apps —— 以更高级别组件补充@nextcloud/vue, OpenRegister 集成和 NL 设计系统支持

## 安装

```sh
npm install @conduction/nextcloud-vue
```

也可以使用：`pnpm add @conduction/nextcloud-vue`、`yarn add @conduction/nextcloud-vue`、`bun add @conduction/nextcloud-vue`

## README

![@conduction/nextcloud-vue logo](https://raw.githubusercontent.com/ConductionNL/nextcloud-vue/main/src/img/logo.svg)

# @ 导出/ 下行- vue

**共享 Vue 2 组件库用于操控 Nextcloud apps — 高级 UI, OpenRegister 集成, 以及 NL 设计系统支持**

[![npm version](https://img.shields.io/npm/v/@conduction/nextcloud-vue)](https://www.npmjs.com/package/@conduction/nextcloud-vue) [![License](https://img.shields.io/badge/license-EUPL--1.2-blue)](https://github.com/ConductionNL/nextcloud-vue/blob/main/LICENSE) [![Code quality](https://img.shields.io/github/actions/workflow/status/ConductionNL/nextcloud-vue/code-quality.yml?label=quality)](https://github.com/ConductionNL/nextcloud-vue/actions)

* * *

`@conduction/nextcloud-vue` 是一个 npm 组件库, 坐在顶端 `@nextcloud/vue` 并提供更高层次,有观点的组件用于构建Nextcloud apps. 它处理重复的规律——由计划驱动的表格,CRUD对话框,被页化的列表,面相搜索——所以每个应用程序只写出特定域的部分.

内部使用 [皮佩林克语Name](https://github.com/ConductionNL/pipelinq), (中文(简体) ), [多西克语Name](https://github.com/ConductionNL/dossiq), (中文(简体) ), [拉尔平克](https://github.com/ConductionNL/larpinq),以及其它"下个云"应用程序.

> **要求:** Vue 2.7, Pinia 2, @nextcloud/vue 8 (英语)

## 特征

### 布局和页面组件

| 构成部分 | 说明 |
| --- | --- |
| `CnIndexPage` | 零配置索引页面,其中包含表格/卡视图、内置的 CRUD 对话框、页码化、质量动作和面部搜索 |
| `CnPageHeader` | 有图标、标题和描述的页眉 |
| `CnActionsBar` | 动作栏,加上按钮、质量动作触发器、视图切换(表/网格)和搜索 |
| `CnIndexSidebar` | 索引页边栏 |

### 数据显示

| 构成部分 | 说明 |
| --- | --- |
| `CnDataTable` | 可排序的表格,其中包含多选择的、由计划驱动的列、装入状态和空状态 |
| `CnCardGrid` | 对象摘要的响应卡网格 |
| `CnObjectCard` | 有标题、元数据和动作的单一对象卡 |
| `CnCellRenderer` | 用于字符串、数字、日期、对象、阵列和布尔值的具有类型意识的单元格 |
| `CnFacetSidebar` | 带有总数桶的已面部过滤边栏 |
| `CnPagination` | 用页码、大小选择器和“去页”进行全页标记 |
| `CnFilterBar` | 使用过滤器控制搜索输入 |
| `CnKpiGrid` | 统计仪表板的KPI计量卡 |

### 单对象对话框

| 构成部分 | 说明 |
| --- | --- |
| `CnFormDialog` | 创建和编辑的 Schema 驱动窗体对话框; JSON Schema 自动生成字段 |
| `CnDeleteDialog` | 删除两相确认/结果模式 |
| `CnCopyDialog` | 用命名模式选择器复制对话框 |

### 大众行动对话框

| 构成部分 | 说明 |
| --- | --- |
| `CnMassDeleteDialog` | 批量删除确认 |
| `CnMassCopyDialog` | 按项目命名的批量副本 |
| `CnMassExportDialog` | 导出选中的项目( JSON, CSV,...) |
| `CnMassImportDialog` | 带有文件上传和格式检测的批量导入 |

### 设置配置( C)

| 构成部分 | 说明 |
| --- | --- |
| `CnSettingsCard` | 带有保存状态的可折叠设置卡 |
| `CnSettingsSection` | 组合设置容器 |
| `CnConfigurationCard` | 有状态指示符的配置卡 |
| `CnVersionInfoCard` | 版本信息显示 |
| `CnStatsBlock` | 统计区块,包括计数和细分 |
| `CnRegisterMapping` | 登记册到实地绘图配置 |

### 州管理层

| 导出 | 说明 |
| --- | --- |
| `useObjectStore(id)` | 用于 OpenRegister CRUD 的通用 Pinia 商店 – pagination, search, caching |
| `createObjectStore(id)` | 自定义的物件储存厂 |
| `createSubResourcePlugin(name)` | 次级资源管理插件厂 |
| `auditTrailsPlugin` | 添加审计线索状态和获取器 |
| `relationsPlugin` | 管理对象关系/联系 |
| `filesPlugin` | 处理文件附件并上传 |
| `lifecyclePlugin` | 跟踪生命周期状态(草案、公布、存档) |
| `registerMappingPlugin` | 管理寄存到外地的映射 |

### 可编曲

| 可编曲 | 说明 |
| --- | --- |
| `useListView(options)` | 管理列表视图状态:搜索解跳、过滤状态、排序、页码 |
| `useDetailView(options)` | 管理细节视图:装入、编辑、删除、验证 |
| `useSubResource(options)` | 管理子资源操作 |

### Schema 公用事业

| 函数 | 说明 |
| --- | --- |
| `columnsFromSchema(schema)` | JSON Schema 自动生成数据表列定义 |
| `fieldsFromSchema(schema)` | JSON Schema 自动生成窗体字段定义 |
| `filtersFromSchema(schema)` | JSON Schema 自动生成过滤器定义 |
| `formatValue(value, format)` | 具有类型意识的单元格值 |

## 建筑

```mermaid
graph TD
    A[Nextcloud App] -->|imports| B[@conduction/nextcloud-vue]
    B --> C[Components]
    B --> D[useObjectStore]
    B --> E[Composables]
    B --> F[Schema Utils]
    D -->|CRUD| G[OpenRegister REST API]
    C -->|styles via| H[Nextcloud CSS Variables]
    C -->|NL Design tokens| I[--nldesign-* CSS vars]
```

### 双相对话框模式

所有对话框都遵循可预测的确认/结果流,使母组件控制API调用:

```js
// 1. Dialog emits @confirm with user input
// 2. Parent handles API call
// 3. Parent calls dialog.setResult(response) via $ref
// 4. Dialog shows toast and auto-closes
```

### Schema- Driven 组件

通过一个 JSON Schema 并获得一个零配置的完整工作表或表格:

```vue
<CnIndexPage
  :schema="caseTypeSchema"
  :objects="caseTypes"
  @save="onSave"
  @delete="onDelete"
/>
```

## 安装

```bash
npm install @conduction/nextcloud-vue
```

与组件导入一起导入 CSS :

```js
import '@conduction/nextcloud-vue/dist/nextcloud-vue.css'
import { CnIndexPage, useObjectStore } from '@conduction/nextcloud-vue'
```

### Markdown sanitization (CnRoadmap 项目/ CnSuggest Feature Modal) 互联网档案馆的存檔,存档日期2013-12-21

特性和路线图组件家族( E)`CnRoadmapItem`, (中文(简体) ), `CnSuggestFeatureModal`)使来自 GitHub 发行机构和用户输入的不可信标记降低。 两个部件都通过标记 [`marked`](https://www.npmjs.com/package/marked) 然后通过 [`DOMPurify`](https://www.npmjs.com/package/dompurify) 使用导出 `SAFE_MARKDOWN_DOMPURIFY_CONFIG` 常数 - `<script>`, (中文(简体) ), `on*` 处理者, `javascript:` URL( URL) , (中文), `<iframe>`,以及 `<style>` 被剥去之前 `v-html`。 。 。 .

两者 `marked` 财务报告和审定财务报表 `dompurify` 将在此库中宣布 `dependencies` 和船在消费者的捆绑。 已经给不同版本打针的App可以添加自己的限制——严格的配置是最重要的,而不是精确的依赖性版本. 最小兼容版本记录在 `package.json` (单位:千美元)`marked ^15`, (中文(简体) ), `dompurify ^3`) (中文(简体) ).

### Webpack Alias(用于本地开发)

直接针对源开发时,在 `webpack.config.js` 防止双重错误:

```js
config.resolve.alias = {
  '@conduction/nextcloud-vue': path.resolve(__dirname, '../nextcloud-vue/src'),
  'vue': path.resolve(__dirname, 'node_modules/vue'),
  'pinia': path.resolve(__dirname, 'node_modules/pinia'),
  '@nextcloud/vue': path.resolve(__dirname, 'node_modules/@nextcloud/vue'),
}
```

> **重要内容:** 没有这些别名,网络包装可能解决 从图书馆的Vue和Pinia `node_modules`,生成双重实例来打破反应和状态管理.

## 目录结构

```
nextcloud-vue/
├── src/
│   ├── index.js              # Main barrel export
│   ├── components/           # 30+ Vue 2 SFCs (one directory each)
│   │   ├── CnIndexPage/
│   │   ├── CnDataTable/
│   │   ├── CnFormDialog/
│   │   └── ...
│   ├── store/
│   │   ├── index.js          # useObjectStore, createObjectStore
│   │   └── plugins/          # auditTrails, relations, files, lifecycle, registerMapping
│   ├── composables/          # useListView, useDetailView, useSubResource
│   ├── utils/                # schema, headers, errors, formatting
│   ├── css/                  # Modular CSS (one file per component group)
│   └── types/index.d.ts      # TypeScript definitions
├── tests/                    # Jest test suite
├── dist/                     # Built output (ESM, CJS, CSS)
├── rollup.config.js          # Build configuration
└── package.json
```

## 发展

```bash
npm install
npm run dev       # Watch mode (Rollup)
npm run build     # Production build
npm test          # Jest tests
npm run lint      # ESLint
npm run stylelint # Stylelint
```

## 技术堆栈

| 层 | 技术 |
| --- | --- |
| 框架 | Vue 2.7 (备选方案 API) |
| 状态 | 皮尼亚 2 |
| 构建 | 卷起 3 |
| 支助科 | 后CSS(取自去除/后Cloud-vue.cs) |
| 测试 | Jest 29, @vue/test-utils 1 (英语) |
| 质量 | ESLint (@nextcloud/eslint-config), 斯泰林特 |
| 释放 | 语义发布(自动 npm 发布) |

## 图标设置许可( L)

`CnIconPicker` 能够显示图标 **材料设计图标( MDI)**, (中文(简体) ), **字体赞美**,则 **OpenGemeenten 打开引擎** 政府图标集. **此库没有图标包 .** 它只运送 _能力_ - 拾取器UI加 `fromMdiJs` 编号 : `fromFontAwesome` 编号 : `fromOpenGemeenten` 目录适配器。 您带来了图标数据 :

```js
import { fromFontAwesome, fromOpenGemeenten } from '@conduction/nextcloud-vue'
import { fas } from '@fortawesome/free-solid-svg-icons'

<CnIconPicker
  v-model="icon"
  searchable
  :sources="['mdi', 'fontawesome', 'opengemeenten']"
  :catalogues="{
    fontawesome: fromFontAwesome({ fas }),
    opengemeenten: fromOpenGemeenten(myOpenGemeentenIcons),
  }" />
```

-   这个 **计量吸入器** 源使用可选 `@mdi/js` 依赖性(在没有依赖性的情况下回到一个小型内置设定)——计量吸入器获得许可 [Apache-2.0 / 麻省理工学院](https://pictogrammers.com/docs/general/license/)。 。 。 .
-   **字体赞美** - 自由图标是 [CC BY 4.0 / SIL OFL 1.1 / 麻省理工学院](https://fontawesome.com/license/free);Pro图标和"Font August"名称/标记带有商业术语. 见 [https://fontawesome.com (中文(简体) )](https://fontawesome.com/)。 。 。 .
-   **OpenGemeenten 打开引擎** (单位:千美元)[(原始内容存档于2018-10-29). gemeenteniconen.nl](https://www.gemeenteniconen.nl/))——圣像本身为 **CC0 1.0 (中文(简体) )** (公有领域),但 `@opengemeenten/iconset-web-component` npm 软件包获得许可 **CC BY-NC-ND 4.0 (英语)** (非商业性,无衍生物). 见 [https://github.com/OpenGemeenten/Iconenset 页面存档备份,存于互联网档案馆](https://github.com/OpenGemeenten/Iconenset)。 。 。 .

**您负责确认您被许可使用 FontAwesome 和 OpenGemeenten 软件包 .** 通过适配器传递一包没有权利——这个库只提供自己获得和许可的图标制作能力. 归属于各项目.

## 许可证

欧盟PL-1.2

## 作者数

由 [传导](https://conduction.nl/) ——面向荷兰政府和公共部门组织的开源软件.

## 常见问题

### @conduction/nextcloud-vue 是什么？

共享 Vue 组件库用于操作 Nextcloud apps —— 以更高级别组件补充@nextcloud/vue, OpenRegister 集成和 NL 设计系统支持

### 如何安装 @conduction/nextcloud-vue？

在项目目录运行 npm install @conduction/nextcloud-vue，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（^3\.5\.0）、dexie（^4\.0\.8）、pinia（^2\.0\.0 \|\| ^3\.0\.0 \|\| ^4\.0\.0）、marked（\>=12 \<19）、dompurify（^3\.0\.0）、gridstack（^12\.0\.0 \|\| ^13\.0\.0）、@vueuse/core（^11\.0\.0 \|\| ^14\.0\.0）、@nextcloud/vue（^9\.0\.0）、@nextcloud/auth（^2\.0\.0 \|\| ^3\.0\.0）、@nextcloud/l10n（^2\.0\.0 \|\| ^3\.0\.0）、@nextcloud/axios（^2\.0\.0）、@nextcloud/router（^2\.0\.0 \|\| ^3\.0\.0）、@nextcloud/capabilities（^1\.2\.1）、@nextcloud/initial-state（^2\.2\.0 \|\| ^3\.0\.0）、vue-material-design-icons（^5\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。它还提供命令行工具 manifest-migrate，可以用 npx manifest-migrate 直接运行。

### @conduction/nextcloud-vue 支持 TypeScript 吗？

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

### @conduction/nextcloud-vue 支持 ESM 还是 CommonJS？

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

### @conduction/nextcloud-vue 可以商用吗？

@conduction/nextcloud-vue 使用 EUPL-1\.2 许可。声明的许可为 EUPL-1\.2，请阅读许可原文确认使用条件。以上为概括，不构成法律意见，请以许可原文为准。

### @conduction/nextcloud-vue 的下载量有多少？

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

### @conduction/nextcloud-vue 还在维护吗？

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