refactor(layout): migrate styled components to sx prop in Header and Sidebar

feat(pages): add new KnowledgeBaseList and Login pages with complete functionality feat(services): implement knowledge service with comprehensive API methods feat(hooks): add login hooks for authentication and form management
2025-10-11 11:31:24 +08:00
parent d6ff547f20
commit 650c41dc41
7 changed files with 450 additions and 125 deletions
--- a/src/components/Layout/Header.tsx
+++ b/src/components/Layout/Header.tsx
@@ -1,72 +1,82 @@
-import { Box, InputBase, styled } from '@mui/material';
+import { Box, InputBase } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
-
-const HeaderContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  padding: '0 20px',
-  height: '60px',
-  backgroundColor: '#FFFFFF',
-  color: '#333',
-  boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
-  borderBottom: '1px solid #E5E5E5',
-}));
-
-const BrandTitle = styled(Box)(({ theme }) => ({
-  fontSize: '1.2rem',
-  fontWeight: 'bold',
-  color: '#333',
-}));
-
-const SearchBox = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  backgroundColor: '#F8F9FA',
-  borderRadius: '6px',
-  padding: '6px 12px',
-  width: '320px',
-  border: '1px solid #E5E5E5',
-  marginLeft: 'auto',
-  marginRight: '20px',
-  '&:focus-within': {
-    borderColor: theme.palette.primary.main,
-    boxShadow: `0 0 0 2px rgba(226,0,116,0.1)`,
-  },
-  '& .MuiInputBase-input': {
-    border: 'none',
-    outline: 'none',
-    backgroundColor: 'transparent',
-    fontSize: '14px',
-    color: '#333',
-    '&::placeholder': {
-      color: '#999',
-    },
-  },
-}));
-
-const SearchInput = styled(InputBase)(({ theme }) => ({
-  marginLeft: '8px',
-  flex: 1,
-  fontSize: '0.875rem',
-}));
-
-const UserAvatar = styled(AccountCircleIcon)(({ theme }) => ({
-  color: '#666',
-  cursor: 'pointer',
-  fontSize: '2rem',
-}));
+import LanguageSwitcher from '../LanguageSwitcher';

 const Header = () => {
  return (
-    <HeaderContainer>
-      <BrandTitle>RAG Dashboard</BrandTitle>
-      <SearchBox>
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        padding: '0 20px',
+        height: '60px',
+        backgroundColor: '#FFFFFF',
+        color: '#333',
+        boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
+        borderBottom: '1px solid #E5E5E5',
+      }}
+    >
+      <Box
+        sx={{
+          fontSize: '1.2rem',
+          fontWeight: 'bold',
+          color: '#333',
+        }}
+      >
+        RAG Dashboard
+      </Box>
+      
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          backgroundColor: '#F8F9FA',
+          borderRadius: '6px',
+          padding: '6px 12px',
+          width: '320px',
+          border: '1px solid #E5E5E5',
+          marginLeft: 'auto',
+          marginRight: '20px',
+          '&:focus-within': {
+            borderColor: 'primary.main',
+            boxShadow: '0 0 0 2px rgba(226,0,116,0.1)',
+          },
+          '& .MuiInputBase-input': {
+            border: 'none',
+            outline: 'none',
+            backgroundColor: 'transparent',
+            fontSize: '14px',
+            color: '#333',
+            '&::placeholder': {
+              color: '#999',
+            },
+          },
+        }}
+      >
        <SearchIcon sx={{ color: '#999', fontSize: '1.2rem' }} />
-        <SearchInput placeholder="Search queries, KB names..." />
-      </SearchBox>
-      <UserAvatar titleAccess="User Profile" />
-    </HeaderContainer>
+        <InputBase
+          sx={{
+            marginLeft: '8px',
+            flex: 1,
+            fontSize: '0.875rem',
+          }}
+          placeholder="Search queries, KB names..."
+        />
+      </Box>
+      
+      <LanguageSwitcher textColor="#333" />
+      
+      <AccountCircleIcon
+        sx={{
+          color: '#666',
+          cursor: 'pointer',
+          fontSize: '2rem',
+          marginLeft: '12px',
+        }}
+        titleAccess="User Profile"
+      />
+    </Box>
  );
 };

