LangFlow 1.x 系列【4】首页侧边栏与用户菜单功能说明

云烟成雨TD2026-07-04 9:21

文章目录

  • [1. Projects（项目管理）](#1. Projects（项目管理）)
    • [1.1 面板结构](#1.1 面板结构)
    • [1.2 标题栏按钮](#1.2 标题栏按钮)
    • [1.3 项目右侧 ⋯](#1.3 项目右侧 ⋯)
    • [1.4 Flows Tab（Flow 列表标签页）](#1.4 Flows Tab（Flow 列表标签页）)
    • [1.5 MCP Server Tab（MCP 服务标签页）](#1.5 MCP Server Tab（MCP 服务标签页）)
  • [2. Knowledge Bases（知识库）](#2. Knowledge Bases（知识库）)
    • [2.1 页面结构](#2.1 页面结构)
    • [2.2 知识库操作](#2.2 知识库操作)
    • [2.3 知识库状态](#2.3 知识库状态)
    • [2.4 详情 Drawer（抽屉面板）](#2.4 详情 Drawer（抽屉面板）)
    • [2.5 与 Flow 的连接](#2.5 与 Flow 的连接)
  • [3. My Files（文件管理）](#3. My Files（文件管理）)
    • [3.1 页面结构](#3.1 页面结构)
    • [3.2 文件操作](#3.2 文件操作)
    • [3.3 文件图标映射](#3.3 文件图标映射)
    • [3.4 文件在 Flow 中的使用](#3.4 文件在 Flow 中的使用)
  • [4. 顶部导航栏](#4. 顶部导航栏)
    • [4.1 通知中心（Notifications）](#4.1 通知中心（Notifications）)
    • [4.2 用户头像菜单](#4.2 用户头像菜单)
      • [4.2.1 Version（版本信息）](#4.2.1 Version（版本信息）)
      • [4.2.2 Settings（设置）](#4.2.2 Settings（设置）)
      • [4.2.3 Admin Page（管理员页面）](#4.2.3 Admin Page（管理员页面）)
      • [4.2.4 Documentation（文档）](#4.2.4 Documentation（文档）)
      • [4.2.5 GitHub / Discord / Twitter](#4.2.5 GitHub / Discord / Twitter)
      • [4.2.6 Theme（主题切换）](#4.2.6 Theme（主题切换）)
      • [4.2.7 Logout（退出登录）](#4.2.7 Logout（退出登录）)

本文档聚焦首页左侧菜单、用户头像菜单、通知中心等功能，不涉及画布编辑器。

1. Projects（项目管理）

位置 ：左侧边栏顶部，标题 Projects

Projects 是 Langflow 的文件夹管理系统 ，用于组织和分类你的工作流 (Flows) 和 Mcp Server。

1.1 面板结构

复制代码 
┌──────────────────────────┐
│ ☰  Projects    [📤] [+] │  ← 标题栏
├──────────────────────────┤
│ 📁 项目名称1         [⋯] │  ← 项目列表项
│ 📁 项目名称2         [⋯] │
│ 📁 ...                   │
├──────────────────────────┤
│      [Getting Started]   │  ← 新手引导 (可关闭)
└──────────────────────────┘

1.2 标题栏按钮

按钮 图标 功能
标题 Projects 固定标题文字
上传 📤 从 JSON 文件导入 Flow 到当前项目
新建项目 ＋ 创建新的项目文件夹（默认名称 "New Project"）

1.3 项目右侧 ⋯

右侧 ⋯ 按钮，点击展开菜单：

操作 图标 说明
Rename ✏️ SquarePen 重命名项目（也可双击项目名进入编辑）
Download 📥 Download 将整个项目及其中所有 Flow 导出为 JSON
Delete 🗑️ Trash2 删除项目（仅删除文件夹，Flow 不丢失）

1.4 Flows Tab（Flow 列表标签页）

点击左侧某个项目后，主内容区顶部的 Flows Tab 显示当前项目中的所有 AI 工作流。

页面布局：

text 复制代码 
┌──────────────────────────────────────────────────────────┐
│ 📁 项目名称                                              │
│ ──────────────────────────────────────────────────────── │
│ [MCP]  [Flows]                                           │  ← Tab 栏
│ ──────────────────────────────────────────────────────── │
│ 🔍 搜索Flow...                    [📋列表/🟊网格] [+ New] │  ← 工具栏
├──────────────────────────────────────────────────────────┤
│ ┌────────────┐ ┌────────────┐ ┌────────────┐            │
│ │ Flow名称1   │ │ Flow名称2   │ │ Flow名称3   │           │  ← 网格视图
│ │ 描述文字... │ │ 描述文字... │ │ 描述文字... │           │
│ │ [✏️][📥][📋] │ │ [✏️][📥][📋] │ │ [✏️][📥][📋] │           │
│ └────────────┘ └────────────┘ └────────────┘            │
│                                                          │
│ ─── 页码 [12/24/48/96]  ← 1 2 3 → ───                  │  ← 分页(>10条时)
└──────────────────────────────────────────────────────────┘

工具栏功能：

控件 功能
搜索框 按名称实时搜索过滤 Flow
列表/网格切换 切换 Flow 的展示方式（列表行或卡片网格）
+ New Flow 创建新的空白 Flow（直接跳转到画布编辑器，带欢迎引导）

Flow 卡片/行操作：

操作 说明
点击卡片 进入 Flow 编辑器 (/flow/:id)
✏️ 编辑 进入 Flow 编辑器
📥 下载/导出 导出该 Flow 为 JSON 文件
📋 复制 创建 Flow 副本
🗑️ 删除 删除 Flow（含对话历史）

多选操作：

方式 说明
Shift + 点击 范围选择：从上次选中到当前点击之间的所有 Flow
Ctrl/Cmd + 点击 多选/取消单个 Flow
选中后 顶部工具栏自动滑出「下载」和「删除」按钮

拖拽操作：

  • 将 Flow 卡片拖拽到左侧其他项目，实现跨项目移动
  • 将外部 .json 文件拖入主区域 ，自动导入为 Flow

1.5 MCP Server Tab（MCP 服务标签页）

MCP Tab 功能 ：将当前项目中的 Flow 暴露为 MCP (Model Context Protocol) 工具，供外部 AI 客户端（如 Claude Desktop、VS Code、Cursor 等）调用。

当 ENABLE_MCP=true 时（默认开启），点击左侧某个项目后，主内容区顶部会出现 Tab 栏：

功能详解：

区域 说明
Flows & Tools 列出当前项目中的所有 Flow，显示为 MCP 工具；可点击 ⚙️ 编辑哪些 Flow 作为 MCP 工具暴露
Auto Install 模式 本地连接时可用，自动检测已安装的 MCP 客户端（Claude Desktop 等），一键安装配置
JSON 模式 生成标准 MCP 服务器 JSON 配置，支持按操作系统（Windows/Mac/Linux）展示不同的配置格式
Transport 选择 支持 StreamableHTTP 传输协议
API Key 生成 生成用于 MCP 认证的 API Key
一键复制 复制 JSON 配置到剪贴板，粘贴到 MCP 客户端即可使用

支持的 MCP 客户端：

  • Claude Desktop / Claude Code
  • VS Code / Cursor / Windsurf
  • 任何支持 MCP 协议的 AI 应用

2. Knowledge Bases（知识库）

位置 ：左侧边栏底部（需 ENABLE_KNOWLEDGE_BASES 特性开启）

路径 ：点击跳转到 /assets/knowledge-bases

知识库用于 RAG (检索增强生成) 场景，管理文档知识源。

2.1 页面结构

复制代码 
┌──────────────────────────────────────────────┐
│ ☰  Knowledge Bases                          │  ← 页面标题
│                                              │
│ 🔍 搜索知识库...              [Delete (2)]   │  ← 搜索 + 批量删除
│                          [＋ Upload Sources] │  ← 上传按钮
│ ┌──────────────────────────────────────────┐ │
│ │ Name        │ Status  │ Sources │ ...    │ │  ← AG Grid 表格
│ ├──────────────────────────────────────────┤ │
│ │ 📚 知识库1   │ Ready   │ 3       │        │ │
│ │ 📚 知识库2   │ Ingest..│ 12      │        │ │
│ └──────────────────────────────────────────┘ │
└──────────────────────────────────────────────┘

2.2 知识库操作

操作 说明
创建知识库 基于模板创建新知识库（需要存在示例知识库 Flow）
上传/添加源 向知识库上传文档文件作为知识源
搜索 实时过滤知识库列表
行选择 支持 Shift+点击 范围选择多行
批量删除 选中多个知识库后一键删除
双击行 打开知识库详情 Drawer（抽屉面板）

2.3 知识库状态

状态 说明
ready 就绪，可以正常查询
ingesting 正在处理/摄入文档中
failed 处理失败（会弹出错误通知）
in_progress 其他处理状态

2.4 详情 Drawer（抽屉面板）

双击知识库行后右侧滑出，包含：

  • 知识库基本信息（名称、状态、源数量）
  • Ingestion Runs --- 文档摄入历史记录
    • 查看每次摄入的 chunks 数量
    • 成功/失败状态
    • 时间戳
  • Source Chunks 查看 --- 点击进入 /assets/knowledge-bases/:sourceId/chunks 查看分块详情

2.5 与 Flow 的连接

  • 知识库在 Flow 编辑器中可通过 Knowledge Base 相关组件调用
  • 用于构建 RAG 问答、文档检索等 AI 应用

3. My Files（文件管理）

位置 ：左侧边栏底部（需 ENABLE_FILE_MANAGEMENT 特性开启）

路径 ：点击跳转到 /assets/files

用于统一管理上传的文件，供 Flow 中的组件引用。

3.1 页面结构

复制代码 
┌──────────────────────────────────────────────┐
│ ☰  My Files                                 │  ← 页面标题
│                                              │
│ 🔍 搜索文件...                [Delete (3)]   │  ← 搜索 + 批量删除
│                          [＋ Upload Files]   │  ← 上传按钮
│ ┌──────────────────────────────────────────┐ │
│ │ Name          │ Size    │ Type  │ Date  │ │  ← AG Grid 表格
│ ├──────────────────────────────────────────┤ │
│ │ 📄 doc.pdf    │ 2.3 MB  │ pdf   │ ...   │ │
│ │ 📊 data.csv   │ 156 KB  │ csv   │ ...   │ │
│ │ 🖼️ image.png  │ 890 KB  │ png   │ ...   │ │
│ └──────────────────────────────────────────┘ │
└──────────────────────────────────────────────┘

3.2 文件操作

操作 说明
上传文件 支持多文件同时上传；支持拖拽上传到表格区域
重命名 双击文件名单元格进入编辑模式，回车确认
删除 支持单选删除（右键菜单）和批量删除（选中多行）
右键菜单 右键文件行弹出操作菜单（重命名、删除）
搜索过滤 实时搜索过滤文件名
Shift 多选 按住 Shift 点击行首尾进行范围选择

3.3 文件图标映射

根据文件扩展名自动匹配图标（FILE_ICONS 配置）：

文件类型 示例扩展名
📄 PDF .pdf
📊 CSV/Excel .csv, .xlsx
🖼️ 图片 .png, .jpg, .gif
📝 文本 .txt, .md
🎵 音频 .mp3, .wav
🎬 视频 .mp4
📦 压缩包 .zip
❓ 其他 默认图标

3.4 文件在 Flow 中的使用

  • 上传后的文件可通过 File 组件在 Flow 中引用
  • 支持通过文件 ID 或路径引用

4. 顶部导航栏

4.1 通知中心（Notifications）

位置：顶部导航栏右侧，🔔 铃铛图标

系统在以下情况自动产生通知：

触发场景 通知类型 图标
Flow 构建成功 Success（成功） ✅
Flow 构建失败 Error（错误） ❌
API 调用异常 Error（错误） ❌
文件上传成功 Success（成功） ✅
知识库摄入完成 Notice（提示） ℹ️

通知指示器

  • 灰色铃铛 --- 无未读通知
  • 红色圆点 --- 有新的未读通知（notificationCenter: true）

点击铃铛弹出下拉面板（500×500px）：

4.2 用户头像菜单

位置：顶部导航栏最右侧，用户头像图标

点击头像弹出下拉菜单，宽度 272px。

菜单结构：

复制代码 
┌──────────────────────────────┐
│ Version          1.10.0 ✓    │  ← 版本信息（最新/有更新）
├──────────────────────────────┤
│ Settings                     │  ← 设置入口
│ Admin Page (管理员可见)      │  ← 管理页面
│ Documentation                │  ← 外部链接 → docs.langflow.org
├──────────────────────────────┤
│ ⭐ GitHub                     │  ← 外部链接 → github.com/langflow-ai/langflow
│ 💬 Discord (蓝色图标)        │  ← 外部链接 → discord.com/invite/EqksyE2EX9
│ 𝕏 Twitter/X                  │  ← 外部链接 → x.com/langflow_ai
├──────────────────────────────┤
│ Theme          🌙 ☀️         │  ← 主题切换（暗色/亮色）
├──────────────────────────────┤
│ Logout                       │  ← 退出登录
└──────────────────────────────┘

4.2.1 Version（版本信息）

  • 显示当前 Langflow 版本号（如 1.10.0）
  • 自动与最新版本比对：
    • 绿色 ✓ latest --- 已是最新版本
    • 琥珀色 update available --- 有新版本可更新

4.2.2 Settings（设置）

点击跳转 /settings/general，包含以下子设置：

子页面 路径 说明
General /settings/general 语言、自动保存间隔、自动播放 Playground 等
Global Variables /settings/global-variables 跨 Flow 共享的全局变量
Model Providers /settings/model-providers 集中管理各 AI 模型的 API Key
Database Providers /settings/db-providers 外部数据库连接配置
MCP Servers /settings/mcp-servers MCP 服务器管理
MCP Client /settings/mcp-client MCP 客户端连接
API Keys /settings/api-keys 创建 Langflow API 密钥（供外部程序调用）
Shortcuts /settings/shortcuts 自定义键盘快捷键
Messages /settings/messages 查看历史消息记录

4.2.3 Admin Page（管理员页面）

  • 仅管理员可见 （autoLogin 模式下隐藏）
  • 路径：/admin
  • 功能：用户管理（查看/添加/编辑/删除用户）

4.2.4 Documentation（文档）

  • 外部链接，新标签页打开
  • OSS 版：https://docs.langflow.org
  • DataStax 版：DataStax 文档站

4.2.5 GitHub / Discord / Twitter

链接 URL 说明
GitHub github.com/langflow-ai/langflow ⭐ Star 项目
Discord discord.com/invite/EqksyE2EX9 加入社区讨论
Twitter/X x.com/langflow_ai 关注最新动态

三个链接均在新标签页打开，不会影响当前页面。

4.2.6 Theme（主题切换）

  • 提供 暗色模式 和 亮色模式 切换
  • 点击对应图标即时切换，无需刷新
  • 主题偏好会本地持久化

4.2.7 Logout（退出登录）

  • 点击退出当前账户
  • 跳转回登录页面
  • 注意 ：autoLogin 模式下此按钮会被隐藏
热门推荐
012026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf02GitHub 镜像站点03【AI】2026 年具身智能模型和世界模型总结04AI科技热点日报 | 2026年07月01日052026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？062026年6月AI大模型全景报告：GPT-5.6、Claude Opus 4.8、Gemini 3.5，中美AI三足鼎立谁主沉浮？072026 年 AI 大模型 & AI 编程工具实战全总结08Claude Code、Codex、Cursor三分天下：2026年AI编程Agent生态全景剖析09Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费102026年6月AI行业全景：从百模大战到Agent元年，这30天发生了什么？