RagFlow前端界面修改：删除或隐藏功能实现指南-牛站云

RagFlow作为一款开源知识库问答与检索增强生成（RAG）平台，默认提供了较为完整的前端功能，包括知识库管理、文档处理、模型配置、用户权限、聊天窗口等模块。但在实际企业部署过程中，很多团队并不需要全部功能，例如只开放给内部员工使用时，可能希望隐藏模型配置入口；作为二次开发项目时，也可能需要删除一些默认页面或调整交互逻辑。

通过修改RagFlow前端代码，可以实现功能删除、菜单隐藏、页面权限控制以及界面定制，从而打造更加符合业务需求的专属版本。

RagFlow前端项目结构分析

RagFlow前端通常采用React技术栈开发，源码主要位于项目的前端目录中。不同版本目录结构可能略有差异，但核心模块基本类似。

常见目录结构如下：


web/
├── src/
│   ├── components/
│   ├── pages/
│   ├── routes/
│   ├── services/
│   ├── layouts/
│   ├── hooks/
│   └── utils/
├── package.json
└── vite.config.ts

其中：

pages：存放主要业务页面，例如知识库、聊天、设置等。
routes：负责前端路由配置。
components：公共组件，例如菜单、按钮、弹窗。
layouts：页面整体布局。
services：前后端接口请求封装。

修改RagFlow前端功能时，通常需要重点关注三个位置：

左侧导航菜单配置。
页面路由注册。
页面组件代码。

删除RagFlow前端菜单功能

如果只是希望用户看不到某个功能入口，最简单的方法是修改菜单配置。

例如RagFlow后台可能存在类似：

JavaScript
const menus = [
  {
    name: 'Knowledge Base',
    path: '/knowledge'
  },
  {
    name: 'Model Setting',
    path: '/model'
  },
  {
    name: 'User Management',
    path: '/user'
  }
]

如果不希望显示模型配置，可以直接删除：

JavaScript
const menus = [
  {
    name: 'Knowledge Base',
    path: '/knowledge'
  },
  {
    name: 'User Management',
    path: '/user'
  }
]

重新启动前端后，导航栏中的对应入口就会消失。

这种方式适合：

普通用户不需要看到高级配置。
企业内部系统隐藏管理员功能。
产品版本区分。

不过需要注意，仅隐藏菜单并不代表功能完全关闭。如果用户知道具体URL，仍然可能直接访问页面。

修改路由实现功能彻底隐藏

如果需要禁止访问某个页面，需要进一步修改路由配置。

例如：

JavaScript
{
  path: '/model',
  element:  />
}

删除该路由：

JavaScript
const routes = [
  {
    path: '/knowledge',
    element:  />
  }
]

访问：


http://domain.com/model

时就不会再加载对应页面。

这种方式比删除菜单更加彻底。

适合：

不希望普通用户访问管理页面。
发布精简版RagFlow。
二次开发商业系统。

使用权限控制隐藏不同用户功能

企业环境中，更推荐采用权限控制方式，而不是直接删除代码。

例如根据用户角色动态生成菜单：

JavaScript
const menuList = [
  {
    name: '模型管理',
    path: '/model',
    permission: 'admin'
  },
  {
    name: '知识库',
    path: '/knowledge',
    permission: 'user'
  }
]

然后根据权限过滤：

JavaScript
const visibleMenus = menuList.filter(item => {
  return user.permissions.includes(item.permission)
})

最终效果：

管理员：


知识库
模型管理
用户管理

普通用户：


知识库

这种方案更加适合生产环境，因为不会影响代码结构，也方便后期扩展。

删除页面中的具体按钮或功能

除了隐藏整个页面，有时只需要删除某个按钮。

例如聊天页面中存在：

JavaScript

  导出对话

如果不需要导出功能，可以删除：

JavaScript

  导出对话

或者通过条件控制：

JavaScript
{
 user.isAdmin &&
 
   导出对话
 
}

这样可以保留代码，同时控制展示逻辑。

修改RagFlow前端Logo和品牌信息

很多企业部署RagFlow后，会进行品牌替换。

常见修改位置包括：

Logo图片。
系统名称。
页面标题。
登录页面信息。

例如：

JavaScript
</span><span>RagFlow</span><span class="ͼo">

修改为：

JavaScript
</span><span>企业智能知识助手</span><span class="ͼo">

Logo文件通常位于：


src/assets/

替换对应图片即可。

完成后重新构建：

Bash
npm run build

生成新的前端静态文件。

删除不需要的依赖和组件

如果进行了大量功能裁剪，可以进一步清理代码。

例如：

删除组件：


src/components/UnusedComponent.tsx

删除引用：

JavaScript
import UnusedComponent from './UnusedComponent'

同时检查：

npm依赖。
CSS样式。
国际化文件。
API接口。

避免留下无效代码。

修改完成后的前端重新部署

RagFlow前端修改后，需要重新打包。

进入前端目录：

Bash
cd web

安装依赖：

Bash
npm install

执行构建：

Bash
npm run build

成功后会生成：


dist/

目录。

如果使用Nginx部署：

Nginx
server {

    listen 80;

    location / {
        root /data/ragflow/web/dist;
        index index.html;
    }

}

重新加载：

Bash
nginx -s reload

即可看到修改后的界面。

修改RagFlow前端时需要注意的问题

1. 不建议直接修改源码后长期维护

如果RagFlow持续升级，直接修改源码容易产生冲突。

建议：

使用Git保存修改记录。
单独维护自己的分支。
记录修改文件位置。

例如：


ragflow-custom
      |
      ├── 原始代码
      └── 企业定制修改

方便后续版本合并。

2. 前端隐藏不等于安全控制

很多开发人员容易忽略：

隐藏菜单：


用户看不到

并不代表：


用户无法调用接口

真正安全控制应该同时修改：

前端显示逻辑。
后端接口权限。
用户角色管理。

例如模型管理接口：


/api/model/list

仍然需要后端验证权限。

3. 修改前做好备份

建议修改前执行：

Bash
git checkout -b ragflow-custom

创建独立开发分支。

出现问题时可以快速恢复：

Bash
git checkout main

RagFlow前端定制的常见应用场景

企业知识库系统

企业通常只需要：

文档上传。
知识检索。
AI问答。

可以隐藏：

模型管理。
系统配置。
调试工具。

SaaS产品二次开发

如果基于RagFlow开发商业产品，可以：

修改品牌。
删除默认入口。
增加业务模块。
定制用户权限。

内部AI助手平台

企业内部员工使用时，可以设计成：

普通员工：


智能问答
知识搜索
历史记录