feat(web): show ids

web/src/views/KnowledgeBase/[knowledgeBaseId]/DocumentDetails.tsx

@@ -10,7 +10,7 @@ import { useEffect, useState, useRef, type FC } from 'react';
 import { useNavigate, useParams, useLocation, useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useBreadcrumbManager, type BreadcrumbPath } from '@/hooks/useBreadcrumbManager';
-import { Button, Spin, message, Switch } from 'antd';
+import { Button, Spin, message, Switch, App } from 'antd';
 import { getDocumentDetail, getDocumentChunkList, downloadFile, updateDocument, updateDocumentChunk, createDocumentChunk, getFileUrl } from '@/api/knowledgeBase';
 import type { KnowledgeBaseDocumentData, RecallTestData } from '@/views/KnowledgeBase/types';
 import { formatDateTime } from '@/utils/format';
@@ -21,9 +21,11 @@ import DocumentPreview from '@/components/DocumentPreview';
 import InsertModal, { type InsertModalRef } from '../components/InsertModal';
 import exitIcon from '@/assets/images/knowledgeBase/exit.png';
 const imagePath = 'https://devapi.mem.redbearai.com'
+import copy from 'copy-to-clipboard'
 const DocumentDetails: FC = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const { message: messageApi } = App.useApp()
   const { knowledgeBaseId } = useParams<{ knowledgeBaseId: string }>();
   const location = useLocation();
   const { updateBreadcrumbs } = useBreadcrumbManager({
@@ -100,9 +102,25 @@ const DocumentDetails: FC = () => {
   }, [keywords]);
 
 
+  const handleCopy = (value?: string) => {
+    if (!value) return
+    copy(value)
+    messageApi.success(t('common.copySuccess'))
+  }
+
 
   const formatDocumentInfo = (doc: KnowledgeBaseDocumentData): InfoItem[] => {
     return [
+      {
+        key: 'file_id',
+        label: 'ID',
+        value: <span onClick={() => handleCopy(doc.file_id)}>
+          {doc.file_id}
+          <span
+            className="rb:cursor-pointer rb:-mb-0.5 rb:ml-1 rb:inline-block rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/common/copy_dark.svg')]"
+          ></span>
+        </span>,
+      },
       {
         key: 'file_name',
         label: t('knowledgeBase.fileName') || '文件名',
@@ -387,7 +405,7 @@ const DocumentDetails: FC = () => {
       <div className="rb:flex rb:h-full rb:flex-1 rb:overflow-hidden rb:bg-white rb:rounded-xl rb:border rb:border-[#DFE4ED]">
         {/* Left: Document info */}
         <div className='rb:w-80 rb:h-full rb:flex rb:flex-col rb:gap-4 rb:overflow-hidden'>
-          <div className='rb:h-full rb:border-r rb:border-[#DFE4ED] rb:p-4'>
+          <div className='rb:h-full rb:border-r rb:border-[#DFE4ED] rb:p-4 rb:overflow-y-auto'>
             <InfoPanel 
               title={t('knowledgeBase.documentInfo') || '文档信息'} 
               items={infoItems}
@@ -417,6 +435,7 @@ const DocumentDetails: FC = () => {
             editable={true}
             onItemClick={handleChunkClick}
             parserMode={parserMode}
+            handleCopy={handleCopy}
           />
         </div>
       </div>