chat-admin-web/src/pages/deepseek/knowledgeLib/detail/index.tsx

import * as React from 'react';
import { generatePath, useParams, useLocation } from 'react-router-dom';
import { observer } from 'mobx-react';

import config, { getHeaders } from '@/apis/config';

import {
  Button,
  Table,
  TableColumnsType,
  Modal,
  TablePaginationConfig,
  Upload,
  UploadProps,
  message,
  Spin,
  Row,
  Col,
  Card
} from 'antd';
import { EditOutlined, DeleteOutlined, InboxOutlined, PlusOutlined, ArrowLeftOutlined, CloseOutlined, BulbOutlined, UpOutlined, DownOutlined,EyeOutlined } from '@ant-design/icons';
import InfoModal from './components/InfoModal';
import InfoModalSetting from './components/InfoModalSetting';
import router from '@/router';
import { Record } from './types';
import dayjs from 'dayjs';
import axios from 'axios';
import LocalStorage from '@/LocalStorage';
import store from './store';
import './style.less';

const { Dragger } = Upload;

const KnowledgeLibInfo : React.FC = () => {

  const {
    state,
    init,
    sse,
    onClickModify,
    onClickDelete,
    onChangePagination,
    onClickDocumentDetail,
    infoModalOnClickConfirm,
    infoModalOnClickCancel,
    infoModalSettingOnClickConfirm,
    infoModalSettingOnClickCancel,
    onClickSettings,
    reset,
    onDeleteTakaiDocumentLibApi,
  } = store;
  const {
    knowledge_id,
    listLoading,
    page,
    list,
    processingList, // 处理中的状态
    infoModalOpen,
    infoModalId,
    infoModalSettingOpen,
    infoModalSettingId,
    knowledgeDetail,
  } = state;
  const location = useLocation();
  const [ uploadLoading, setUploadLoading ] = React.useState( false );

  const params = useParams();

  const [ fileList, setFileList ] = React.useState<any[]>( [] );
  const [ uploading, setUploading ] = React.useState( false );
  const uploadMessageRef = React.useRef<(() => void) | null>( null );

  const [ sListFlag, setSListFlag ] = React.useState<boolean>();
  const [ cUpdateFlag, setCUpdateFlag ] = React.useState<boolean>();
  const [ detailFlag, setDetailFlag ] = React.useState<boolean>();
  const [ deleteFlag, setDeleteFlag ] = React.useState<boolean>();
  const [ createFlag, setCreateFlag ] = React.useState<boolean>();
  const [userInfoAll, setUserInfoAll] = React.useState<any>({});
  // 新手引导（知识库文档）整体可见性（持久化到 localStorage）
  const [showDocGuide, setShowDocGuide] = React.useState<boolean>(() => localStorage.getItem('knowledgeDocGuideHidden') !== 'true');
  // 新手引导展开/折叠状态（持久化到 localStorage），默认展开
  const [isDocGuideExpanded, setIsDocGuideExpanded] = React.useState<boolean>(() => {
    const saved = localStorage.getItem('knowledgeDocGuideExpanded');
    // 如果 localStorage 中没有值，默认展开（返回 true）
    return saved === null ? true : saved === 'true';
  });
  const toggleDocGuide = () => {
    setIsDocGuideExpanded(prev => {
      const newValue = !prev;
      // 保存到 localStorage
      localStorage.setItem('knowledgeDocGuideExpanded', String(newValue));
      return newValue;
    });
  };

  const props : UploadProps = {
    name: 'files',
    multiple: true,
    showUploadList:false,
    action: '/api/deepseek/api/uploadDocument/' + params.knowledgeId,
    headers: getHeaders(),
    beforeUpload( file, fileList ) {
      setUploadLoading( true );
      // const allowedExtensions = ['md', 'txt', 'pdf', 'jpg', 'png', 'jpeg', 'docx', 'xlsx', 'pptx', 'eml', 'csv', 'tar', 'gz', 'bz2', 'zip', 'rar', 'jar'];

      const allowedExtensions = [ 'txt', 'pdf', 'jpg', 'png', 'jpeg', 'doc', 'docx', 'ppt', 'pptx' ];

      // 检查文件类型
      for ( const file of fileList ) {
        const fileExt = file.name.split( '.' ).pop()?.toLowerCase();
        if ( !fileExt || !allowedExtensions.includes( fileExt ) ) {
          message.error( `不支持 ${ fileExt } 格式的文件上传` );
          setUploadLoading( false );
          return Upload.LIST_IGNORE;
        }
      }

      // 检查文件大小
      let totalSize = 0;
      for ( const file of fileList ) {
        const fileExt = file.name.split( '.' ).pop()?.toLowerCase();
        const fileSizeMB = file.size / 1024 / 1024;

        if ( fileSizeMB > 30 ) {
          message.error( '单个文件不能大于30M' );
          setUploadLoading( false );
          return Upload.LIST_IGNORE;
        }

        if ( [ 'jpg', 'png', 'jpeg' ].includes( fileExt! ) && fileSizeMB > 5 ) {
          message.error( '单张图片不能大于5M' );
          setUploadLoading( false );
          return Upload.LIST_IGNORE;
        }

        totalSize += fileSizeMB;
      }

      if ( totalSize > 125 ) {
        message.error( '文件总大小超过125M' );
        setUploadLoading( false );
        return Upload.LIST_IGNORE;
      }

    },
    onChange( info ) {
      const { status, name } = info.file;

      if ( status === 'uploading' ) {
        // 文件开始上传，显示持续提示
        if ( !uploadMessageRef.current ) {
          const closeMessage = message.loading(
            `文件 "${name}" 上传中...`,
            0 // 0表示不自动关闭
          );
          uploadMessageRef.current = closeMessage;
        }
        setUploadLoading( true );
      } else if ( status === 'done' ) {
        console.log( status, 'status--done' );
        console.info( info.file.response, 'info.file.response.data' );
        // 关闭上传提示
        if ( uploadMessageRef.current ) {
          uploadMessageRef.current();
          uploadMessageRef.current = null;
        }
        if ( info.file.response.code === 200 && info.file.response.data === 1 ) {
          message.success( `${ info.file.name } 文件上传成功.` );
          init( params.knowledgeId );
        }else{
          message.error( info.file.response.msg || `${ info.file.name } 文件上传失败` );
        }
        setUploadLoading( false );
      } else if ( status === 'error' ) {
        console.log( status, 'status--error' );
        // 关闭上传提示
        if ( uploadMessageRef.current ) {
          uploadMessageRef.current();
          uploadMessageRef.current = null;
        }
        // 检查是否是504超时错误
        const response = info.file.response;
        const error = info.file.error;
        
        // 检查HTML格式的504错误或其他504错误格式
        const responseStr = String(response || '');
        const errorStr = String(error || '');
        
        if (responseStr.includes('504') || 
            responseStr.includes('Gateway Time-out') || 
            responseStr.includes('<h1>504 Gateway Time-out</h1>') ||
            errorStr.includes('timeout') || 
            errorStr.includes('504')) {
          info.file.response = '上传文件超时，请修改文件后再上传';
          info.file.error = '上传文件超时，请修改文件后再上传';
          message.error( '上传文件超时，请修改文件后再上传' );
        } else {
          message.error( `${ info.file.name } 文件上传失败` );
        }
        setUploadLoading( false );
      }
    },
    onDrop( e ) {
      console.log( 'Dropped files', e.dataTransfer.files );
    },
  };

  const handleUpload = async () => {
    if ( fileList.length === 0 ) return;

    setUploading( true );
    const formData = new FormData();

    // 添加所有文件
    fileList.forEach( file => {
      if ( file.originFileObj ) {
        formData.append( 'files', file.originFileObj );
      }
    } );

    try {
      const res = await axios.post( '/api/deepseek/api/uploadDocument/' + params.knowledgeId, formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
      } );

      message.success( `${ fileList.length }个文件上传成功` );
      setFileList( [] );
    } catch ( err: any ) {
      // 检查是否是504超时错误
      if (err?.response?.status === 504 || err?.code === 'ECONNABORTED' || String(err).includes('timeout')) {
        message.error( '上传文件超时，请修改文件后再上传' );
      } else {
      message.error( '上传失败' );
      }
    } finally {
      setUploading( false );
    }
  };

  React.useEffect( () => {
    init( params.knowledgeId );
    const cList = LocalStorage.getStatusFlag( 'deepseek:slice:list' );
    setSListFlag( cList );
    const cDetail = LocalStorage.getStatusFlag( 'deepseek:config:update' );
    setCUpdateFlag( cDetail );
    const detail = LocalStorage.getStatusFlag( 'deepseek:document:detail' );
    setDetailFlag( detail );
    const deleteF = LocalStorage.getStatusFlag( 'deepseek:document:delete' );
    setDeleteFlag( deleteF );
    const createF = LocalStorage.getStatusFlag( 'deepseek:document:create' );
    setCreateFlag( createF );
    setUserInfoAll(LocalStorage.getUserInfo());
    sse()
    return () => reset();
  }, [] );

  const columns : TableColumnsType<Record> = [
    {
      title: '序号',
      dataIndex: 'index',
      width: 80,
      render: ( text, record, index ) => {
        return index + 1;
      }
    },
    {
      title: '文件名',
      dataIndex: 'name',
      width: 300,
      sorter: (a, b) => a.name.localeCompare(b.name),
      render: ( text, record ) => {
        return (
            `${ text }`
        )
      }
    },
    {
      title: '文件大小',
      dataIndex: 'length',
      width: 100,
      render: ( text ) => {
        if ( text ) {
          const size = ( text / 1024 / 1024 ).toFixed( 2 );
          return `${ size } M`;
        } else {
          return '--'
        }
      }
    },
    {
      title: '字符数量',
      dataIndex: 'wordNum',
      width: 100,
      render: ( text ) => {
        if ( text ) {
          return `${ text }`;
        } else {
          return '--'
        }
      }
    },
    {
      title: '分段',
      dataIndex: 'sliceTotal',
      width: 100,
      render: ( text ) => {
        if ( text ) {
          return `${ text }`;
        } else {
          return '--';
        }
      }
    },
    {
      title: '上传时间',
      dataIndex: 'createTime',
      width: 180,
      render: ( text ) => {
        if ( text ) {
          return dayjs( text ).format( 'YYYY-MM-DD HH:mm:ss' );
        } else {
          return '--';
        }
      }
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
      width: 180,
      render: ( text ) => {
        if ( text ) {
          return dayjs( text ).format( 'YYYY-MM-DD HH:mm:ss' );
        } else {
          return '--';
        }
      }
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: 180,
      fixed: 'right',
      render: ( text, record:any ) => {
        return (
            <>
              { (createFlag||userInfoAll.id===record.createBy) &&
                  <a
                      style={ { marginRight: 16 } }
                      onClick={ () => {
                        const path = generatePath( '/deepseek/knowledgeLib/:knowledgeId/:createBy/slice/:documentId/:embeddingId', {
                          knowledgeId: params.knowledgeId as string,
                          createBy: params.createBy as string,
                          documentId: record.documentId,
                          embeddingId: state.knowledgeDetail.embeddingId,
                        } );
                        router.navigate( { pathname: path },{state:{ createBy:record.createBy}} );
                      } }
                  >
                    切片
                  </a>
              }
              {
                  (cUpdateFlag||userInfoAll.id===record.createBy) &&
                  <a
                      style={ { marginRight: 16 } }
                      onClick={ () => {
                        onClickSettings( record.documentId );
                      } }
                  >
                    配置
                  </a>
              }
              {
                  (cUpdateFlag||userInfoAll.id===record.createBy) &&
                  <a
                      style={ { marginRight: 16 } }
                      onClick={ () => {
                        onClickModify( record.documentId );
                      } }>
                    <EditOutlined />
                  </a>
              }
              {
                  (deleteFlag||userInfoAll.id===record.createBy) &&
                  <a
                      className='text-error'
                      onClick={ () => {
                        Modal.confirm( {
                          title: '删除',
                          content: `确定删除知识文件:${ record.name }吗？`,
                          okType: 'danger',
                          onOk: async () => {
                            const userInfo = LocalStorage.getUserInfo();
                            await onClickDelete( record.documentId );
                          }
                        } );
                      } }
                  >
                    <DeleteOutlined />
                  </a>
              }
            </>
        )
      }
    }
  ];

  const paginationConfig : TablePaginationConfig = {
    // 显示数据总量
    showTotal: ( total : number ) => {
      return `共 ${ total } 条`;
    },
    // 展示分页条数切换
    showSizeChanger: true,
    // 指定每页显示条数
    pageSizeOptions: [ '10', '20', '50', '100' ],
    // 快速跳转至某页
    showQuickJumper: true,
    current: page.page,
    pageSize: page.size,
    total: page.total,
    onChange: async ( page, pageSize ) => {
      await onChangePagination( page, pageSize );
    },
  };

  const progressBar = () => {
    return processingList.map((item: any, index: number) => {
      return <div key={index} className='knowledgeLibInfo-progress'>
        <div className="task-card bg-[#FAFAFA] rounded-xl py-2 px-5 card-shadow task-item fade-in" data-status="processing" data-name="市场调研报告需求.docx" data-date="2023-06-15 09:32" data-project-id="1" data-project-name="电商平台重构" data-project-color="#165DFF">
          <div className="flex flex-wrap justify-between items-start mb-2">
            <div>
              <div className="flex items-center">
                <p className="font-semibold text-[14px]" style={{ marginRight: 16 }}>{item?.name}</p>
              </div>
              <p className="text-[12px] text-gray-500">上传于：{item?.createTime}</p>
            </div>
            {item?.status === '0' && <span className="bg-blue-100 text-primary text-xs font-medium px-2.5 py-0.5 rounded-full flex items-center mt-1">
              <i className="fa fa-spinner fa-spin mr-1"></i> 处理中
            </span>}
            {item?.status === '2' && <span className="bg-blue-100 text-primary text-xs font-medium px-2.5 py-0.5 rounded-full flex items-center mt-1">
              处理失败
            </span>}
            {item?.status === '3' && <span className="bg-blue-100 text-primary text-xs font-medium px-2.5 py-0.5 rounded-full flex items-center mt-1">
              待处理
            </span>}
            {item?.progress === 100 && <span className="bg-green-100 text-success text-xs font-medium px-2.5 py-0.5 rounded-full flex items-center mt-1">
              <i className="fa fa-check mr-1"></i> 已完成
            </span>}
          </div>
          <div className="mb-1">
            <div className="flex justify-between text-[12px] mb-1">
              <span>处理进度</span>
              <span id="progressText-1">{item?.progress}%</span>
            </div>
            <div className="w-full bg-gray-200 rounded-full h-2.5">
              <div className="progress-bar bg-blue-500 h-2.5 rounded-full" style={{ width: `${item?.progress}%` }} id="progressBar-1"></div>
            </div>
            <div className="flex justify-between text-sm mt-1">
              <span></span>
              <p>
                <EyeOutlined className='mr-2 cursor-pointer' onClick={() => {
                  window.open(item?.url)
                }} />

                <DeleteOutlined className='text-error cursor-pointer' onClick={() => {
                  Modal.confirm({
                    title: '删除',
                    content: `确定删除知识文件:${item.name}吗？`,
                    okType: 'danger',
                    onOk: async () => {
                      onDeleteTakaiDocumentLibApi(item.documentId)
                    }
                  });
                }} />
              </p>
            </div>
          </div>
        </div>
      </div>
    })
  }



  return (
      <div className='knowledgeLibInfo'>
        <Spin spinning={ uploadLoading || listLoading }>
          {showDocGuide && (
            <div style={{ padding: '12px 20px 12px 20px', background: '#fff' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: isDocGuideExpanded ? 8 : 0 }}>
                <div style={{ fontSize: 13, color: '#333', display: 'flex', alignItems: 'center', gap: 6 }}>
                  <BulbOutlined style={{ color: '#faad14' }} />
                  提示：如何上传并管理知识库文档？
                </div>
                <div onClick={toggleDocGuide} style={{ color: '#999', cursor: 'pointer', display: 'flex', alignItems: 'center' }}>
                  {isDocGuideExpanded ? <UpOutlined /> : <DownOutlined />}
                </div>
              </div>
              {isDocGuideExpanded && (
                <Row gutter={12}>
                  <Col xs={24} sm={24} md={12} lg={8}>
                    <Card
                      size="small"
                      bordered={false}
                      style={{
                        background: 'linear-gradient(90deg, #e6f4ff 0%, #f0f7ff 100%)',
                        boxShadow: '0 1px 2px rgba(0,0,0,0.04)',
                        borderRadius: 8,
                        height: '100%'
                      }}
                      bodyStyle={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', minHeight: 80 }}
                      title={<span style={{ fontWeight: 600 }}>上传知识文档</span>}
                    >
                      <div style={{ color: '#666', fontSize: 12 }}>支持多种格式（Word、PDF、图片等），单个/总大小有上限，上传后自动处理（约5-10分钟,如遇到超时，可等待几分钟后刷新页面，将自动成功）。</div>
                      {/* <div style={{ color: '#666', fontSize: 12 }}>支持pdf，doc，docx文件格式上传，建议单个文件不要超过10M，页数控制在100页以内。尽量单文件上传。</div> */}
                      <div style={{ textAlign: 'right', color: '#1677ff', fontWeight: 600 }}>step 1</div>
                    </Card>
                  </Col>
                  <Col xs={24} sm={24} md={12} lg={8}>
                    <Card
                      size="small"
                      bordered={false}
                      style={{
                        background: 'linear-gradient(90deg, #e6fffb 0%, #f0fffe 100%)',
                        boxShadow: '0 1px 2px rgba(0,0,0,0.04)',
                        borderRadius: 8,
                        height: '100%'
                      }}
                      bodyStyle={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', minHeight: 80 }}
                      title={<span style={{ fontWeight: 600 }}>查看切片与索引</span>}
                    >
                      <div style={{ color: '#666', fontSize: 12 }}>自动解析成功后可查看切片数量与索引状态，必要时可重新生成或调整配置。</div>
                      <div style={{ textAlign: 'right', color: '#1677ff', fontWeight: 600 }}>step 2</div>
                    </Card>
                  </Col>
                  <Col xs={24} sm={24} md={12} lg={8}>
                    <Card
                      size="small"
                      bordered={false}
                      style={{
                        background: 'linear-gradient(90deg, #fff7e6 0%, #fffaf0 100%)',
                        boxShadow: '0 1px 2px rgba(0,0,0,0.04)',
                        borderRadius: 8,
                        height: '100%'
                      }}
                      bodyStyle={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', minHeight: 80 }}
                      title={<span style={{ fontWeight: 600 }}>在应用中生效</span>}
                    >
                      <div style={{ color: '#666', fontSize: 12 }}>在RAG应用中切片将会被模型检索并召回，形成大模型对话的依据语料。</div>
                      <div style={{ textAlign: 'right', color: '#1677ff', fontWeight: 600 }}>step 3</div>
                    </Card>
                  </Col>
                </Row>
              )}
            </div>
          )}
          {progressBar()}
          {
              page.total === 0 &&
              <div className='knowledgeLibInfo-operation'>
                <div>
                  <Button
                      type='primary'
                      icon={ <ArrowLeftOutlined /> }
                      onClick={ () => {
                        router.navigate( { pathname: '/deepseek/knowledgeLib' } );
                      } }
                  >
                    返回
                  </Button>
                </div>
                {
                    ((createFlag&&userInfoAll.id==='1')||userInfoAll.id===params?.createBy) &&
                    <div style={ { marginTop: 20, width: '100%', height: '200px' } }>
                      <Dragger { ...props }>
                        <p className="ant-upload-drag-icon">
                          <InboxOutlined />
                        </p>
                        <p>
                          点击上传,或拖放文件到此处
                        </p>
                        <p className="ant-upload-hint">
                          {/* 支持文件格式md,txt,pdf,jpg,png,jpeg,docx,xlsx,
                          pptx,eml,csv,单个文档 ≤ 30M,单张图片 ≤ 2.5M,文件总
                          大小不得超过125M. */}
                          支持pdf，doc，docx，jpg，png，jpeg文件格式上传，建议单个文件不要超过10M，页数控制在100页以内。尽量单文件上传。
                        </p>
                      </Dragger>
                    </div>
                }
              </div>
          }
          {
              page.total > 0 &&
              <>
                <div className='knowledgeLibInfo-operation'>
                  <Button
                      style={ { marginRight: 16 } }
                      type='primary'
                      icon={ <ArrowLeftOutlined /> } onClick={ () => {
                    router.navigate( { pathname: '/deepseek/knowledgeLib' } );
                  } }>
                    返回
                  </Button>
                  {
                      ((createFlag&&userInfoAll.id==='1')||userInfoAll.id===params?.createBy) &&
                      <Upload { ...props }>
                        <Button type='primary' icon={ <PlusOutlined /> }>上传知识文件</Button>
                      </Upload>
                  }
                </div>
                
                <div className='knowledgeLibInfo-table'>
                  <Table
                      scroll={ { x: 'max-content' } }
                      rowKey={ ( record ) => record.documentId }
                      loading={ listLoading }
                      columns={ columns }
                      dataSource={ list }
                      pagination={ paginationConfig }
                  />
                </div>

                {
                    infoModalOpen &&
                    <InfoModal
                        id={ infoModalId }
                        open={ infoModalOpen }
                        onClickConfirm={ infoModalOnClickConfirm }
                        onClickCancel={ infoModalOnClickCancel }
                    />
                }

                {
                    infoModalSettingOpen &&
                    <InfoModalSetting
                        id={ infoModalSettingId }
                        open={ infoModalSettingOpen }
                        onClickConfirm={ infoModalSettingOnClickConfirm }
                        onClickCancel={ infoModalSettingOnClickCancel }
                    />
                }
              </>
          }
        </Spin>
      </div>
  );
};

export default observer( KnowledgeLibInfo );