From 73510a3b74b0a9b15be29ffbdd341289e8f753bb Mon Sep 17 00:00:00 2001 From: "guangfei.zhao" Date: Mon, 20 Oct 2025 18:25:44 +0800 Subject: [PATCH] feat(settings): add settings pages and layout with routing --- src/App.tsx | 16 ++++++++++--- src/components/AuthGuard.tsx | 7 +++++- src/components/Layout/Header.tsx | 9 +++++++- src/components/Layout/MainLayout.tsx | 21 ++++++++--------- src/components/Layout/SettingLayout.tsx | 17 ++++++++++++++ src/pages/setting/index.tsx | 5 +++++ src/pages/setting/mcp.tsx | 8 +++++++ src/pages/setting/models.tsx | 9 ++++++++ src/pages/setting/profile.tsx | 9 ++++++++ src/pages/setting/system.tsx | 9 ++++++++ src/pages/setting/teams.tsx | 9 ++++++++ src/routes/index.tsx | 30 +++++++++++++++++++++---- 12 files changed, 128 insertions(+), 21 deletions(-) create mode 100644 src/components/Layout/SettingLayout.tsx create mode 100644 src/pages/setting/index.tsx create mode 100644 src/pages/setting/mcp.tsx create mode 100644 src/pages/setting/models.tsx create mode 100644 src/pages/setting/profile.tsx create mode 100644 src/pages/setting/system.tsx create mode 100644 src/pages/setting/teams.tsx diff --git a/src/App.tsx b/src/App.tsx index 1daf5cc..52850a1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -8,6 +8,18 @@ import AuthGuard from './components/AuthGuard'; import './locales'; import './utils/request' +import UserDataProvider from './components/Provider/UserDataProvider'; + +/** + * 授权应用，包含路由守卫和用户数据提供器 + */ +function AuthorizationApp() { + return ( + + + + ); +} /** * 封装MaterialUIApp，将主题、基础样式和路由包裹起来 @@ -19,9 +31,7 @@ function MaterialUIApp() { - - - + diff --git a/src/components/AuthGuard.tsx b/src/components/AuthGuard.tsx index 34ef344..4f72543 100644 --- a/src/components/AuthGuard.tsx +++ b/src/components/AuthGuard.tsx @@ -1,6 +1,7 @@ import React, { useEffect } from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; import { CircularProgress, Box } from '@mui/material'; +import UserDataProvider from './Provider/UserDataProvider'; interface AuthGuardProps { children: React.ReactNode; @@ -46,7 +47,11 @@ const AuthGuard: React.FC = ({ children }) => { } // 已认证，渲染子组件 - return <>{children}; + return ( + + {children} + + ); }; export default AuthGuard; \ No newline at end of file diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx index 5b89112..f19b3bd 100644 --- a/src/components/Layout/Header.tsx +++ b/src/components/Layout/Header.tsx @@ -16,11 +16,13 @@ import LogoutIcon from '@mui/icons-material/Logout'; import PersonIcon from '@mui/icons-material/Person'; import LanguageSwitcher from '../LanguageSwitcher'; import { useAuth } from '@/hooks/login-hooks'; +import { useNavigate } from 'react-router-dom'; const Header = () => { const { userInfo, logout } = useAuth(); const [anchorEl, setAnchorEl] = useState(null); const open = Boolean(anchorEl); + const navigate = useNavigate(); const handleAvatarClick = (event: React.MouseEvent) => { setAnchorEl(event.currentTarget); @@ -30,6 +32,11 @@ const Header = () => { setAnchorEl(null); }; + const handleProfileClick = () => { + navigate('/setting/profile'); + setAnchorEl(null); + }; + const handleLogout = () => { logout(); handleClose(); @@ -179,7 +186,7 @@ const Header = () => { {/* 菜单项 */} - + diff --git a/src/components/Layout/MainLayout.tsx b/src/components/Layout/MainLayout.tsx index 69fab2d..91f4027 100644 --- a/src/components/Layout/MainLayout.tsx +++ b/src/components/Layout/MainLayout.tsx @@ -2,7 +2,6 @@ import { Box, styled } from '@mui/material'; import { Outlet } from 'react-router-dom'; import Header from './Header'; import Sidebar from './Sidebar'; -import UserDataProvider from '../Provider/UserDataProvider'; const LayoutContainer = styled(Box)({ display: 'flex', @@ -25,17 +24,15 @@ const ContentArea = styled(Box)({ const MainLayout = () => { return ( - - - - -
- - - - - - + + + +
+ + + + + ); }; diff --git a/src/components/Layout/SettingLayout.tsx b/src/components/Layout/SettingLayout.tsx new file mode 100644 index 0000000..fb4e4c7 --- /dev/null +++ b/src/components/Layout/SettingLayout.tsx @@ -0,0 +1,17 @@ +import { Box, styled } from "@mui/material"; +import { Outlet } from "react-router-dom"; + +const LayoutContainer = styled(Box)({ + display: 'flex', + height: '100vh', +}); + +function SettingLayout() { + return ( + + + + ); +} + +export default SettingLayout; \ No newline at end of file diff --git a/src/pages/setting/index.tsx b/src/pages/setting/index.tsx new file mode 100644 index 0000000..6b56cd4 --- /dev/null +++ b/src/pages/setting/index.tsx @@ -0,0 +1,5 @@ +export { default as ModelsSetting } from './models'; +export { default as SystemSetting } from './system'; +export { default as TeamsSetting } from './teams'; +export { default as ProfileSetting } from './profile'; +export { default as MCPSetting } from './mcp'; diff --git a/src/pages/setting/mcp.tsx b/src/pages/setting/mcp.tsx new file mode 100644 index 0000000..e848a81 --- /dev/null +++ b/src/pages/setting/mcp.tsx @@ -0,0 +1,8 @@ +function MCPSetting() { + return ( +
+

MCP Setting

+
+ ); +} +export default MCPSetting; diff --git a/src/pages/setting/models.tsx b/src/pages/setting/models.tsx new file mode 100644 index 0000000..ead1a46 --- /dev/null +++ b/src/pages/setting/models.tsx @@ -0,0 +1,9 @@ +function ModelsSetting() { + return ( +
+

Model Setting

+
+ ); +} + +export default ModelsSetting; \ No newline at end of file diff --git a/src/pages/setting/profile.tsx b/src/pages/setting/profile.tsx new file mode 100644 index 0000000..3563a10 --- /dev/null +++ b/src/pages/setting/profile.tsx @@ -0,0 +1,9 @@ +function ProfileSetting() { + return ( +
+

Profile Setting

+
+ ); +} + +export default ProfileSetting; \ No newline at end of file diff --git a/src/pages/setting/system.tsx b/src/pages/setting/system.tsx new file mode 100644 index 0000000..ade871b --- /dev/null +++ b/src/pages/setting/system.tsx @@ -0,0 +1,9 @@ +function SystemSetting() { + return ( +
+

System Setting

+
+ ); +} + +export default SystemSetting; diff --git a/src/pages/setting/teams.tsx b/src/pages/setting/teams.tsx new file mode 100644 index 0000000..143b1a2 --- /dev/null +++ b/src/pages/setting/teams.tsx @@ -0,0 +1,9 @@ +function TeamsSetting() { + return ( +
+

Teams Setting

+
+ ); +} + +export default TeamsSetting; \ No newline at end of file diff --git a/src/routes/index.tsx b/src/routes/index.tsx index d2a051d..680e49f 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -1,15 +1,28 @@ import { Routes, Route, Navigate } from 'react-router-dom'; import MainLayout from '../components/Layout/MainLayout'; +import SettingLayout from '../components/Layout/SettingLayout'; import Login from '../pages/login/Login'; -import Home from '../pages/Home'; import PipelineConfig from '../pages/PipelineConfig'; import Dashboard from '../pages/Dashboard'; import ModelsResources from '../pages/ModelsResources'; -import { KnowledgeBaseList, KnowledgeBaseCreate, KnowledgeBaseDetail, KnowledgeBaseSetting, KnowledgeBaseTesting } from '../pages/knowledge'; +import { + KnowledgeBaseList, + KnowledgeBaseCreate, + KnowledgeBaseDetail, + KnowledgeBaseSetting, + KnowledgeBaseTesting +} from '../pages/knowledge'; +import { + ModelsSetting, + SystemSetting, + TeamsSetting, + ProfileSetting, + MCPSetting, +} from '../pages/setting'; import MCP from '../pages/MCP'; import FormFieldTest from '../pages/FormFieldTest'; -import ChunkParsedResult from '@/pages/chunk/parsed-result'; -import DocumentPreview from '@/pages/chunk/document-preview'; +import ChunkParsedResult from '../pages/chunk/parsed-result'; +import DocumentPreview from '../pages/chunk/document-preview'; const AppRoutes = () => { return ( @@ -42,6 +55,15 @@ const AppRoutes = () => { {/* 文档预览页面路由 */} } /> + {/* setting 相关路由 */} + }> + } /> + } /> + } /> + } /> + } /> + } /> + {/* 处理未匹配的路由 */} } />