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>

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

@@ -39,6 +39,8 @@ import { formatDateTime } from '@/utils/format';
 import KnowledgeGraphCard from '../components/KnowledgeGraphCard';
 import { useBreadcrumbManager, type BreadcrumbItem } from '@/hooks/useBreadcrumbManager';
 import './Private.css'
+import Tag from '@/components/Tag'
+import copy from 'copy-to-clipboard'
 // Tree node data type
 
 const Private: FC = () => {
@@ -570,7 +572,7 @@ const Private: FC = () => {
         return (
           <span className="rb:text-xs rb:border rb:border-[#DFE4ED] rb:bg-[#FBFDFF] rb:rounded rb:items-center rb:text-[#212332] rb:py-1 rb:px-2">
             <span
-              className="rb:inline-block rb:w-[5px] rb:h-[5px] rb:mr-2 rb:rounded-full"
+              className="rb:inline-block rb:w-1.25 rb:h-1.25 rb:mr-2 rb:rounded-full"
               style={{ backgroundColor: value === 1 ? '#369F21' : value === 0 ? '#FF0000' : '#FF8A4C' }}
             ></span>
             <span>{value === 1 ? t('knowledgeBase.completed') : value === 0 ? t('knowledgeBase.pending') : t('knowledgeBase.processing')}</span>
@@ -613,6 +615,7 @@ const Private: FC = () => {
       title: t('knowledgeBase.processingMode'),
       dataIndex: 'parser_id',
       key: 'parser_id',
+      width: 100,
     },
     {
       title: t('knowledgeBase.dataSize'),
@@ -629,6 +632,11 @@ const Private: FC = () => {
         )
       }
     },
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      key: 'id',
+    },
 
     {
       title: t('common.operation'),
@@ -762,11 +770,16 @@ const Private: FC = () => {
     setIsSyncing(false);
   };
 
+  const handleCopy = (value: string) => {
+    copy(value)
+    messageApi.success(t('common.copySuccess'))
+  }
+
   return (
     <>
     <div className="rb:flex rb:h-full rb:bg-white rb:rounded-xl">
       {folder && (
-        <div className="rb:w-64 rb:py-4 rb:flex-shrink-0 rb:h-[calc(100%+40px)] rb:border-r rb:border-[#EAECEE] rb:p-4 rb:bg-transparent">
+        <div className="rb:w-64 rb:py-4 rb:shrink-0 rb:h-[calc(100%+40px)] rb:border-r rb:border-[#EAECEE] rb:p-4 rb:bg-transparent">
             <FolderTree
               multiple
               className="customTree"
@@ -791,11 +804,15 @@ const Private: FC = () => {
                 <div className="rb:flex rb:items-center rb:border rb:border-[rgba(33, 35, 50, 0.17)] rb:text-gray-500 rb:cursor-pointer rb:px-1 rb:py-0.5 rb:rounded"
                   onClick={handleEditFolder}
                 >
-                  <img src={editIcon} alt="edit" className="rb:w-[14px] rb:h-[14px" />
+                  <img src={editIcon} alt="edit" className="rb:w-3.5 rb:h-[14px" />
                   <span className='rb:text-[12px]'>{t('knowledgeBase.edit')} {t('knowledgeBase.name')}</span>
                 </div>
             </div>
-            <div className='rb:flex rb:items-center rb:gap-6 rb:text-gray-500 rb:mt-2 rb:text-xs'>
+              <div className='rb:flex rb:items-center rb:gap-6 rb:text-gray-500 rb:mt-2 rb:text-xs'>
+                <Tag variant="borderless" color="default" className="rb:cursor-pointer" onClick={() => handleCopy(knowledgeBase.id)}>
+                  ID: {knowledgeBase.id}
+                  <span className="rb:-mb-0.5 rb:ml-1 rb:inline-block rb:size-3 rb:bg-cover rb:bg-[url('@/assets/images/common/copy_dark.svg')]"></span>
+                </Tag>
                 <span className='rb:text-[12px]'>{t('knowledgeBase.created')} {t('knowledgeBase.time')}: {formatDateTime(knowledgeBase.created_at) || '-'}</span>
                 <span className='rb:text-[12px]'>{t('knowledgeBase.updated')} {t('knowledgeBase.time')}: {formatDateTime(knowledgeBase.updated_at) || '-'}</span>