Implementation:Infiniflow Ragflow Admin NavigationLayout Component

Knowledge Sources	Infiniflow_Ragflow
Domains	Frontend, Admin
Last Updated	2026-02-12 06:00 GMT

Overview

Admin panel layout component with sidebar navigation, version display, and authenticated route wrapping.

Description

The admin/layouts/navigation-layout.tsx component provides the shell layout for all admin pages. It renders a sidebar with navigation links to admin sections (users, roles, whitelist, service status, sandbox settings), fetches and displays the current RAGFlow version, and wraps child routes with authentication guards to ensure only authorized admin users can access the panel.

Usage

Used as the layout wrapper for all admin panel routes in the routes configuration.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/pages/admin/layouts/navigation-layout.tsx
• Lines: 1-154

Signature

export default function NavigationLayout(): JSX.Element;

Import

import NavigationLayout from '@/pages/admin/layouts/navigation-layout';

I/O Contract

Inputs

Name	Type	Required	Description
children	React.ReactNode	Yes	Child route components rendered in the main content area

Outputs

Name	Type	Description
Rendered component	JSX.Element	Admin layout with sidebar navigation and version fetch

Usage Examples

// In routes.tsx layout configuration:
{ path: '/admin', component: '@/pages/admin/layouts/navigation-layout',
  routes: [
    { path: '/admin/users', component: '@/pages/admin/users' },
    // ...
  ]
}

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment