工作流和项目管理 UI

相关源文件

• cypress/composables/credentialsComposables.ts
• cypress/e2e/10-settings-log-streaming.cy.ts
• cypress/e2e/17-sharing.cy.ts
• cypress/e2e/2-credentials.cy.ts
• cypress/e2e/39-projects.cy.ts
• cypress/e2e/716-AI-bug-correctly-set-up-agent-model-shows-error.cy.ts
• cypress/pages/modals/credentials-modal.ts
• cypress/pages/modals/index.ts
• cypress/pages/modals/workflow-sharing-modal.ts
• packages/frontend/@n8n/design-system/.storybook/storybook.scss
• packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/InlineTextEdit.stories.ts
• packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/InlineTextEdit.test.ts
• packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/InlineTextEdit.vue

本文档涵盖了 n8n 中与工作流和项目管理相关的用户界面组件和功能。它解释了用户如何通过 UI 与工作流、凭证和项目进行交互，包括共享、转移和组织资源。

有关节点详细信息视图（NDV）的信息，请参阅 节点详细信息视图（NDV）。有关参数输入和资源定位器的信息，请参阅 参数输入和资源定位器。

概述

工作流和项目管理 UI 提供了以下接口：

1. 管理项目中的工作流
2. 在用户之间共享工作流和凭证
3. 在项目中组织资源
4. 在项目之间转移资源
5. 管理项目设置和外观

项目结构

n8n 中的项目是组织工作流和凭证的容器。UI 提供了创建、管理和导航项目之间的工具。

项目类型

来源： cypress/e2e/39-projects.cy.ts49-54 cypress/e2e/17-sharing.cy.ts204-264

项目导航

UI 提供了一个侧边栏用于在项目之间导航，其中主页（个人）项目和团队项目分别列出。

来源： cypress/e2e/39-projects.cy.ts112-114 cypress/e2e/39-projects.cy.ts132-134

工作流管理

工作流卡片

工作流在工作流列表视图中以卡片形式显示，并提供各种操作选项。

来源： cypress/e2e/39-projects.cy.ts254-255 cypress/e2e/17-sharing.cy.ts235-239

工作流共享

工作流共享模态框允许用户将工作流与其他用户或项目共享。

来源： cypress/e2e/17-sharing.cy.ts237-239 cypress/pages/modals/workflow-sharing-modal.ts12-34

工作流转移

工作流转移模态框允许用户在项目之间移动工作流。

来源： cypress/e2e/39-projects.cy.ts254-257 cypress/e2e/39-projects.cy.ts493-502

凭证管理

凭证卡片

凭证在凭证列表视图中以卡片形式显示，并提供各种操作选项。

来源： cypress/e2e/39-projects.cy.ts490-491 cypress/e2e/2-credentials.cy.ts66-67

凭证模态框

凭证模态框允许用户创建、编辑和共享凭证。

来源： cypress/pages/modals/credentials-modal.ts13-106 cypress/e2e/2-credentials.cy.ts59-64

凭证转移

凭证转移模态框允许用户在项目之间移动凭证。

来源： cypress/e2e/39-projects.cy.ts493-502 cypress/e2e/39-projects.cy.ts515-524

项目设置

项目创建和配置

项目创建和设置 UI 允许用户配置项目详细信息。

来源： cypress/e2e/39-projects.cy.ts344-361 cypress/e2e/39-projects.cy.ts245-250

项目图标自定义

项目图标选择器允许用户自定义侧边栏中项目的外观。

来源： cypress/e2e/39-projects.cy.ts352-360

资源过滤和上下文

基于项目的资源过滤

UI 会根据当前项目上下文自动过滤资源。

来源： cypress/e2e/39-projects.cy.ts57-167 cypress/e2e/17-sharing.cy.ts280-333

工作流中的凭证上下文

UI 显示的凭证取决于工作流的项目上下文和共享设置。

来源： cypress/e2e/39-projects.cy.ts137-142 cypress/e2e/17-sharing.cy.ts305-331

UI 组件

InlineTextEdit 组件

InlineTextEdit 组件在整个 UI 中用于可编辑文本字段，例如工作流和凭证名称。

来源： packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/InlineTextEdit.vue1-194 packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/InlineTextEdit.test.ts1-66

实现细节

项目组件交互

下图显示了不同组件在项目管理系统中的交互方式

来源： cypress/e2e/39-projects.cy.ts62-67 cypress/e2e/39-projects.cy.ts136-142

凭证共享实现

下图显示了凭证共享是如何实现的

来源： cypress/e2e/17-sharing.cy.ts171-197 cypress/e2e/17-sharing.cy.ts305-331

资源转移实现

下图显示了项目之间的资源转移是如何实现的

来源： cypress/e2e/39-projects.cy.ts452-457 cypress/e2e/39-projects.cy.ts493-502

关键 UI 交互

创建新项目

1. 点击侧边栏中的“添加项目”按钮
2. 输入项目名称
3. （可选）选择自定义图标
4. 点击“保存”
5. （可选）添加成员并设置其角色

来源： cypress/e2e/39-projects.cy.ts344-361 cypress/e2e/39-projects.cy.ts245-250

共享工作流

1. 在工作流列表中，点击工作流的操作菜单
2. 选择“共享”
3. 在共享模态框中，选择要共享的用户或项目
4. 点击“保存”

来源： cypress/e2e/17-sharing.cy.ts235-239 cypress/pages/modals/workflow-sharing-modal.ts12-34

移动凭证到另一个项目

1. 在凭证列表中，点击凭证的操作菜单
2. 选择“移动”
3. 在移动模态框中，选择目标项目
4. 点击“移动凭证”

来源： cypress/e2e/39-projects.cy.ts490-502 cypress/e2e/39-projects.cy.ts515-524

在项目中创建凭证

1. 导航到所需的项目
2. 选择“凭证”选项卡
3. 点击“创建凭证”
4. 选择凭证类型
5. 填写凭证详细信息
6. 点击“保存”

来源： cypress/e2e/39-projects.cy.ts69-85 cypress/e2e/2-credentials.cy.ts52-64

限制和边缘情况

共享工作流中的凭证访问

当工作流共享给用户时，他们只能使用以下凭证

1. 他们自己拥有的
2. 直接共享给他们的
3. 属于他们有权访问的项目

如果工作流使用了用户没有访问权限的凭证，则 NDV 中的凭证字段将被禁用。

来源： cypress/e2e/39-projects.cy.ts223-285 cypress/e2e/17-sharing.cy.ts99-101

项目资源隔离

一个项目中的资源除非明确共享，否则在其他项目中不可见。这种隔离确保了

1. 一个项目的凭证不会出现在另一个项目的流程中
2. 一个项目的流程不会出现在另一个项目的列表中
3. 创建子流程时，它将在与父流程相同的项目中创建

来源： cypress/e2e/39-projects.cy.ts287-317 cypress/e2e/17-sharing.cy.ts280-333

总结

n8n 中的工作流和项目管理 UI 提供了一套全面的工具来组织、共享和转移工作流和凭证。基于项目的组织系统允许用户保持其资源的组织性，并通过共享设置控制访问。像 InlineTextEdit 这样的 UI 组件提供了无缝的用户体验来管理这些资源。