feat(settings): add settings pages and layout with routing

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 (
+    <AuthGuard>
+      <AppRoutes />
+    </AuthGuard>
+  );
+}
 
 /**
  * 封装MaterialUIApp，将主题、基础样式和路由包裹起来
@@ -19,9 +31,7 @@ function MaterialUIApp() {
       <SnackbarProvider>
         <DialogProvider>
           <BrowserRouter>
-            <AuthGuard>
-              <AppRoutes />
-            </AuthGuard>
+            <AuthorizationApp />
           </BrowserRouter>
         </DialogProvider>
       </SnackbarProvider>

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<AuthGuardProps> = ({ children }) => {
   }
 
   // 已认证，渲染子组件
-  return <>{children}</>;
+  return (
+    <UserDataProvider>
+      {children}
+    </UserDataProvider>
+  );
 };
 
 export default AuthGuard;

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 | HTMLElement>(null);
   const open = Boolean(anchorEl);
+  const navigate = useNavigate();
 
   const handleAvatarClick = (event: React.MouseEvent<HTMLElement>) => {
     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 = () => {
           </Box>
 
           {/* 菜单项 */}
-          <MenuItem onClick={handleClose} sx={{ py: 1 }}>
+          <MenuItem onClick={handleProfileClick} sx={{ py: 1 }}>
             <ListItemIcon>
               <PersonIcon fontSize="small" />
             </ListItemIcon>

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 (
-    <UserDataProvider>
-      <LayoutContainer>
-        <Sidebar />
-        <MainContent>
-          <Header />
-          <ContentArea>
-            <Outlet />
-          </ContentArea>
-        </MainContent>
-      </LayoutContainer>
-    </UserDataProvider>
+    <LayoutContainer>
+      <Sidebar />
+      <MainContent>
+        <Header />
+        <ContentArea>
+          <Outlet />
+        </ContentArea>
+      </MainContent>
+    </LayoutContainer>
   );
 };
 

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 (
+    <LayoutContainer>
+      <Outlet />
+    </LayoutContainer>
+  );
+}
+
+export default SettingLayout;

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';

src/pages/setting/mcp.tsx

@@ -0,0 +1,8 @@
+function MCPSetting() {
+  return (
+    <div>
+      <h1>MCP Setting</h1>
+    </div>
+  );
+}
+export default MCPSetting;

src/pages/setting/models.tsx

@@ -0,0 +1,9 @@
+function ModelsSetting() {
+  return (
+    <div>
+      <h1>Model Setting</h1>
+    </div>
+  );
+}
+
+export default ModelsSetting;

src/pages/setting/profile.tsx

@@ -0,0 +1,9 @@
+function ProfileSetting() {
+  return (
+    <div>
+      <h1>Profile Setting</h1>
+    </div>
+  );
+}
+
+export default ProfileSetting;

src/pages/setting/system.tsx

@@ -0,0 +1,9 @@
+function SystemSetting() {
+  return (
+    <div>
+      <h1>System Setting</h1>
+    </div>
+  );
+}
+
+export default SystemSetting;

src/pages/setting/teams.tsx

@@ -0,0 +1,9 @@
+function TeamsSetting() {
+  return (
+    <div>
+      <h1>Teams Setting</h1>
+    </div>
+  );
+}
+
+export default TeamsSetting;

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 = () => {
         {/* 文档预览页面路由 */}
         <Route path="document-preview/:kb_id/:doc_id" element={<DocumentPreview />} />
       </Route>
+      {/* setting 相关路由 */}
+      <Route path="setting" element={<SettingLayout />}>
+        <Route index element={<ModelsSetting />} />
+        <Route path="models" element={<ModelsSetting />} />
+        <Route path="system" element={<SystemSetting />} />
+        <Route path="teams" element={<TeamsSetting />} />
+        <Route path="profile" element={<ProfileSetting />} />
+        <Route path="mcp" element={<MCPSetting />} />
+      </Route>
 
       {/* 处理未匹配的路由 */}
       <Route path="*" element={<Navigate to="/" replace />} />