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

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

1. Projects（项目管理）

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

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

1.1 面板结构

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

1.2 标题栏按钮

1.3 项目右侧 ⋯

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

1.4 Flows Tab（Flow 列表标签页）

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

页面布局：

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

工具栏功能：

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栏：

功能详解：

支持的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 知识库操作

2.3 知识库状态

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 文件操作

3.3 文件图标映射

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

3.4 文件在 Flow 中的使用

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

4. 顶部导航栏

4.1 通知中心（Notifications）

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

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

通知指示器

• 灰色铃铛— 无未读通知
• 红色圆点— 有新的未读通知（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，包含以下子设置：

4.2.3 Admin Page（管理员页面）

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

4.2.4 Documentation（文档）

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

4.2.5 GitHub / Discord / Twitter

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

4.2.6 Theme（主题切换）

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

4.2.7 Logout（退出登录）

• 点击退出当前账户
• 跳转回登录页面
• 注意：autoLogin模式下此按钮会被隐藏