pengjunjie/ragflow
1
0
Fork 1
mirror of https://github.com/infiniflow/ragflow.git synced 2025-12-08 12:32:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Switch the root route to the new page #3221 (#9560)

Browse Source 
### What problem does this PR solve?

Feat: Switch the root route to the new page #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu
2025-08-19 17:41:03 +08:00
committed by GitHub
parent d5729e598f
commit b8bfbac2e5
12 changed files with 265 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
web/src/hooks/logic-hooks/navigate-hooks.ts
View File

@ -24,13 +24,17 @@ export const useNavigatePage = () => {
);
const navigateToHome = useCallback(() => {
navigate(Routes.Home);
navigate(Routes.Root);
}, [navigate]);
const navigateToProfile = useCallback(() => {
navigate(Routes.ProfileSetting);
}, [navigate]);
const navigateToOldProfile = useCallback(() => {
navigate(Routes.UserSetting);
}, [navigate]);
const navigateToChatList = useCallback(() => {
navigate(Routes.Chats);
}, [navigate]);
@ -139,5 +143,6 @@ export const useNavigatePage = () => {
navigateToSearch,
navigateToFiles,
navigateToAgentList,
navigateToOldProfile,
};
};

35
web/src/layouts/next-header.tsx
View File

@ -40,7 +40,7 @@ export function Header() {
const { t } = useTranslation();
const { pathname } = useLocation();
const navigate = useNavigateWithFromState();
const { navigateToProfile } = useNavigatePage();
const { navigateToOldProfile } = useNavigatePage();
const changeLanguage = useChangeLanguage();
const { setTheme, theme } = useTheme();
@ -74,7 +74,7 @@ export function Header() {
const tagsData = useMemo(
() => [
{ path: Routes.Home, name: t('header.home'), icon: House },
{ path: Routes.Root, name: t('header.Root'), icon: House },
{ path: Routes.Datasets, name: t('header.dataset'), icon: Library },
{ path: Routes.Chats, name: t('header.chat'), icon: MessageSquareText },
{ path: Routes.Searches, name: t('header.search'), icon: Search },
@ -90,7 +90,7 @@ export function Header() {
return {
label:
tag.path === Routes.Home ? (
tag.path === Routes.Root ? (
<HeaderIcon className="size-6"></HeaderIcon>
) : (
<span>{tag.name}</span>
@ -100,18 +100,18 @@ export function Header() {
});
}, [tagsData]);
const currentPath = useMemo(() => {
return (
tagsData.find((x) => pathname.startsWith(x.path))?.path || Routes.Home
);
}, [pathname, tagsData]);
// const currentPath = useMemo(() => {
// return (
// tagsData.find((x) => pathname.startsWith(x.path))?.path || Routes.Root
// );
// }, [pathname, tagsData]);
const handleChange = (path: SegmentedValue) => {
navigate(path as Routes);
};
const handleLogoClick = useCallback(() => {
navigate(Routes.Home);
navigate(Routes.Root);
}, [navigate]);
return (
@ -123,14 +123,19 @@ export function Header() {
className="size-10 mr-[12]"
onClick={handleLogoClick}
/>
<div className="flex items-center gap-1.5 text-text-secondary">
<Github className="size-3.5" />
<span className=" text-base">21.5k stars</span>
</div>
<a
className="flex items-center gap-1.5 text-text-secondary"
target="_blank"
href="https://github.com/infiniflow/ragflow"
rel="noreferrer"
>
<Github className="size-4" />
{/* <span className=" text-base">21.5k stars</span> */}
</a>
</div>
<Segmented
options={options}
value={currentPath}
value={pathname}
onChange={handleChange}
></Segmented>
<div className="flex items-center gap-5 text-text-badge">
@ -160,7 +165,7 @@ export function Header() {
name={nickname}
avatar={avatar}
className="size-8 cursor-pointer"
onClick={navigateToProfile}
onClick={navigateToOldProfile}
></RAGFlowAvatar>
{/* Temporarily hidden */}
{/* <Badge className="h-5 w-8 absolute font-normal p-0 justify-center -right-8 -top-2 text-bg-base bg-gradient-to-l from-[#42D7E7] to-[#478AF5]">

4
web/src/pages/agent/index.tsx
View File

@ -63,7 +63,7 @@ function AgentDropdownMenuItem({
export default function Agent() {
const { id } = useParams();
const { navigateToAgentList } = useNavigatePage();
const { navigateToAgents } = useNavigatePage();
const {
visible: chatDrawerVisible,
hideModal: hideChatDrawer,
@ -113,7 +113,7 @@ export default function Agent() {
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink onClick={navigateToAgentList}>
<BreadcrumbLink onClick={navigateToAgents}>
Agent
</BreadcrumbLink>
</BreadcrumbItem>

6
web/src/pages/agents/agent-log-page.tsx
View File

@ -44,7 +44,7 @@ const getEndOfToday = (): Date => {
return today;
};
const AgentLogPage: React.FC = () => {
const { navigateToAgentList, navigateToAgent } = useNavigatePage();
const { navigateToAgents, navigateToAgent } = useNavigatePage();
const { flowDetail: agentDetail } = useFetchDataOnMount();
const { id: canvasId } = useParams();
const queryClient = useQueryClient();
@ -210,9 +210,7 @@ const AgentLogPage: React.FC = () => {
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink onClick={navigateToAgentList}>
Agent
</BreadcrumbLink>
<BreadcrumbLink onClick={navigateToAgents}>Agent</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>

6
web/src/pages/agents/agent-templates.tsx
View File

@ -18,7 +18,7 @@ import { TemplateCard } from './template-card';
import { MenuItemKey, SideBar } from './template-sidebar';
export default function AgentTemplates() {
const { navigateToAgentList } = useNavigatePage();
const { navigateToAgents } = useNavigatePage();
const { t } = useTranslation();
const list = useFetchAgentTemplates();
const { loading, setAgent } = useSetAgent();
@ -89,9 +89,7 @@ export default function AgentTemplates() {
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink onClick={navigateToAgentList}>
Agent
</BreadcrumbLink>
<BreadcrumbLink onClick={navigateToAgents}>Agent</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>

10
web/src/pages/home/agent-list.tsx
View File

@ -1,10 +1,18 @@
import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
import { useFetchAgentListByPage } from '@/hooks/use-agent-request';
import { ApplicationCard } from './application-card';
export function Agents() {
const { data } = useFetchAgentListByPage();
const { navigateToAgent } = useNavigatePage();
return data
.slice(0, 10)
.map((x) => <ApplicationCard key={x.id} app={x}></ApplicationCard>);
.map((x) => (
<ApplicationCard
key={x.id}
app={x}
onClick={navigateToAgent(x.id)}
></ApplicationCard>
));
}

5
web/src/pages/home/application-card.tsx
View File

@ -10,11 +10,12 @@ type ApplicationCardProps = {
title: string;
update_time: number;
};
onClick?(): void;
};
export function ApplicationCard({ app }: ApplicationCardProps) {
export function ApplicationCard({ app, onClick }: ApplicationCardProps) {
return (
<Card className="w-[264px]">
<Card className="w-[264px]" onClick={onClick}>
<CardContent className="p-2.5 group flex justify-between">
<div className="flex items-center gap-2.5">
<RAGFlowAvatar

21
web/src/pages/home/chat-list.tsx
View File

@ -1,15 +1,20 @@
import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
import { useFetchDialogList } from '@/hooks/use-chat-request';
import { ApplicationCard } from './application-card';
export function ChatList() {
const { data } = useFetchDialogList();
const { navigateToChat } = useNavigatePage();
return data.dialogs
.slice(0, 10)
.map((x) => (
<ApplicationCard
key={x.id}
app={{ avatar: x.icon, title: x.name, update_time: x.update_time }}
></ApplicationCard>
));
return data.dialogs.slice(0, 10).map((x) => (
<ApplicationCard
key={x.id}
app={{
avatar: x.icon,
title: x.name,
update_time: x.update_time,
}}
onClick={navigateToChat(x.id)}
></ApplicationCard>
));
}

21
web/src/pages/home/search-list.tsx
View File

@ -1,15 +1,20 @@
import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
import { useFetchSearchList } from '../next-searches/hooks';
import { ApplicationCard } from './application-card';
export function SearchList() {
const { data } = useFetchSearchList();
const { navigateToSearch } = useNavigatePage();
return data?.data.search_apps
.slice(0, 10)
.map((x) => (
<ApplicationCard
key={x.id}
app={{ avatar: x.avatar, title: x.name, update_time: x.update_time }}
></ApplicationCard>
));
return data?.data.search_apps.slice(0, 10).map((x) => (
<ApplicationCard
key={x.id}
app={{
avatar: x.avatar,
title: x.name,
update_time: x.update_time,
}}
onClick={() => navigateToSearch(x.id)}
></ApplicationCard>
));
}

4
web/src/pages/login/index.tsx
View File

@ -36,7 +36,7 @@ const Login = () => {
const { isLogin } = useAuth();
useEffect(() => {
if (isLogin) {
navigate('/knowledge');
navigate('/');
}
}, [isLogin, navigate]);
@ -68,7 +68,7 @@ const Login = () => {
password: rsaPassWord,
});
if (code === 0) {
navigate('/knowledge');
navigate('/');
}
} else {
const code = await register({

43
web/src/pages/user-setting/index.tsx
View File

@ -2,16 +2,49 @@ import { Flex } from 'antd';
import { Outlet } from 'umi';
import SideBar from './sidebar';
import { PageHeader } from '@/components/page-header';
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from '@/components/ui/breadcrumb';
import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
import { cn } from '@/lib/utils';
import { House } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import styles from './index.less';
const UserSetting = () => {
const { t } = useTranslation();
const { navigateToHome } = useNavigatePage();
return (
<Flex className={styles.settingWrapper}>
<SideBar></SideBar>
<Flex flex={1} className={styles.outletWrapper}>
<Outlet></Outlet>
<section>
<PageHeader>
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink onClick={navigateToHome}>
<House className="size-4" />
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>{t('setting.profile')}</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</PageHeader>
<Flex className={cn(styles.settingWrapper, '-translate-y-6')}>
<SideBar></SideBar>
<Flex flex={1} className={styles.outletWrapper}>
<Outlet></Outlet>
</Flex>
</Flex>
</Flex>
</section>
);
};

267
web/src/routes.ts
View File

@ -1,4 +1,5 @@
export enum Routes {
Root = '/',
Login = '/login',
Logout = '/logout',
Home = '/home',
@ -40,6 +41,7 @@ export enum Routes {
AgentLogPage = '/agent-log-page',
AgentShare = '/agent/share',
ChatShare = `${Chats}/share`,
UserSetting = '/user-setting',
}
const routes = [
@ -68,116 +70,116 @@ const routes = [
component: `@/pages${Routes.AgentShare}`,
layout: false,
},
{
path: '/',
component: '@/layouts',
layout: false,
wrappers: ['@/wrappers/auth'],
routes: [
{ path: '/', redirect: '/knowledge' },
{
path: '/knowledge',
component: '@/pages/knowledge',
// component: '@/pages/knowledge/datasets',
},
{
path: '/knowledge',
component: '@/pages/add-knowledge',
routes: [
{
path: '/knowledge/dataset',
component: '@/pages/add-knowledge/components/knowledge-dataset',
routes: [
{
path: '/knowledge/dataset',
component: '@/pages/add-knowledge/components/knowledge-file',
},
{
path: '/knowledge/dataset/chunk',
component: '@/pages/add-knowledge/components/knowledge-chunk',
},
],
},
{
path: '/knowledge/configuration',
component: '@/pages/add-knowledge/components/knowledge-setting',
},
{
path: '/knowledge/testing',
component: '@/pages/add-knowledge/components/knowledge-testing',
},
{
path: '/knowledge/knowledgeGraph',
component: '@/pages/add-knowledge/components/knowledge-graph',
},
],
},
{
path: '/chat',
component: '@/pages/chat',
},
{
path: '/user-setting',
component: '@/pages/user-setting',
routes: [
{ path: '/user-setting', redirect: '/user-setting/profile' },
{
path: '/user-setting/profile',
// component: '@/pages/user-setting/setting-profile',
component: '@/pages/user-setting/setting-profile',
},
{
path: '/user-setting/locale',
component: '@/pages/user-setting/setting-locale',
},
{
path: '/user-setting/password',
component: '@/pages/user-setting/setting-password',
},
{
path: '/user-setting/model',
component: '@/pages/user-setting/setting-model',
},
{
path: '/user-setting/team',
component: '@/pages/user-setting/setting-team',
},
{
path: '/user-setting/system',
component: '@/pages/user-setting/setting-system',
},
{
path: '/user-setting/api',
component: '@/pages/user-setting/setting-api',
},
{
path: `/user-setting${Routes.Mcp}`,
component: `@/pages${Routes.ProfileMcp}`,
},
],
},
{
path: '/file',
component: '@/pages/file-manager',
},
{
path: '/flow',
component: '@/pages/flow/list',
},
{
path: Routes.AgentList,
component: `@/pages/${Routes.Agents}`,
},
{
path: '/flow/:id',
component: '@/pages/flow',
},
{
path: '/search',
component: '@/pages/search',
},
],
},
// {
// path: '/',
// component: '@/layouts',
// layout: false,
// wrappers: ['@/wrappers/auth'],
// routes: [
// { path: '/', redirect: '/knowledge' },
// {
// path: '/knowledge',
// component: '@/pages/knowledge',
// // component: '@/pages/knowledge/datasets',
// },
// {
// path: '/knowledge',
// component: '@/pages/add-knowledge',
// routes: [
// {
// path: '/knowledge/dataset',
// component: '@/pages/add-knowledge/components/knowledge-dataset',
// routes: [
// {
// path: '/knowledge/dataset',
// component: '@/pages/add-knowledge/components/knowledge-file',
// },
// {
// path: '/knowledge/dataset/chunk',
// component: '@/pages/add-knowledge/components/knowledge-chunk',
// },
// ],
// },
// {
// path: '/knowledge/configuration',
// component: '@/pages/add-knowledge/components/knowledge-setting',
// },
// {
// path: '/knowledge/testing',
// component: '@/pages/add-knowledge/components/knowledge-testing',
// },
// {
// path: '/knowledge/knowledgeGraph',
// component: '@/pages/add-knowledge/components/knowledge-graph',
// },
// ],
// },
// {
// path: '/chat',
// component: '@/pages/chat',
// },
// {
// path: '/user-setting',
// component: '@/pages/user-setting',
// routes: [
// { path: '/user-setting', redirect: '/user-setting/profile' },
// {
// path: '/user-setting/profile',
// // component: '@/pages/user-setting/setting-profile',
// component: '@/pages/user-setting/setting-profile',
// },
// {
// path: '/user-setting/locale',
// component: '@/pages/user-setting/setting-locale',
// },
// {
// path: '/user-setting/password',
// component: '@/pages/user-setting/setting-password',
// },
// {
// path: '/user-setting/model',
// component: '@/pages/user-setting/setting-model',
// },
// {
// path: '/user-setting/team',
// component: '@/pages/user-setting/setting-team',
// },
// {
// path: '/user-setting/system',
// component: '@/pages/user-setting/setting-system',
// },
// {
// path: '/user-setting/api',
// component: '@/pages/user-setting/setting-api',
// },
// {
// path: `/user-setting${Routes.Mcp}`,
// component: `@/pages${Routes.ProfileMcp}`,
// },
// ],
// },
// {
// path: '/file',
// component: '@/pages/file-manager',
// },
// {
// path: '/flow',
// component: '@/pages/flow/list',
// },
// {
// path: Routes.AgentList,
// component: `@/pages/${Routes.Agents}`,
// },
// {
// path: '/flow/:id',
// component: '@/pages/flow',
// },
// {
// path: '/search',
// component: '@/pages/search',
// },
// ],
// },
{
path: '/document/:id',
component: '@/pages/document-viewer',
@ -189,12 +191,12 @@ const routes = [
layout: false,
},
{
path: Routes.Home,
path: Routes.Root,
layout: false,
component: '@/layouts/next',
routes: [
{
path: Routes.Home,
path: Routes.Root,
component: `@/pages${Routes.Home}`,
},
],
@ -382,6 +384,47 @@ const routes = [
},
],
},
{
path: '/user-setting',
component: '@/pages/user-setting',
layout: false,
routes: [
{ path: '/user-setting', redirect: '/user-setting/profile' },
{
path: '/user-setting/profile',
// component: '@/pages/user-setting/setting-profile',
component: '@/pages/user-setting/setting-profile',
},
{
path: '/user-setting/locale',
component: '@/pages/user-setting/setting-locale',
},
{
path: '/user-setting/password',
component: '@/pages/user-setting/setting-password',
},
{
path: '/user-setting/model',
component: '@/pages/user-setting/setting-model',
},
{
path: '/user-setting/team',
component: '@/pages/user-setting/setting-team',
},
{
path: '/user-setting/system',
component: '@/pages/user-setting/setting-system',
},
{
path: '/user-setting/api',
component: '@/pages/user-setting/setting-api',
},
{
path: `/user-setting${Routes.Mcp}`,
component: `@/pages${Routes.ProfileMcp}`,
},
],
},
];
export default routes;