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

文章目录1. Projects项目管理1.1 面板结构1.2 标题栏按钮1.3 项目右侧 ⋯1.4 Flows TabFlow 列表标签页1.5 MCP Server TabMCP 服务标签页2. Knowledge Bases知识库2.1 页面结构2.2 知识库操作2.3 知识库状态2.4 详情 Drawer抽屉面板2.5 与 Flow 的连接3. My Files文件管理3.1 页面结构3.2 文件操作3.3 文件图标映射3.4 文件在 Flow 中的使用4. 顶部导航栏4.1 通知中心Notifications4.2 用户头像菜单4.2.1 Version版本信息4.2.2 Settings设置4.2.3 Admin Page管理员页面4.2.4 Documentation文档4.2.5 GitHub / Discord / Twitter4.2.6 Theme主题切换4.2.7 Logout退出登录本文档聚焦首页左侧菜单、用户头像菜单、通知中心等功能不涉及画布编辑器。1. Projects项目管理位置左侧边栏顶部标题ProjectsProjects是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 导出为 JSONDelete️ Trash2删除项目仅删除文件夹Flow 不丢失1.4 Flows TabFlow 列表标签页点击左侧某个项目后主内容区顶部的FlowsTab显示当前项目中的所有AI工作流。页面布局┌──────────────────────────────────────────────────────────┐ │ 项目名称 │ │ ──────────────────────────────────────────────────────── │ │ [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 点击范围选择从上次选中到当前点击之间的所有 FlowCtrl/Cmd 点击多选/取消单个 Flow选中后顶部工具栏自动滑出「下载」和「删除」按钮拖拽操作将Flow卡片拖拽到左侧其他项目实现跨项目移动将外部.json文件拖入主区域自动导入为Flow1.5 MCP Server TabMCP 服务标签页MCP Tab 功能将当前项目中的Flow暴露为MCP(Model Context Protocol) 工具供外部AI客户端如Claude Desktop、VS Code、Cursor等调用。当ENABLE_MCPtrue时默认开启点击左侧某个项目后主内容区顶部会出现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 CodeVS 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×500px4.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 KeyDatabase Providers/settings/db-providers外部数据库连接配置MCP Servers/settings/mcp-serversMCP 服务器管理MCP Client/settings/mcp-clientMCP 客户端连接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.orgDataStax版DataStax文档站4.2.5 GitHub / Discord / Twitter链接URL说明GitHubgithub.com/langflow-ai/langflow⭐ Star 项目Discorddiscord.com/invite/EqksyE2EX9加入社区讨论Twitter/Xx.com/langflow_ai关注最新动态三个链接均在新标签页打开不会影响当前页面。4.2.6 Theme主题切换提供暗色模式和亮色模式切换点击对应图标即时切换无需刷新主题偏好会本地持久化4.2.7 Logout退出登录点击退出当前账户跳转回登录页面注意autoLogin模式下此按钮会被隐藏