feat(knowledge): enhance knowledge base detail page with embedded views

src/components/ProfileFormDialog.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import ProfileForm, { type ProfileFormHandle } from '@/pages/setting/components/ProfileForm';
 import { useProfileSetting } from '@/hooks/setting-hooks';
 import type { IUserInfo } from '@/interfaces/database/user-setting';
+import { useUserData } from '@/hooks/useUserData';
 
 interface ProfileFormDialogProps {
   open: boolean;
@@ -17,12 +18,14 @@ interface ProfileFormDialogProps {
 const ProfileFormDialog: React.FC<ProfileFormDialogProps> = ({ open, onClose }) => {
   const { t } = useTranslation();
   const { userInfo, updateUserInfo } = useProfileSetting();
+  const { refreshUserData } = useUserData();
   const formRef = useRef<ProfileFormHandle>(null);
 
   const handleSubmit = useCallback(async (data: Partial<IUserInfo>) => {
     await updateUserInfo(data);
+    await refreshUserData();
     onClose();
-  }, [updateUserInfo, onClose]);
+  }, [updateUserInfo, onClose, refreshUserData]);
 
   return (
     <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>

src/locales/en.ts

@@ -60,6 +60,7 @@ export default {
       description: 'Description',
       confirm: 'Confirm',
       enabled: 'Enabled',
+      disabled: 'Disabled',
       clearFilter: 'Clear Filter',
       confirmFilter: 'Confirm Filter',
       private: 'Private',
@@ -463,7 +464,7 @@ export default {
       file: 'File',
       dataset: 'Dataset',
       testing: 'Retrieval testing',
-      files: 'files',
+      files: 'Files List',
       configuration: 'Configuration',
       knowledgeGraph: 'Knowledge Graph',
       name: 'Name',

src/locales/zh.ts

@@ -59,6 +59,7 @@ export default {
       description: '描述',
       confirm: '确认',
       enabled: '已启用',
+      disabled: '已禁用',
       clearFilter: '清空筛选',
       confirmFilter: '确认筛选',
       private: '私有',
@@ -459,7 +460,7 @@ export default {
       testing: '检索测试',
       configuration: '配置',
       knowledgeGraph: '知识图谱',
-      files: '个文件',
+      files: '文件列表',
       name: '名称',
       namePlaceholder: '请输入名称',
       doc: '文档',

src/pages/knowledge/components/DocumentListComponent.tsx

@@ -47,6 +47,7 @@ import {
   InsertDriveFile as FileIcon,
   Upload as UploadIcon,
   BugReportOutlined as ProcessIcon,
+  Download as DownloadIcon,
 } from '@mui/icons-material';
 import { DataGrid, type GridColDef, type GridRowSelectionModel } from '@mui/x-data-grid';
 import { zhCN, enUS } from '@mui/x-data-grid/locales';
@@ -56,6 +57,7 @@ import { RunningStatus } from '@/constants/knowledge';
 import dayjs from 'dayjs';
 import logger from '@/utils/logger';
 import { LanguageAbbreviation } from '@/constants/common';
+import knowledgeService from '@/services/knowledge_service';
 
 
 interface DocumentListComponentProps {
@@ -172,6 +174,9 @@ const getRunStatusChip = (run: RunningStatus, progress: number) => {
   return <Chip label={config.label} color={config.color} size="small" />;
 };
 
+/**
+ * 文档列表组件
+ */
 const DocumentListComponent: React.FC<DocumentListComponentProps> = ({
   files,
   loading,
@@ -305,6 +310,32 @@ const DocumentListComponent: React.FC<DocumentListComponentProps> = ({
     handleMenuClose();
   };
 
+  // 下载文件
+  const handleDownload = async () => {
+    try {
+      const docId = selectedFileIdRef.current || selectedFileId;
+      const fileName = selectedFileRef.current?.name || selectedFile?.name || 'document';
+      if (!docId) return;
+      const fileResponse: { data: Blob } = await knowledgeService.getDocumentFile({ doc_id: docId });
+      if (fileResponse?.data instanceof Blob) {
+        const url = URL.createObjectURL(fileResponse.data);
+        if (window?.document) {
+          const link = window.document.createElement('a');
+          link.href = url;
+          link.download = fileName;
+          window.document.body.appendChild(link);
+          link.click();
+          window.document.body.removeChild(link);
+        }
+        URL.revokeObjectURL(url);
+      }
+    } catch (err) {
+      logger.error('下载文件失败:', err);
+    } finally {
+      handleMenuClose();
+    }
+  };
+
   const handleRunStatusChange = (event: SelectChangeEvent<string[]>) => {
     const value = event.target.value;
     setSelectedRunStatus(typeof value === 'string' ? value.split(',') : value);
@@ -630,7 +661,7 @@ const DocumentListComponent: React.FC<DocumentListComponentProps> = ({
         />
       </Paper>
 
-      {/* 右键菜单 */}
+      {/* 菜单 */}
       <Menu
         anchorEl={anchorEl}
         open={Boolean(anchorEl)}
@@ -640,6 +671,10 @@ const DocumentListComponent: React.FC<DocumentListComponentProps> = ({
           <ViewIcon sx={{ mr: 1 }} />
           <Typography>{t('knowledge.viewDetails')}</Typography>
         </MenuItem>
+        <MenuItem onClick={handleDownload}>
+          <DownloadIcon sx={{ mr: 1 }} />
+          <Typography>{t('chunkPage.downloadFile')}</Typography>
+        </MenuItem>
         <MenuItem onClick={handleRename}>
           <EditIcon sx={{ mr: 1 }} />
           <Typography>{t('common.rename')}</Typography>
@@ -674,7 +709,9 @@ const DocumentListComponent: React.FC<DocumentListComponentProps> = ({
       {/* 重命名对话框 */}
       <Dialog open={renameDialogOpen} onClose={() => setRenameDialogOpen(false)}>
         <DialogTitle>{t('knowledge.renameFile')}</DialogTitle>
-        <DialogContent>
+        <DialogContent sx={{
+          minWidth: 200
+        }}>
           <TextField
             autoFocus
             margin="dense"

src/pages/knowledge/detail.tsx

@@ -21,6 +21,7 @@ import {
   Chip,
   Tabs,
   Tab,
+  Fab,
 } from '@mui/material';
 import { type GridRowSelectionModel } from '@mui/x-data-grid';
 import type { IKnowledge, IKnowledgeFile } from '@/interfaces/database/knowledge';
@@ -28,9 +29,11 @@ import type { IDocumentInfoFilter } from '@/interfaces/database/document';
 import FileUploadDialog from '@/components/FileUploadDialog';
 import KnowledgeInfoCard from './components/KnowledgeInfoCard';
 import DocumentListComponent from './components/DocumentListComponent';
-import FloatingActionButtons from './components/FloatingActionButtons';
+import KnowledgeBaseTesting from './testing';
+import KnowledgeLogsPage from './overview';
 import KnowledgeBreadcrumbs from './components/KnowledgeBreadcrumbs';
 import KnowledgeGraphView from './components/KnowledgeGraphView';
+import { Settings as SettingsIcon } from '@mui/icons-material';
 import { useDocumentList, useDocumentOperations } from '@/hooks/document-hooks';
 import { RunningStatus } from '@/constants/knowledge';
 import { useKnowledgeDetail } from '@/hooks/knowledge-hooks';
@@ -54,8 +57,8 @@ function KnowledgeBaseDetail() {
   const [processDetailsDialogOpen, setProcessDetailsDialogOpen] = useState(false);
   const [selectedFileDetails, setSelectedFileDetails] = useState<IKnowledgeFile | null>(null);
 
-  // 标签页状态
-  const [currentTab, setCurrentTab] = useState(0);
+  // 标签页状态（documents / testing / overview / graph）
+  const [currentTab, setCurrentTab] = useState<'documents' | 'testing' | 'overview' | 'graph'>('documents');
 
   // 轮询相关状态
   const pollingIntervalRef = useRef<any>(null);
@@ -296,20 +299,23 @@ function KnowledgeBaseDetail() {
       {/* 知识库信息卡片 */}
       <KnowledgeInfoCard knowledgeBase={knowledgeBase} />
 
-      {/* 标签页组件 - 仅在showKnowledgeGraph为true时显示 */}
-      {showKnowledgeGraph ? (
+      {/* 标签页组件 - 默认显示 documents/testing/overview；Graph 仅在有数据时显示 */}
       <Box sx={{ mt: 3 }}>
         <Tabs
           value={currentTab}
           onChange={(event, newValue) => setCurrentTab(newValue)}
           sx={{ borderBottom: 1, borderColor: 'divider' }}
         >
-            <Tab label={t('knowledgeDetails.documents')} />
-            <Tab label={t('knowledgeDetails.graph')} />
+          <Tab value="documents" label={t('knowledgeDetails.files')} />
+          <Tab value="testing" label={t('knowledgeDetails.testing')} />
+          <Tab value="overview" label={t('knowledgeDetails.datasetLogs')} />
+          {showKnowledgeGraph && (
+            <Tab value="graph" label={t('knowledgeDetails.graph')} />
+          )}
         </Tabs>
 
-          {/* Document List 标签页内容 */}
-          {currentTab === 0 && (
+        {/* Documents 标签页内容 */}
+        {currentTab === 'documents' && (
           <Box sx={{ mt: 2 }}>
             <DocumentListComponent
               files={files}
@@ -351,62 +357,37 @@ function KnowledgeBaseDetail() {
           </Box>
         )}
 
+        {/* Testing 标签页内容 */}
+        {currentTab === 'testing' && (
+          <Box sx={{ mt: 2 }}>
+            <KnowledgeBaseTesting embedded kbId={id || ''} />
+          </Box>
+        )}
+
+        {/* Overview 标签页内容 */}
+        {currentTab === 'overview' && (
+          <Box sx={{ mt: 2 }}>
+            <KnowledgeLogsPage embedded kbId={id || ''} />
+          </Box>
+        )}
+
         {/* Graph 标签页内容 */}
-          {currentTab === 1 && (
+        {currentTab === 'graph' && showKnowledgeGraph && (
           <Box sx={{ mt: 2 }}>
             <KnowledgeGraphView knowledgeGraph={knowledgeGraph} />
           </Box>
         )}
       </Box>
-      ) : (
-        /* 原有的文件列表组件 - 当showKnowledgeGraph为false时显示 */
-        <DocumentListComponent
-          files={files}
-          loading={filesLoading}
-          searchKeyword={searchKeyword}
-          onSearchChange={setSearchKeyword}
-          onReparse={(fileIds) => handleReparse(fileIds)}
-          onDelete={(fileIds) => {
-            console.log(t('knowledgeDetails.deleteFiles'), fileIds);
-            setRowSelectionModel({
-              type: 'include',
-              ids: new Set(fileIds)
-            });
-            setDeleteDialogOpen(true);
-          }}
-          onUpload={() => setUploadDialogOpen(true)}
-          onRefresh={() => {
-            refreshFiles();
-            fetchKnowledgeDetail();
-          }}
-          rowSelectionModel={rowSelectionModel}
-          onRowSelectionModelChange={(newModel) => {
-            console.log(t('knowledgeDetails.newSelectionModel'), newModel);
-            setRowSelectionModel(newModel);
-          }}
-          total={total}
-          page={currentPage}
-          pageSize={pageSize}
-          documentFilter={documentsFilter}
-          onSelectedFilterChange={(filterBody) => {
-            fetchDocuments({}, filterBody);
-          }}
-          onPageChange={setCurrentPage}
-          onPageSizeChange={setPageSize}
-          onRename={handleRename}
-          onChangeStatus={handleChangeStatus}
-          onCancelRun={handleCancelRun}
-          onViewDetails={handleViewDetails}
-          onViewProcessDetails={handleViewProcessDetails}
-        />
-      )}
 
-      {/* 浮动操作按钮 */}
-      <FloatingActionButtons
-        onTestClick={() => navigate(`/knowledge/${id}/testing`)}
-        onConfigClick={() => navigate(`/knowledge/${id}/setting`)}
-        onOverviewClick={() => navigate(`/knowledge/${id}/overview`)}
-      />
+      {/* 设置按钮（替代原浮动操作按钮） */}
+      <Fab
+        color="primary"
+        aria-label={t('knowledgeSettings.knowledgeBaseSettings')}
+        onClick={() => navigate(`/knowledge/${id}/setting`)}
+        sx={{ position: 'fixed', bottom: 128, right: 64 }}
+      >
+        <SettingsIcon />
+      </Fab>
 
       {/* 上传文件对话框 */}
       <FileUploadDialog

src/pages/knowledge/overview.tsx

@@ -27,7 +27,12 @@ const ProcessingTypeMap = {
   [PROCESSING_TYPES.raptor]: 'RAPTOR',
 } as const
 
-function KnowledgeLogsPage() {
+interface KnowledgeLogsPageProps {
+  embedded?: boolean;
+  kbId?: string;
+}
+
+function KnowledgeLogsPage({ embedded = false, kbId: kbIdProp }: KnowledgeLogsPageProps) {
   const { t } = useTranslation();
   const [paginationModel, setPaginationModel] = React.useState({ page: 0, pageSize: 50 });
 
@@ -38,7 +43,8 @@ function KnowledgeLogsPage() {
   };
 
   // 路由参数与数据Hook
-  const { id: kbId = '' } = useParams();
+  const { id: kbIdParam = '' } = useParams();
+  const kbId = kbIdProp || kbIdParam;
   const {
     overview,
     fileLogs,
@@ -105,8 +111,9 @@ function KnowledgeLogsPage() {
   };
 
   return (
-    <Box sx={{ p: 3 }}>
+    <Box sx={{ p: embedded ? 0 : 3 }}>
       {/* 面包屑导航 */}
+      {!embedded && (
         <KnowledgeBreadcrumbs
           kbItems={[
             {
@@ -122,6 +129,7 @@ function KnowledgeLogsPage() {
             }
           ]}
         />
+      )}
       {/* 顶部统计卡片占位 */}
       <Grid container spacing={2} sx={{ mb: 2 }}>
         <Grid size={{ xs: 12, md: 4 }}>
@@ -183,6 +191,7 @@ function KnowledgeLogsPage() {
       </Paper>
 
       {/* 返回按钮 */}
+      {!embedded && (
         <Fab
           color="primary"
           aria-label={t('knowledgeSettings.backToKnowledgeDetail')}
@@ -195,6 +204,7 @@ function KnowledgeLogsPage() {
         >
           <ArrowBackIcon />
         </Fab>
+      )}
     </Box>
   );
 }

src/pages/knowledge/testing.tsx

@@ -61,9 +61,15 @@ interface TestFormData {
   doc_ids?: string[];
 }
 
-function KnowledgeBaseTesting() {
+interface KnowledgeBaseTestingProps {
+  embedded?: boolean;
+  kbId?: string;
+}
+
+function KnowledgeBaseTesting({ embedded = false, kbId }: KnowledgeBaseTestingProps) {
   const { t } = useTranslation();
-  const { id } = useParams<{ id: string }>();
+  const { id: idParam } = useParams<{ id: string }>();
+  const id = kbId || idParam || '';
   const navigate = useNavigate();
 
   // 状态管理
@@ -230,9 +236,10 @@ function KnowledgeBaseTesting() {
   }
 
   return (
-    <Container maxWidth="lg" sx={{ py: 4 }}>
+    <Container maxWidth="lg" sx={{ py: embedded ? 0 : 4 }}>
 
       {/* 面包屑导航 */}
+      {!embedded && (
         <KnowledgeBreadcrumbs
           kbItems={[
             {
@@ -248,6 +255,7 @@ function KnowledgeBaseTesting() {
             }
           ]}
         />
+      )}
 
       <Box sx={{ mb: 3 }}>
         <Typography variant="h4" gutterBottom>

src/pages/setting/profile.tsx

@@ -6,10 +6,12 @@ import ProfileForm from "./components/ProfileForm";
 import ChangePasswordDialog from "./components/ChangePasswordDialog";
 import { useProfileSetting } from "@/hooks/setting-hooks";
 import logger from "@/utils/logger";
+import { useUserData } from "@/hooks/useUserData";
 
 function ProfileSetting() {
   const { t } = useTranslation();
   const { userInfo, updateUserInfo: updateUserInfoFunc, changeUserPassword: changeUserPasswordFunc } = useProfileSetting();
+  const { refreshUserData } = useUserData();
   const [passwordDialogOpen, setPasswordDialogOpen] = useState(false);
 
   logger.debug('userInfo', userInfo);
@@ -25,7 +27,10 @@ function ProfileSetting() {
   return (
     <Box sx={{ maxWidth: 800, mx: 'auto', p: 3 }}>
       {/* 个人资料表单 */}
-      <ProfileForm userInfo={userInfo} onSubmit={updateUserInfoFunc} />
+      <ProfileForm userInfo={userInfo} onSubmit={async (data) => {
+        await updateUserInfoFunc(data);
+        await refreshUserData();
+      }} />
       
       {/* 分割线 */}
       <Divider sx={{ my: 4 }} />