'use client';

import { Avatar, Icon } from '@lobehub/ui';
import { Card, Button, List, Image, Flex, Tabs, Table, Space, Upload, Form, Input, Select, Modal } from "antd";
import { StarOutlined, StarFilled, StarTwoTone, CloudUploadOutlined} from '@ant-design/icons';
import { createStyles } from 'antd-style';
import { LucideArrowUpRightFromSquare, TelescopeIcon } from 'lucide-react';
import Link from 'next/link';
import { memo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Flexbox } from 'react-layout-kit';

import Notification from '@/components/Notification';
import { BRANDING_NAME } from '@/const/branding';
import { PRIVACY_URL } from '@/const/url';
import { useServerConfigStore } from '@/store/serverConfig';
import { serverConfigSelectors } from '@/store/serverConfig/selectors';
import { useUserStore } from '@/store/user';
import { preferenceSelectors } from '@/store/user/selectors';
import styled from 'styled-components';
const { Search } = Input;
const { Dragger } = Upload;
const { TextArea } = Input;
const useStyles = createStyles(({ css, token }) => ({
  listStyle: css`
    border: none !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;
  `,
  iconImg: css`
    width: 48px;
    height: 48px;
  `,
  title: css`
    font-size: 18px;
    font-weight: 700;
  `,
  dec: css`
    color: #666666;
  `,
  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;
    }
  `,
  importButtonStyle: css`
    font-size: 16px;
    color: #0044FF;
    border: none;
    padding: 18px 30px !important;
    box-sizing: border-box;
    background-color: rgba(0, 68, 255, 0.102);
    margin-left: 50px;
    &:hover {
      color: #0044FF !important;
      background-color: rgba(0, 68, 255, 0.102) !important;
    }
  `,
  buttonManage: css`
    background: url(/images/manage.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;
    }
  `,
  buttonDelete: css`
    background: url(/images/delete.png) center center no-repeat;
    background-size: 14px;
    &:before {
      content: "11";
      visibility: hidden;
    }
  `,
  tableHead: css`
    .ant-table-thead {
      .ant-table-cell {
        background-color: #F1F8FF !important
      }
    }
  `,
  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
        }
      }
    }
  `,
  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;
  `,
  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;
  `,
  importFileCard: css`
    .ant-card-body {
      height: 100%
    }
  `,
  previewContainer: css`
    width: 100%;
    height: 100%;
    background: #F7F7F7;
    text-align: center;
    padding: 30% 0;
  `,
  testContent: css`
    width: 100%;
    height: 500px;
    margin-top: 15px;
    padding: 10px;
    border-radius: 2px;
    border: 1px solid #D9D9D9;
  `,
  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;
    }
  `,
  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;
    }
  `,
  checkTitle: css`
    color: #0044FF;
    margin-right: 5px;
  `,
  checkItem: css`
    margin-top: 15px;
  `,
  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;
      }
    }
  `,
  formStyle: css`
     .ant-form-item-label {
       width: 100px !important;
     }
  `,
}));

const KnowledgeList = memo<{ mobile?: boolean }>(() => {
  const { cx, styles, theme } = useStyles();
  const [value, setValue] = useState(1)
  const [tabValue, setTabValue] = useState(1)
  const [tabsVal, setTabsVal] = useState(1)
  const [cardValue, setCardValue] = useState(1)
  const [form] = Form.useForm();
  const [formValues, setFormValues] = useState();
  const [open, setOpen] = useState(false);
  const createForm = (values) => {
    console.log(44444)
      setFormValues(values);
      setOpen(false);
  };
  const handleOk = () => {
    form.validateFields().then(values => {
          console.log(88888,values)
      setFormValues(values);
      setOpen(false);
    }).catch(info => {
      console.error('Validation failed', info);
    });
  };
  const { t } = useTranslation('common');
  const data = [
    {
      title: '',
    },
    {
      title: '',
    },
    {
      title: '',
    },
    {
      title: '',
    },
  ];

  const columnsAll = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      render: (text, record, index) => `${index + 1}`,
    },
    {
      title: '文件名',
      dataIndex: 'filename',
      key: 'filename',
    },
    {
      title: '文件类型',
      dataIndex: 'filetype',
      key: 'filetype',
    },
    {
      title: '文件大小(KB)',
      key: 'filesize',
      dataIndex: 'filesize',
    },
    {
      title: 'tokens',
      key: 'tokens',
      dataIndex: 'tokens',
    },
    {
      title: '知识库条数',
      key: 'num',
      dataIndex: 'num',
    },
    {
      title: '状态',
      key: 'status',
      dataIndex: 'status',
    },
    {
      title: '更新时间',
      key: 'updatetime',
      dataIndex: 'updatetime',
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      width: 300,
      render: (_, record) => (
        <Space size={50}>
          <a style={{color: '#0044FF'}}>查看</a>
          <a style={{color: '#26D308'}}>重命名</a>
          <a style={{color: '#FF0C0C'}}>删除</a>
        </Space>
      ),
    },
  ];
  const columnsDocument = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      render: (text, record, index) => `${index + 1}`,
    },
    {
      title: '内容',
      dataIndex: 'content',
      key: 'content',
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      width: 300,
      render: (_, record) => (
        <Space size={50}>
          <a style={{color: '#0044FF'}}>查看</a>
          <a style={{color: '#26D308'}}>编辑</a>
          <a style={{color: '#FF0C0C'}}>删除</a>
        </Space>
      ),
    },
  ];
  const columnsQuestion = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      render: (text, record, index) => `${index + 1}`,
    },
    {
      title: '问题',
      dataIndex: 'question',
      key: 'question',
    },
    {
      title: '回答',
      dataIndex: 'answer',
      key: 'answer',
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      width: 300,
      render: (_, record) => (
        <Space size={50}>
          <a style={{color: '#0044FF'}}>查看</a>
          <a style={{color: '#26D308'}}>编辑</a>
          <a style={{color: '#FF0C0C'}}>删除</a>
        </Space>
      ),
    },
  ];
  const tableDataAll = [
    {
      key: '1',
      filename: '测试文件',
      filetype: '问答',
      filesize: '1',
      tokens: '64',
      num: '2',
      status: '生效',
      updatetime: '2024-10-31 12:12:12'
    },
    {
      key: '2',
      filename: '测试文件',
      filetype: '问答',
      filesize: '1',
      tokens: '64',
      num: '2',
      status: '生效',
      updatetime: '2024-10-31 12:12:12'
    },
    {
      key: '3',
      filename: '测试文件',
      filetype: '问答',
      filesize: '1',
      tokens: '64',
      num: '2',
      status: '生效',
      updatetime: '2024-10-31 12:12:12'
    },
  ];

  const tableDataDocument = [
    {
      key: '1',
      content: '这是一段描述，这是一段描述这是一段描述，这是一段描述，这是一段描述，这是一段描述，',
    },
    {
      key: '2',
      content: '这是一段描述，这是一段描述这是一段描述，这是一段描述，这是一段描述，这是一段描述，',
    },
  ];

  const tableDataQuestion = [
    {
      key: '1',
      question: '这是问题内容',
      answer: '这是回答内容',
    },
    {
      key: '2',
      question: '这是问题内容',
      answer: '这是回答内容',
    },
  ];

  const handleChange = () => {

  }

  const items = [
    {
      key: '1',
      label: '全部',
      children: <Table columns={columnsAll} dataSource={tableDataAll} className={styles.tableHead}/>,
    },
    {
      key: '2',
      label: '文档',
      children: <>
        <Select
            defaultValue="集智AI产品架构设计.pdf"
            style={{
              width: 200,
            }}
            onChange={handleChange}
            className={styles.selectStyle}
            options={[
              {
                value: '集智AI产品架构设计.pdf',
                label: '集智AI产品架构设计.pdf',
              },
            ]}
          />
        <Table columns={columnsDocument} dataSource={tableDataDocument} className={styles.tableHead}/>
      </>,
    },
    {
      key: '3',
      label: '问答',
      children: <>
        <Select
            defaultValue="template.csv"
            style={{
              width: 200,
            }}
            onChange={handleChange}
            className={styles.selectStyle}
            options={[
              {
                value: 'template.csv',
                label: 'template.csv',
              },
            ]}
          />
        <Table columns={columnsQuestion} dataSource={tableDataQuestion} className={styles.tableHead}/>
      </>,
    },
  ];

  const onSearch = () => {

  }

  const handleTabChange = (val) => {
    console.log(val,5555)
    setTabsVal(val)
  }

  const operations = <>
     <Search
        placeholder="请输入"
        allowClear
        onSearch={onSearch}
        style={{
          width: 200,
        }}
        className={styles.searchStyle}
      />
      {
        tabsVal == 1?(
          <Button className={styles.importButtonStyle} type="text" onClick={null} shape="round" size="small" variant="solid">
              导入
          </Button>
        ):null
      }
  </>;

 const handleSwitch = (val) => {
  setValue(val)
 }

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

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

 const renderItem = () => {
   const props = {
     name: 'file',
     multiple: true,
     action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',
     onChange(info) {
       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 bordered={false}>
          <Tabs tabBarExtraContent={operations} items={items} onChange={handleTabChange} className={styles.tabStyle}/>
        </Card>
     </>
   } else if(tabValue == 2) {
     return <>
      <div style={{height: '100%'}}>
        <Flex justify='space-between' gap={30} style={{height: '100%'}}>
           <Card bordered={false} style={{width: '100%',padding: '0 30px',height: '85%'}}>
             <Flex gap={50}>
                 <div className={`${cardValue == 1 ?  styles.documentCardActive : styles.documentCard}`} onClick={(val)=>handleSelectCard(1)}>
                     <Flex>
                       <Image style={{width: '28px',marginTop: '9px'}} preview={false} src="/images/question.png" />
                       <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={(val)=>handleSelectCard(2)}>
                   <Flex>
                     <Image style={{width: '35px',marginTop: '9px'}} preview={false} src="/images/answer.png" />
                     <div style={{marginLeft: '20px'}}>
                       <div className={styles.title}>问答</div>
                       <div className={styles.dec}>一问一答导入，准确性更佳</div>
                     </div>
                    </Flex>
                 </div>
             </Flex>
             <div style={{fontSize: '20px',color: '#3D3D3D',marginTop: '50px'}}>上传文件:</div>
             <div style={{fontSize: '15px',color: '#999999',marginTop: '10px', marginBottom: '70px'}}>
               {
                 cardValue == 1 ? '支持txt、pdf、md、docx格式文件，单次最多上传10个文件。单个文件大小不超过15M.':(<>
                    <div>支持CSV(双列)格式文件，单次可上传10个文件，单个大小不超过15M。</div>
                    <div>
                      上传文件需和模板文件格式一直(CSV UTF-8格式)
                      <span style={{color: '#0044FF',marginLeft: '20px',cursor: 'pointer'}}>下载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>
           <Card bordered={false} style={{width: '100%',height: '85%'}} className={styles.importFileCard}>
             <div className={styles.previewContainer}>
                <Image preview={false} src="/images/empty.png" />
                <div style={{paddingLeft: '30px'}}>导入后可在此预览</div>
             </div>
           </Card>
         </Flex>
      </div>
     </>
   } else {
      return <>
       <div style={{height: '100%'}}>
        <Flex justify='space-between' gap={30} style={{height: '100%'}}>
           <Card bordered={false} style={{width: '20%',height: '85%'}}>
             <Flex justify='space-between'>
                  <div style={{fontSize: '18px',fontWeight: '500',color: '#333333'}}>测试文本</div>
                  <Button className={styles.checkButtonStyle} type="text" onClick={null} shape="round" size="small" variant="solid">
                      检测
                  </Button>
             </Flex>
             <div className={styles.testContent}>测试文本</div>
           </Card>
           <Card bordered={false} style={{width: '80%',height: '85%'}} className={styles.importFileCard}>
             <div style={{fontSize: '18px',fontWeight: '500',color: '#333333',marginBottom: '15px'}}>检测结果</div>
             <Flex justify='space-between' gap={20} style={{marginBottom: '20px'}}>
                <div className={styles.documentCardActive} style={{ padding: '20px' }}>
                    <Flex justify='space-between'>
                      <div>
                       <span className={styles.checkTitle}>相似度:</span>
                       <span>0.9212</span>
                      </div>
                      <Button className={styles.viewButtonStyle} shape="round" size="small" variant="solid">
                          查看记录
                      </Button>
                     </Flex>
                     <div className={styles.checkItem}>
                      <span className={styles.checkTitle}>问题:</span>
                     </div>
                     <div>
                      <span>什么是LinkAI</span>
                     </div>
                     <div className={styles.checkItem}>
                      <span className={styles.checkTitle}>答案:</span>
                     </div>
                     <div>
                      <span>LinkAI是一站式的AI应用平台，地址是:https://link-ai.tech/</span>
                     </div>
                </div>
                <div className={styles.documentCardActive} style={{ padding: '20px' }}>
                    <Flex justify='space-between'>
                      <div>
                       <span className={styles.checkTitle}>相似度:</span>
                       <span>0.9212</span>
                      </div>
                      <Button className={styles.viewButtonStyle} shape="round" size="small" variant="solid">
                          查看记录
                      </Button>
                     </Flex>
                     <div className={styles.checkItem}>
                      <span className={styles.checkTitle}>问题:</span>
                     </div>
                     <div>
                      <span>什么是LinkAI</span>
                     </div>
                     <div className={styles.checkItem}>
                      <span className={styles.checkTitle}>答案:</span>
                     </div>
                     <div>
                      <span>LinkAI是一站式的AI应用平台，地址是:https://link-ai.tech/</span>
                     </div>
                </div>
             </Flex>
             <Flex justify='space-between' gap={20} style={{marginBottom: '20px'}}>
                <div className={styles.documentCardActive} style={{padding: '20px'}}>
                    <Flex justify='space-between'>
                      <div>
                       <span className={styles.checkTitle}>相似度:</span>
                       <span>0.9212</span>
                      </div>
                      <Button className={styles.viewButtonStyle} shape="round" size="small" variant="solid">
                          查看记录
                      </Button>
                     </Flex>
                     <div className={styles.checkItem}>
                      <span className={styles.checkTitle}>问题:</span>
                     </div>
                     <div>
                      <span>什么是LinkAI</span>
                     </div>
                     <div className={styles.checkItem}>
                      <span className={styles.checkTitle}>答案:</span>
                     </div>
                     <div>
                      <span>LinkAI是一站式的AI应用平台，地址是:https://link-ai.tech/</span>
                     </div>
                </div>
                <div className={styles.documentCardActive} style={{padding: '20px'}}>
                    <Flex justify='space-between'>
                      <div>
                       <span className={styles.checkTitle}>相似度:</span>
                       <span>0.9212</span>
                      </div>
                      <Button className={styles.viewButtonStyle} shape="round" size="small" variant="solid">
                          查看记录
                      </Button>
                     </Flex>
                     <div className={styles.checkItem}>
                      <span className={styles.checkTitle}>问题:</span>
                     </div>
                     <div>
                      <span>什么是LinkAI</span>
                     </div>
                     <div className={styles.checkItem}>
                      <span className={styles.checkTitle}>答案:</span>
                     </div>
                     <div>
                      <span>LinkAI是一站式的AI应用平台，地址是:https://link-ai.tech/</span>
                     </div>
                </div>
             </Flex>
           </Card>
         </Flex>
      </div>
      </>
   }
 }

  return (
    <>
      <div style={{display: value == 1 ? 'block': 'none'}}>
        <div style={{ marginLeft: '60px', fontSize: '20px', height: '70px', lineHeight: '70px'}}>
            我的知识库
        <Button className={styles.buttonStyle} style={{marginLeft: '24px'}} onClick={() => setOpen(true)} type="link" shape="round" size="small" variant="solid">
            创建知识库
        </Button>
        </div>
        <Modal
          open={open}
          title="创建知识库"
          okText="保存"
          cancelText="取消"
          okButtonProps={{
            autoFocus: true,
            htmlType: 'submit',
          }}
          onCancel={() => setOpen(false)}
          destroyOnClose
          modalRender={(dom) => (
            <Form
              form={form}
              name="form_in_modal"
              className={styles.formStyle}
              clearOnDestroy
              onFinish={(values) => createForm(values)}
            >
              {dom}
            </Form>
          )}
          className={styles.modalStyle}
        >
          <Form.Item
            name="title"
            label="知识库名称"
            rules={[
              {
                required: true,
                message: '请输入',
              },
            ]}
          >
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item name="description" label="知识库描述">
            <TextArea rows={4} placeholder="请输入" maxLength={255} />
          </Form.Item>
        </Modal>
        <List
          dataSource={data}
          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}>政务助手知识库<span style={{color: '#0E46FF',marginLeft: '20px',fontSize: '14px',fontWeight: 'normal'}}>ID: 23039282</span></div>
                        <div>简介: 该知识库主要包括xxxxxx相关知识、xxxxxx相关知识、xxxxxx相关知识、xxxxxx相关知识</div>
                      </div>
                     </Flex>
                  </div>
                  <div style={{lineHeight: '53px'}}>
                    <Button type="link" style={{color: '#902EFF'}} onClick={(val)=>handleSwitch(2)}>
                        <span className={styles.buttonManage}></span>
                        管理
                    </Button>
                    <Button type="link" style={{color: '#005EFF'}}>
                        <span className={styles.buttonEdit}></span>
                        编辑
                    </Button>
                    <Button type="link" style={{color: '#FF0C0C'}}>
                        <span className={styles.buttonDelete}></span>
                        删除
                    </Button>
                  </div>
                </Flex>
              </Card>
            </List.Item>
          )}
        />
      </div>
      <div style={{display: value == 2 ? 'block': 'none',margin: '20px',height: '100%'}}>
        <Flex justify='space-between'>
          <div>
            <Button className={`${tabValue == 1 ?  styles.buttonStyleActive : styles.buttonStyle}`} type="text"onClick={(val)=>handleSelectTab(1)} shape="round" size="small" variant="solid">
                文件管理
            </Button>
            <Button className={`${tabValue == 2 ?  styles.buttonStyleActive : styles.buttonStyle}`} type="text"onClick={(val)=>handleSelectTab(2)} shape="round" size="small" variant="solid">
                文件导入
            </Button>
            <Button className={`${tabValue == 3 ?  styles.buttonStyleActive : styles.buttonStyle}`} type="text" onClick={(val)=>handleSelectTab(3)} shape="round" size="small" variant="solid">
                监测测试
            </Button>
          </div>
          <Button className={styles.buttonStyle} type="text" onClick={(val)=>handleSwitch(1)} shape="round" size="small" variant="solid">
              返回知识库
          </Button>
        </Flex>
        <div style={{marginTop: '20px',height: '100%'}}>
          {renderItem()}
        </div>
      </div>
    </>
  );
});

export default KnowledgeList;