--- a/src/components/Layout/Sidebar.tsx
+++ b/src/components/Layout/Sidebar.tsx
@@ -1,72 +1,101 @@
-import { Box, List, ListItem, ListItemButton, ListItemText, Typography, styled } from '@mui/material';
+import { Box, List, ListItemButton, ListItemText, Typography } from '@mui/material';
 import { Link, useLocation } from 'react-router-dom';
-
-const SidebarContainer = styled(Box)(({ theme }) => ({
-  width: '240px',
-  backgroundColor: '#1E1E24',
-  color: '#DDD',
-  height: '100vh',
-  padding: '1rem 0',
-  display: 'flex',
-  flexDirection: 'column',
-}));
-
-const Logo = styled(Typography)(({ theme }) => ({
-  fontSize: '1.05rem',
-  fontWeight: 600,
-  padding: '0 1.25rem 1rem',
-  margin: '0 0 0.5rem',
-  color: '#FFF',
-  letterSpacing: '0.5px',
-}));
-
-const NavItem = styled(ListItemButton)<{ active?: boolean }>(({ active, theme }) => ({
-  color: active ? '#FFF' : '#B9B9C2',
-  backgroundColor: active ? 'rgba(226,0,116,0.12)' : 'transparent',
-  borderLeft: active ? `4px solid ${theme.palette.primary.main}` : '4px solid transparent',
-  fontWeight: active ? 600 : 'normal',
-  '&:hover': {
-    backgroundColor: 'rgba(255,255,255,0.05)',
-    color: '#FFF',
-  },
-  '& .MuiListItemText-primary': {
-    fontSize: '0.9rem',
-  },
-}));
-
-const Footer = styled(Box)(({ theme }) => ({
-  marginTop: 'auto',
-  padding: '20px',
-  fontSize: '0.75rem',
-  opacity: 0.7,
-}));
+import DashboardOutlinedIcon from '@mui/icons-material/DashboardOutlined';
+import LibraryBooksOutlinedIcon from '@mui/icons-material/LibraryBooksOutlined';
+import AccountTreeOutlinedIcon from '@mui/icons-material/AccountTreeOutlined';
+import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
+import StorageOutlinedIcon from '@mui/icons-material/StorageOutlined';
+import ExtensionOutlinedIcon from '@mui/icons-material/ExtensionOutlined';

 const navItems = [
-  { text: 'Overview', path: '/' },
-  { text: 'Knowledge Bases', path: '/kb-list' },
-  { text: 'RAG Pipeline', path: '/pipeline-config' },
-  { text: 'Operations', path: '/dashboard' },
-  { text: 'Models & Resources', path: '/models-resources' },
-  { text: 'MCP', path: '/mcp' },
+  { text: 'Overview', path: '/', icon: DashboardOutlinedIcon },
+  { text: 'Knowledge Bases', path: '/kb-list', icon: LibraryBooksOutlinedIcon },
+  { text: 'RAG Pipeline', path: '/pipeline-config', icon: AccountTreeOutlinedIcon },
+  { text: 'Operations', path: '/dashboard', icon: SettingsOutlinedIcon },
+  { text: 'Models & Resources', path: '/models-resources', icon: StorageOutlinedIcon },
+  { text: 'MCP', path: '/mcp', icon: ExtensionOutlinedIcon },
 ];

 const Sidebar = () => {
  const location = useLocation();

  return (
-    <SidebarContainer>
-      <Logo>RAGflow Prototype</Logo>
+    <Box
+      sx={{
+        width: '240px',
+        backgroundColor: '#1E1E24',
+        color: '#DDD',
+        height: '100vh',
+        padding: '1rem 0',
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      <Typography
+        sx={{
+          fontSize: '1.05rem',
+          fontWeight: 600,
+          padding: '0 1.25rem 1rem',
+          margin: '0 0 0.5rem',
+          color: '#FFF',
+          letterSpacing: '0.5px',
+        }}
+      >
+        RAGflow Prototype
+      </Typography>
+      
      <List>
-        {navItems.map((item) => (
-          <Link to={item.path} style={{ textDecoration: 'none', color: 'inherit' }}>
-            <NavItem active={location.pathname === item.path}>
-              <ListItemText primary={item.text} />
-            </NavItem>
-          </Link>
-        ))}
+        {navItems.map((item) => {
+          const IconComponent = item.icon;
+          const isActive = location.pathname === item.path;
+          
+          return (
+            <Link 
+              key={item.path}
+              to={item.path} 
+              style={{ textDecoration: 'none', color: 'inherit' }}
+            >
+              <ListItemButton
+                sx={{
+                  color: isActive ? '#FFF' : '#B9B9C2',
+                  backgroundColor: isActive ? 'rgba(226,0,116,0.12)' : 'transparent',
+                  borderLeft: isActive ? '4px solid' : '4px solid transparent',
+                  borderLeftColor: isActive ? 'primary.main' : 'transparent',
+                  fontWeight: isActive ? 600 : 'normal',
+                  '&:hover': {
+                    backgroundColor: 'rgba(255,255,255,0.05)',
+                    color: '#FFF',
+                  },
+                  '& .MuiListItemText-primary': {
+                    fontSize: '0.9rem',
+                  },
+                }}
+              >
+                <IconComponent 
+                  sx={{ 
+                    color: 'primary.main',
+                    marginRight: '12px',
+                    fontSize: '1.2rem'
+                  }} 
+                />
+                <ListItemText primary={item.text} />
+              </ListItemButton>
+            </Link>
+          );
+        })}
      </List>
-      <Footer>© 2025 RAG Demo</Footer>
-    </SidebarContainer>
+      
+      <Box
+        sx={{
+          marginTop: 'auto',
+          padding: '20px',
+          fontSize: '0.75rem',
+          opacity: 0.7,
+        }}
+      >
+        © 2025 RAG Demo
+      </Box>
+    </Box>
  );
 };

--- a/src/hooks/login_hooks.ts
+++ b/src/hooks/login_hooks.ts
--- a/src/pages/knowledge/KnowledgeBaseList.tsx
+++ b/src/pages/knowledge/KnowledgeBaseList.tsx
--- a/src/pages/login/Login.tsx
+++ b/src/pages/login/Login.tsx
@@ -16,8 +16,8 @@ import {
  Tabs,
  Tab
 } from '@mui/material';
-import LanguageSwitcher from '../components/LanguageSwitcher';
-import { useLoginPage } from '../hooks/login-hooks';
+import LanguageSwitcher from '../../components/LanguageSwitcher';
+import { useLoginPage } from '../../hooks/login_hooks';

 const Login = () => {
  const { t } = useTranslation();
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,8 +1,8 @@
 import { Routes, Route, Navigate } from 'react-router-dom';
 import MainLayout from '../components/Layout/MainLayout';
-import Login from '../pages/Login';
+import Login from '../pages/login/Login';
 import Home from '../pages/Home';
-import KnowledgeBaseList from '../pages/KnowledgeBaseList';
+import KnowledgeBaseList from '../pages/knowledge/KnowledgeBaseList';
 import PipelineConfig from '../pages/PipelineConfig';
 import Dashboard from '../pages/Dashboard';
 import ModelsResources from '../pages/ModelsResources';
--- a/src/services/knowledge_service.ts
+++ b/src/services/knowledge_service.ts
@@ -0,0 +1,286 @@
+import api from './api';
+import request, { post } from '@/utils/request';
+import type {
+  IFetchKnowledgeListRequestBody,
+  IFetchKnowledgeListRequestParams,
+  IFetchDocumentListRequestBody,
+  ITestRetrievalRequestBody,
+} from '@/interfaces/request/knowledge';
+import type {
+  IKnowledge,
+  IKnowledgeFile,
+  IChunk,
+  IRenameTag,
+  ParserConfig,
+} from '@/interfaces/database/knowledge';
+
+// 知识库相关API服务
+const knowledgeService = {
+  // ===== 知识库管理 =====
+  
+  // 获取知识库列表
+  getKnowledgeList: (
+    params?: IFetchKnowledgeListRequestParams,
+    body?: IFetchKnowledgeListRequestBody
+  ) => {
+    return request.post(api.kb_list, { data: body || {}, params });
+  },
+
+  // 创建知识库
+  createKnowledge: (data: Partial<IKnowledge>) => {
+    return post(api.create_kb, data);
+  },
+
+  // 更新知识库
+  updateKnowledge: (data: Partial<IKnowledge>) => {
+    return post(api.update_kb, data);
+  },
+
+  // 删除知识库
+  removeKnowledge: (data: { kb_id: string }) => {
+    return post(api.rm_kb, data);
+  },
+
+  // 获取知识库详情
+  getKnowledgeDetail: (params: { kb_id: string }) => {
+    return request.get(api.get_kb_detail, { params });
+  },
+
+  // 获取知识库基本信息
+  getKnowledgeBasicInfo: (params: { kb_id: string }) => {
+    return request.get(api.getKnowledgeBasicInfo, { params });
+  },
+
+  // 获取知识库元数据
+  getKnowledgeMeta: (params: { kb_id: string }) => {
+    return request.get(api.getMeta, { params });
+  },
+
+  // ===== 文档管理 =====
+
+  // 获取文档列表
+  getDocumentList: (
+    params?: IFetchKnowledgeListRequestParams,
+    body?: IFetchDocumentListRequestBody
+  ) => {
+    return request.post(api.get_document_list, { data: body || {}, params });
+  },
+
+  // 创建文档
+  createDocument: (data: any) => {
+    return post(api.document_create, data);
+  },
+
+  // 上传文档
+  uploadDocument: (data: FormData) => {
+    return post(api.document_upload, data);
+  },
+
+  // 上传并解析文档
+  uploadAndParseDocument: (data: FormData) => {
+    return post(api.upload_and_parse, data);
+  },
+
+  // 解析文档
+  parseDocument: (data: any) => {
+    return post(api.parse, data);
+  },
+
+  // 重命名文档
+  renameDocument: (data: { doc_id: string; name: string }) => {
+    return post(api.document_rename, data);
+  },
+
+  // 删除文档
+  removeDocument: (data: { doc_ids: string[] }) => {
+    return post(api.document_rm, data);
+  },
+
+  // 删除文档（DELETE方法）
+  deleteDocument: (doc_id: string) => {
+    return request.delete(`${api.document_delete}/${doc_id}`);
+  },
+
+  // 更改文档状态
+  changeDocumentStatus: (data: { doc_ids: string[]; status: string }) => {
+    return post(api.document_change_status, data);
+  },
+
+  // 运行文档处理
+  runDocument: (data: { doc_ids: string[] }) => {
+    return post(api.document_run, data);
+  },
+
+  // 更改文档解析器
+  changeDocumentParser: (data: { doc_id: string; parser_config: ParserConfig }) => {
+    return post(api.document_change_parser, data);
+  },
+
+  // 获取文档缩略图
+  getDocumentThumbnails: (params: { doc_id: string }) => {
+    return request.get(api.document_thumbnails, { params });
+  },
+
+  // 获取文档文件
+  getDocumentFile: (params: { doc_id: string }) => {
+    return request.get(api.get_document_file, { params });
+  },
+
+  // 获取文档信息
+  getDocumentInfos: (data: { doc_ids: string[] }) => {
+    return post(api.document_infos, data);
+  },
+
+  // 设置文档元数据
+  setDocumentMeta: (data: any) => {
+    return post(api.setMeta, data);
+  },
+
+  // 网页爬取
+  webCrawl: (data: { url: string; kb_id: string }) => {
+    return post(api.web_crawl, data);
+  },
+
+  // 获取文档过滤器
+  getDocumentFilter: (data: { kb_id: string }) => {
+    return post(api.get_dataset_filter, data);
+  },
+
+  // ===== 分块管理 =====
+
+  // 获取分块列表
+  getChunkList: (data: any) => {
+    return post(api.chunk_list, data);
+  },
+
+  // 创建分块
+  createChunk: (data: Partial<IChunk>) => {
+    return post(api.create_chunk, data);
+  },
+
+  // 更新分块
+  updateChunk: (data: Partial<IChunk>) => {
+    return post(api.set_chunk, data);
+  },
+
+  // 获取分块详情
+  getChunk: (params: { chunk_id: string }) => {
+    return request.get(api.get_chunk, { params });
+  },
+
+  // 切换分块状态
+  switchChunk: (data: { chunk_ids: string[]; available_int: number }) => {
+    return post(api.switch_chunk, data);
+  },
+
+  // 删除分块
+  removeChunk: (data: { chunk_ids: string[] }) => {
+    return post(api.rm_chunk, data);
+  },
+
+  // ===== 检索测试 =====
+
+  // 检索测试
+  retrievalTest: (data: ITestRetrievalRequestBody) => {
+    return post(api.retrieval_test, data);
+  },
+
+  // 外部检索测试
+  retrievalTestShare: (data: ITestRetrievalRequestBody) => {
+    return post(api.retrievalTestShare, data);
+  },
+
+  // ===== 知识图谱 =====
+
+  // 获取知识图谱
+  getKnowledgeGraph: (knowledgeId: string) => {
+    return request.get(api.getKnowledgeGraph(knowledgeId));
+  },
+
+  // 删除知识图谱
+  deleteKnowledgeGraph: (knowledgeId: string) => {
+    return request.delete(api.getKnowledgeGraph(knowledgeId));
+  },
+
+  // 获取分块知识图谱
+  getChunkKnowledgeGraph: (params: { chunk_id: string }) => {
+    return request.get(api.knowledge_graph, { params });
+  },
+
+  // ===== 标签管理 =====
+
+  // 获取标签列表
+  getTagList: (knowledgeId: string) => {
+    return request.get(api.listTag(knowledgeId));
+  },
+
+  // 根据知识库ID获取标签
+  getTagsByKnowledgeIds: (params: { kb_ids: string[] }) => {
+    return request.get(api.listTagByKnowledgeIds, { params });
+  },
+
+  // 删除标签
+  removeTag: (knowledgeId: string, tags: string[]) => {
+    return post(api.removeTag(knowledgeId), { tags });
+  },
+
+  // 重命名标签
+  renameTag: (knowledgeId: string, { fromTag, toTag }: IRenameTag) => {
+    return post(api.renameTag(knowledgeId), { fromTag, toTag });
+  },
+
+  // ===== 数据管道 =====
+
+  // 获取数据管道日志
+  getDataPipelineLog: (
+    params?: IFetchKnowledgeListRequestParams,
+    body?: IFetchDocumentListRequestBody
+  ) => {
+    return request.post(api.fetchDataPipelineLog, { data: body || {}, params });
+  },
+
+  // 获取管道详情
+  getPipelineDetail: (params: { task_id: string }) => {
+    return request.get(api.get_pipeline_detail, { params });
+  },
+
+  // 获取管道数据集日志
+  getPipelineDatasetLogs: (
+    params?: IFetchKnowledgeListRequestParams,
+    body?: IFetchDocumentListRequestBody
+  ) => {
+    return request.post(api.fetchPipelineDatasetLogs, { data: body || {}, params });
+  },
+
+  // 运行GraphRAG
+  runGraphRag: (data: { kb_id: string }) => {
+    return post(api.runGraphRag, data);
+  },
+
+  // 跟踪GraphRAG
+  traceGraphRag: (params: { kb_id: string }) => {
+    return request.get(api.traceGraphRag, { params });
+  },
+
+  // 运行Raptor
+  runRaptor: (data: { kb_id: string }) => {
+    return post(api.runRaptor, data);
+  },
+
+  // 跟踪Raptor
+  traceRaptor: (params: { kb_id: string }) => {
+    return request.get(api.traceRaptor, { params });
+  },
+
+  // 解绑管道任务
+  unbindPipelineTask: (params: { kb_id: string; type: string }) => {
+    return request.delete(api.unbindPipelineTask(params));
+  },
+
+  // 重新运行管道
+  pipelineRerun: (data: any) => {
+    return post(api.pipelineRerun, data);
+  },
+};
+
+export default knowledgeService;