'use client';

// import { Avatar, Icon } from '@lobehub/ui';
import { Card, Button, List, Image, Flex, Tabs, Table, Space, Upload, Input, Select, App, Popconfirm, Empty,Col, Row } from "antd";
import { CloudUploadOutlined} from '@ant-design/icons';
import { createStyles } from 'antd-style';
import { memo, useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
// import { Flexbox } from 'react-layout-kit';
import KnowledgeCreateForm from './KnowledgeCreateForm'; //新增表单
import KnowledgeUpdateForm from './KnowledgeUpdateForm'; //编辑表单
// import request from '@/app/api/request';
import { Virtuoso } from 'react-virtuoso';
import { useKnowledgeBaseStore } from '@/store/knowledgeBase';
import DragUpload from '@/components/DragUpload';
import { useFileStore } from '@/store/file';
import UploadDock from '@/features/FileManager/UploadDock';
import { useQueryState } from 'nuqs';
import { formatSize } from '@/utils/format';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import { SortType } from '@/types/files';
import { useRouter } from 'next/navigation';
import { lambdaQuery } from '@/libs/trpc/client';
import SkeletonLoading from './Loading';
import isEqual from 'fast-deep-equal';
const { Search } = Input;
const { Dragger } = Upload;
const { TextArea } = Input;
dayjs.extend(relativeTime);
const useStyles = createStyles(({ css }) => ({
  buttonDelete: css`
    background: url(/images/delete.png) center center no-repeat;
    background-size: 14px;
    &:before {
      content: "11";
      visibility: hidden;
    }
  `,
  buttonEdit: css`
    background: url(/images/edit.png) center center no-repeat;
    background-size: 14px;
    &:before {
      content: "11";
      visibility: hidden;
    }
  `,
  buttonManage: css`
    background: url(/images/manage.png) center center no-repeat;
    background-size: 14px;
    &:before {
      content: "11";
      visibility: hidden;
    }
  `,
  buttonStyle: css`
    font-size: 16px;
    color: #2E62FF;
    border-color: #678DFF;
    padding: 20px 30px !important;
    margin-right: 24px;
    box-shadow: 0px 2px 9px 0px rgba(95, 135, 255, 0.4);
    box-sizing: border-box;
    background-color: #fff;
    &:hover {
      border-color: #678DFF !important;
      color: #2E62FF !important;
      background-color: #fff !important;
    }
  `,
  buttonStyleActive: css`
    font-size: 16px;
    color: #fff;
    padding: 20px 30px !important;
    margin-right: 24px;
    box-shadow: 0px 2px 9px 0px rgba(95, 135, 255, 0.4);
    box-sizing: border-box;
    border-color: #0044FF;
    background-color: #0044FF;
    &:hover {
      border-color: #0044FF !important;
      background-color: #0044FF !important;
      color: #fff !important;
    }
  `,
  cardStyle: css`
    box-shadow: 1px 0px 12px 0px rgba(42, 77, 255, 0.19);
    border: none;
    border-radius: 8px;
    padding: 10px 0;
    width: 100%;
    margin: 0 50px;
  `,
  checkButtonStyle: css`
    font-size: 16px;
    color: #fff;
    padding: 15px 30px !important;
    box-shadow: 0px 2px 9px 0px rgba(95, 135, 255, 0.4);
    box-sizing: border-box;
    border-color: #0044FF;
    background-color: #0044FF;
    &:hover {
      border-color: #0044FF !important;
      background-color: #0044FF !important;
      color: #fff !important;
    }
  `,
  checkItem: css`
    margin-top: 15px;
  `,
  checkTitle: css`
    color: #0044FF;
    margin-right: 5px;
  `,
  dec: css`
    color: #666666;
  `,
  documentCard: css`
    width: 100%;
    padding: 30px 30px;
    border-radius: 16px;
    opacity: 1;
    background: #fff;
    box-sizing: border-box;
    border: 1px solid #E5E5E5;
    cursor: pointer;
  `,
  documentCardActive: css`
    width: 100%;
    padding: 30px 30px;
    border-radius: 16px;
    opacity: 1;
    background: rgba(0, 68, 255, 0.05);
    box-sizing: border-box;
    border: 1px solid #0044FF;
    cursor: pointer;
  `,
  documentCardCheck: css`
    min-height: 200px;
    margin-bottom: 10px;
    padding: 20px !important;
    border-radius: 16px;
    opacity: 1;
    background: rgba(0, 68, 255, 0.05);
    box-sizing: border-box;
    border: 1px solid #0044FF;

  `,
  checkContent: css`
    height: calc(100% - 30px) !important;
  `,
  formStyle: css`
     .ant-form-item-label {
       width: 100px !important;
     }
  `,
  iconImg: css`
    width: 48px;
    height: 48px;
  `,
  importButtonStyle: css`
    font-size: 16px;
    color: #0044FF;
    border: none;
    padding: 5px 20px;
    box-sizing: border-box;
    background-color: rgba(0, 68, 255, 0.102);
    margin-left: 50px;
    cursor: pointer;
    border-radius: 20px;
    &:hover {
      color: #0044FF !important;
      background-color: rgba(0, 68, 255, 0.102) !important;
    }
  `,
  importFileCard: css`
    .ant-card-body {
      height: 100%
    }
  `,
  listStyle: css`
    border: none !important;
  `,
  modalStyle: css`
    .ant-modal-body {
      padding: 20px 0;
    }
    .ant-modal-footer {
      .ant-btn:nth-child(1) {
        width: 73px;
        height: 36px;
        border-radius: 4px;
        opacity: 1;
        background: #EBF4FF;
        box-sizing: border-box;
        border: 1px solid #B8D8FF;
        color: #177FFF;
      }
      .ant-btn:nth-child(2) {
        width: 73px;
        height: 36px;
        border-radius: 4px;
        opacity: 1;

        background: #80B9FF;
      }
    }
  `,
  previewContainer: css`
    width: 100%;
    height: 100%;
    background: #F7F7F7;
    text-align: center;
    padding: 30% 0;
  `,
  searchStyle: css`
    .ant-input-affix-wrapper {
      border: none;
      background-color: #F3F6FF;
    }
    .ant-input-search-button {
      border: none;
      background-color: #F3F6FF;
      &:hover {
        background-color: #F3F6FF !important;
      }
      .ant-btn-icon {
        color: #0044FF !important;
      }
    }
  `,
  selectStyle: css`
    .ant-select-selector {
      border: none !important;
      background-color: #F0F3FD !important;
    }
    .ant-select-selection-item {
      color: #4A73FF
    }
    .ant-select-arrow {
      color: #2959FF
    }
    margin-bottom: 15px;
  `,
  tabStyle: css`
    .ant-tabs-tab {
      margin-right: 40px !important;
    }
    .ant-tabs-tab-btn {
      color: #648EFF
    }
    .ant-tabs-tab.ant-tabs-tab-active {
      .ant-tabs-tab-btn {
        color: #0044FF
      }
    }
    .ant-pagination {
      .ant-pagination-item-active {
        border-color: #0056FF !important
        a {
            color: #0056FF !important
        }
      }
    }
  `,
  tableHead: css`
    .ant-table-thead {
      .ant-table-cell {
        background-color: #F1F8FF !important
      }
    }
  `,
  testContent: css`
    width: 100%;
    height: 500px !important;
    margin-top: 15px;
    padding: 10px;
  `,
  title: css`
    font-size: 18px;
    font-weight: 700;
  `,
  viewButtonStyle: css`
    font-size: 16px;
    color: #0044FF;
    border-color: #BECFFF;
    padding: 10px 15px !important;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0) !important;
    &:hover {
      border-color: #BECFFF !important;
      color: #0044FF !important;
      background-color: rgba(255, 255, 255, 0) !important;
    }
  `,
}));

const KnowledgeList = memo<{ mobile?: boolean }>(() => {
  const { cx, styles } = useStyles();
  const { t } = useTranslation(['components', 'common']);
  const router = useRouter();
  const { message, modal } = App.useApp();
  const [value, setValue] = useState(1)
  const [tabValue, setTabValue] = useState(1)
  const [tabsVal, setTabsVal] = useState("1")
  const [cardValue, setCardValue] = useState(1)
  const [updateFormValues, setUpdateFormValues] = useState({})
  const [knowledgeBaseId, setKnowledgeBaseId] = useState('')
  const [modalVisible, setModalVisible] = useState(false);
  const [updateModalVisible, setUpdateModalVisible] = useState(false);
  const [docFileData, setDocFileData] = useState([]);
  const [questionFileData, setQuestionFileData] = useState([]);
  const [queryData, setQueryData] = useState('');

  const [testContent, setTestContent] = useState('');
  const [useFetchKnowledgeBaseList, createNewKnowledgeBase, updateKnowledgeBase, removeKnowledgeBase] = useKnowledgeBaseStore(
    (s) => [
      s.useFetchKnowledgeBaseList,
      s.createNewKnowledgeBase,
      s.updateKnowledgeBase,
      s.removeKnowledgeBase,
    ],
  );
  const { data, isLoading } = useFetchKnowledgeBaseList();
  const [viewConfig, setViewConfig] = useState({ showFilesInKnowledgeBase: false });

  const [sorter] = useQueryState('sorter', {
    clearOnDefault: true,
    defaultValue: 'createdAt',
  });
  const [sortType] = useQueryState('sortType', {
    clearOnDefault: true,
    defaultValue: SortType.Desc,
  });
  const [useFetchFileManage, pushDockFileList, removeFile, semanticSearch, parseFiles] = useFileStore((s) => [
    s.useFetchFileManage,
    s.pushDockFileList,
    s.removeFileItem,
    s.semanticSearch,
    s.parseFilesToChunks,
  ]);

  const isSimilaritySearching = useFileStore((s) => s.isSimilaritySearching);
  const dataSource = useFileStore((s) => s.similaritySearchChunks, isEqual);
  // useEffect(() => {

  // }, []); // 空数组[]意味着仅在组件挂载时调用一次
  console.log(knowledgeBaseId,sortType,sorter,'--------44444444444444444------------')
  const { data: dataAllFile } = useFetchFileManage({
    // category,
    knowledgeBaseId,
    q: queryData,
    sortType,
    sorter,
    ...viewConfig,
  });
  console.log(data,'999999999999999999')
  console.log(dataAllFile,'8888888888888888888888')

  const columnsAll = [
    {
      dataIndex: 'index',
      key: 'index',
      render: (text, record, index) => `${index + 1}`,
      title: '序号',
      width: 80,
    },
    {
      dataIndex: 'name',
      key: 'name',
      title: '文件名',
      // width: 150,
      render: (_,record) => (
        <Space size={50}>
          {record.name?.match(/(.*)\.(.*)/)[1]}
        </Space>
      ),
    },
    {
      dataIndex: 'fileType',
      key: 'fileType',
      title: '文件类型',
      width: 200,
      render: (_,record) => (
        <Space size={50}>
          {record.name?.match(/(.*)\.(.*)/)[2]}
        </Space>
      ),
    },
    {
      dataIndex: 'size',
      key: 'size',
      title: '文件大小(KB)',
      width: 200,
      render: (_,record) => (
        <Space size={50}>
          {formatSize(record.size)}
        </Space>
      ),
    },
    // {
    //   dataIndex: 'tokens',
    //   key: 'tokens',
    //   title: 'tokens',
    // },
    // {
    //   dataIndex: 'num',
    //   key: 'num',
    //   title: '知识库条数',
    // },
    // {
    //   dataIndex: 'status',
    //   key: 'status',
    //   title: '状态',
    // },
    {
      dataIndex: 'createdAt',
      key: 'createdAt',
      title: '创建时间',
      width: 200,
      render: (_,record) => (
        <Space size={50}>
          {dayjs().diff(dayjs(record.createdAt), 'd') < 7
          ? dayjs(record.createdAt).fromNow()
          : dayjs(record.createdAt).format('YYYY-MM-DD')}
        </Space>
      ),
    },
    {
      align: 'center',
      key: 'action',
      width: 200,
      render: (_,record) => (
        <Space size={50}>
          <a style={{color: '#0044FF'}} onClick={() => {
            router.push(`/files/${record.id}`);
          }}>查看</a>
          <a style={{color: '#FF0C0C'}} onClick={() => handleDeleteFile(record)}>删除</a>
        </Space>
      ),
      title: '操作',
    },
  ];


  const handleChange = (e) => {
    console.log(e.target.value,'--9999222222----')
    setTestContent(e.target.value)
  }

  const handleCheck = () => {
    if(testContent != "") semanticSearch(testContent, "");
    console.log(testContent,'--635353535355----')
  }

  const handleAdd = async(fields) => {
      await createNewKnowledgeBase({
          description: fields.description,
          name: fields.name,
      });
      // message.success('添加成功');
      setModalVisible(false);
  };

  const handleModalVisible = (flag) => {
     setModalVisible(!!flag);
  };

  const handleUpdate = async(fields) => {
      await updateKnowledgeBase(fields.id, { name: fields.name, description: fields.description});
      // message.success('修改成功');
      setUpdateModalVisible(false);

  };

  const handleUpdateModalVisible = (flag, record) => {
      setUpdateModalVisible(!!flag);
      setUpdateFormValues(record || {});
  };

  const handleDeleteRecord = async(fields) => {
      modal.confirm({
        content: '知识库删除后将不可恢复，请谨慎操作',
        okButtonProps: { danger: true },
        onOk: async () => {
          await removeKnowledgeBase(fields.id);
          // message.success('删除成功');
        },
      });
  };

  const handleDeleteFile = async(fields) => {
      modal.confirm({
        content: t('FileManager.actions.confirmDelete'),
        okButtonProps: { danger: true },
        onOk: async () => {
          await removeFile(fields.id);
          // message.success('删除成功');
        },
      });
  };


  const onSearch = (val) => {
    setQueryData(val)
    setTabsVal("1")
    console.log(val,'333333-------------------')
  }

  const handleTabChange = async(val) => {
    console.log(val,"5555")
    setTabsVal(val)
    if(val == 2) {
      await setDocFileData(dataAllFile?.filter((item)=> {
          return item.fileType != 'text/csv'
      }))
      console.log(docFileData,'182828282828288')
    } else if(val == 3) {
      setQuestionFileData(dataAllFile?.filter((item)=> {
          return item.fileType == 'text/csv'
      }))
    }
  }

  const handleSwitch = (val,item) => {
   setValue(val)
   setTabValue(1)
   setKnowledgeBaseId(item.id)
  }

  const handleSelectTab = (val) => {
    console.log(val)
   setTabValue(val)
  }

  const handleSelectCard = (val) => {
    console.log(val,"5555")
    setCardValue(val)
  }

  const parentMethods = {
     handleAdd: handleAdd,
     handleModalVisible: handleModalVisible,
  };

  const updateMethods = {
     handleUpdate: handleUpdate,
     handleUpdateModalVisible: handleUpdateModalVisible,
  };

  const items = [
    {
      children: <Table className={styles.tableHead} columns={columnsAll} dataSource={dataAllFile} scroll={{
        x: 'max-content',
        y: 380,
      }}/>,
      key: '1',
      label: '全部',
    },
    {
      children: <>
        <Table className={styles.tableHead} columns={columnsAll} dataSource={docFileData} scroll={{
        x: 'max-content',
        y: 380,
      }}/>
      </>,
      key: '2',
      label: '文档',
    },
    {
      children: <>
        <Table className={styles.tableHead} columns={columnsAll} dataSource={questionFileData} scroll={{
        x: 'max-content',
        y: 380,
      }}/>
      </>,
      key: '3',
      label: '问答',
    },
  ];

  const operations = <>
     <Search
        allowClear
        className={styles.searchStyle}
        onSearch={onSearch}
        placeholder="请输入"
        style={{
          width: 200,
        }}
      />
      {
        tabsVal == 1?(
          <Upload
            beforeUpload={async (file) => {
              let fileType = 'txt,pdf,md,docx';
              if(cardValue == 1) {
                 fileType = 'txt,pdf,md,docx';
              } else {
                 fileType = 'csv';
              }
              console.log(file,"77777777777777777")
              const isJpgOrPng = fileType.includes(file.name?.match(/(.*)\.(.*)/)[2])
              if (!isJpgOrPng) {
                message.error(`你只能上传${fileType}文件!`);
                return false;
              }
              const isLt2M = file.size / 1024 / 1024 < 15;
              if (!isLt2M) {
                message.error('文件大小不能超过 15MB!');
                return false;
              }
              await pushDockFileList([file], knowledgeBaseId)


              return false;
            }}
            multiple={true}
            showUploadList={false}
          >
            <div className={styles.importButtonStyle}>导入</div>
          </Upload>
        ):null
      }
  </>;

 const renderItem = () => {
   const props = {
     action: '#',
     async beforeUpload(file) {
        let fileType = 'txt,pdf,md,docx';
       if(cardValue == 1) {
          fileType = 'txt,pdf,md,docx';
       } else {
          fileType = 'csv';
       }
       const isJpgOrPng = fileType.includes(file.name?.match(/(.*)\.(.*)/)[2])
       if (!isJpgOrPng) {
         message.error(`你只能上传${fileType}文件!`);
         return false;
       }
       const isLt2M = file.size / 1024 / 1024 < 15;
       if (!isLt2M) {
         message.error('文件大小不能超过 15MB!');
         return false;
       }
       await pushDockFileList([file], knowledgeBaseId);
       return Upload.LIST_IGNORE;
     },
     multiple: true,
     name: 'file',
     onChange(info) {
       console.log(info,"2928282828")
       const { status } = info.file;
       if (status !== 'uploading') {
         console.log(info.file, info.fileList);
       }
       if (status === 'done') {
         message.success(`${info.file.name} file uploaded successfully.`);
       } else if (status === 'error') {
         message.error(`${info.file.name} file upload failed.`);
       }
     },
     onDrop(e) {
       console.log('Dropped files', e.dataTransfer.files);
     },
   };
   if(tabValue === 1) {
     return (
      <Card variant="borderless">
        <Tabs className={styles.tabStyle} activeKey={tabsVal} items={items} onChange={handleTabChange} tabBarExtraContent={operations} />
      </Card>
     )
   } else if(tabValue === 2) {
     return (
        <div style={{height: '100%'}}>
          <Flex gap={30} justify='space-between' style={{height: '100%'}}>
             <Card variant="borderless" style={{height: '85%', padding: '0 30px', width: '100%'}}>
               <Flex gap={50}>
                   <div className={`${cardValue === 1 ?  styles.documentCardActive : styles.documentCard}`} onClick={()=>handleSelectCard(1)}>
                       <Flex>
                         <Image preview={false} src="/images/question.png" style={{marginTop: '9px', width: '28px'}} />
                         <div style={{marginLeft: '20px'}}>
                           <div className={styles.title}>文档</div>
                           <div className={styles.dec}>自动解析文档，使用方便</div>
                         </div>
                        </Flex>
                   </div>
                   <div className={`${cardValue === 2 ?  styles.documentCardActive : styles.documentCard}`} onClick={()=>handleSelectCard(2)}>
                     <Flex>
                       <Image preview={false} src="/images/answer.png" style={{marginTop: '9px',width: '35px'}} />
                       <div style={{marginLeft: '20px'}}>
                         <div className={styles.title}>问答</div>
                         <div className={styles.dec}>一问一答导入，准确性更佳</div>
                       </div>
                      </Flex>
                   </div>
               </Flex>
               <div style={{color: '#3D3D3D',fontSize: '20px',marginTop: '50px'}}>上传文件:</div>
               <div style={{color: '#999999',fontSize: '15px',marginBottom: '70px',marginTop: '10px' }}>
                 {
                   cardValue === 1 ? '支持txt、pdf、md、docx格式文件，单次最多上传10个文件。单个文件大小不超过15M.':(<>
                      <div>支持CSV(双列)格式文件，单次可上传10个文件，单个大小不超过15M。</div>
                      <div>
                        上传文件需和模板文件格式一致(CSV UTF-8格式)
                        <span style={{color: '#0044FF',cursor: 'pointer',marginLeft: '20px'}}>下载CSV模板</span>
                      </div>
                   </>)
                 }
               </div>
               <Dragger {...props}>
                   <p style={{margin: '50px 0'}}>
                     <CloudUploadOutlined style={{fontSize: '20px',marginRight: '15px'}}/>
                     <span style={{fontSize: '16px'}}>拖入文件或点击上传</span>
                   </p>
               </Dragger>
             </Card>
           </Flex>
        </div>
     )
   } else {
      console.log(dataSource,'检索测试91919191991199--------------', isSimilaritySearching)
      return (
        <div style={{height: '100%'}}>
          <Flex gap={30} justify='space-between'style={{height: '100%'}}>
             <Card variant="borderless" style={{height: '85%', width: '20%'}}>
               <Flex justify='space-between'>
                    <div style={{color: '#333333',fontSize: '18px',fontWeight: '500'}}>测试文本</div>
                    <Button className={styles.checkButtonStyle} onClick={handleCheck} shape="round" size="small" type="text" variant="solid">
                        检索
                    </Button>
               </Flex>
               <div>
                  <TextArea className={styles.testContent} onChange={handleChange} rows={4} placeholder="请输入测试文本" />
               </div>
             </Card>
             {isSimilaritySearching ? (
              <Card variant="borderless" className={styles.importFileCard} style={{height: '85%',width: '80%'}}>
                 <SkeletonLoading />
              </Card>
             ):(
                <Card variant="borderless" className={styles.importFileCard} style={{height: '85%',width: '80%'}}>
                  <div style={{color: '#333333',fontSize: '18px',fontWeight: '500',marginBottom: '15px'}}>检索结果</div>
                  {dataSource && dataSource.length > 0?(
                      <Virtuoso
                        data={dataSource}
                        className={styles.checkContent}
                        itemContent={(index, item) => (
                          <div key={item.id} className={styles.documentCardCheck}>
                              <span>{item.text}</span>
                          </div>
                        )}
                      />
                  ):(
                    <Empty style={{marginTop: '120px'}}/>
                  )}
                </Card>
             )}
           </Flex>
        </div>
      )
   }
 }

  return (
    <div style={{width: '100%',marginTop: '60px'}}>
      <div style={{display: value === 1 ? 'block': 'none'}}>
        <div style={{ fontSize: '20px', height: '70px', lineHeight: '70px', marginLeft: '60px', }}>
            我的知识库
        <Button className={styles.buttonStyle} onClick={() => setModalVisible(true)} shape="round" size="small" style={{marginLeft: '24px'}} type="link" variant="solid">
            创建知识库
        </Button>
        </div>
        <KnowledgeCreateForm {...parentMethods} open={modalVisible} />
        {updateFormValues && Object.keys(updateFormValues).length ? (
            <KnowledgeUpdateForm
                {...updateMethods}
                open={updateModalVisible}
                values={updateFormValues}
            />
        ) : null}
        <List
          dataSource={data}
          loading={isLoading}
          style={{height: 'calc(100vh - 150px)',overflow: 'auto'}}
          renderItem={(item) =>
            <List.Item className={styles.listStyle}>
              <Card className={styles.cardStyle}>
                <Flex justify='space-between'>
                  <div>
                    <Flex>
                      <Image className={cx(styles.iconImg)} preview={false} src="/images/zsk1.png" />
                      <div style={{marginLeft: '20px'}}>
                        <div className={styles.title}>{item.name}<span style={{color: '#0E46FF',fontSize: '14px',fontWeight: 'normal',marginLeft: '20px'}}>ID: {item.id}</span></div>
                        <div>简介: {item.description}</div>
                      </div>
                     </Flex>
                  </div>
                  <div style={{lineHeight: '53px'}}>
                    <Button onClick={()=>handleSwitch(2,item)}  style={{color: '#902EFF'}} type="link">
                        <span className={styles.buttonManage}></span>
                        管理
                    </Button>
                    <Button onClick={() => handleUpdateModalVisible(true, item)} style={{color: '#005EFF'}} type="link">
                        <span className={styles.buttonEdit}></span>
                        编辑
                    </Button>
                    <Button onClick={() => handleDeleteRecord(item)} style={{color: '#FF0C0C'}} type="link">
                        <span className={styles.buttonDelete}></span>
                        删除
                    </Button>
                  </div>
                </Flex>
              </Card>
            </List.Item>
          }
        />
      </div>
      <div style={{display: value === 2 ? 'block': 'none',height: '100%',margin: '20px'}}>
        <Flex justify='space-between'>
          <div>
            <Button className={`${tabValue === 1 ? styles.buttonStyleActive : styles.buttonStyle}`} onClick={()=>handleSelectTab(1)} shape="round" size="small" type="text" variant="solid">
                文件管理
            </Button>
            <Button className={`${tabValue === 2 ? styles.buttonStyleActive : styles.buttonStyle}`} onClick={()=>handleSelectTab(2)} shape="round" size="small" type="text" variant="solid">
                文件导入
            </Button>
            <Button className={`${tabValue === 3 ? styles.buttonStyleActive : styles.buttonStyle}`} onClick={()=>handleSelectTab(3)} shape="round" size="small" type="text" variant="solid">
                检索测试
            </Button>
          </div>
          <Button className={styles.buttonStyle} onClick={()=>handleSwitch(1)} shape="round" size="small" type="text" variant="solid">
              返回知识库
          </Button>
        </Flex>
        <UploadDock />
        <div style={{height: '100%', marginTop: '20px'}}>
          {renderItem()}
        </div>
      </div>
    </div>
  );
});

export default KnowledgeList;
