|
@@ -1,8 +1,8 @@
|
|
|
import * as React from 'react';
|
|
import * as React from 'react';
|
|
|
import { Link } from 'react-router-dom';
|
|
import { Link } from 'react-router-dom';
|
|
|
import { observer } from 'mobx-react';
|
|
import { observer } from 'mobx-react';
|
|
|
-import { Button, Table, TableColumnsType, Modal, TablePaginationConfig } from 'antd';
|
|
|
|
|
-import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
|
|
|
|
|
|
|
+import { Button, Table, TableColumnsType, Modal, TablePaginationConfig, Row, Col, Card } from 'antd';
|
|
|
|
|
+import { PlusOutlined, EditOutlined, DeleteOutlined, CloseOutlined, BulbOutlined } from '@ant-design/icons';
|
|
|
import InfoModal from './components/InfoModal';
|
|
import InfoModal from './components/InfoModal';
|
|
|
import dayjs from 'dayjs';
|
|
import dayjs from 'dayjs';
|
|
|
import store from './store';
|
|
import store from './store';
|
|
@@ -36,6 +36,9 @@ const KnowledgeLibList: React.FC = () => {
|
|
|
const [updateFlag, setUpdateFlag] = React.useState<boolean>();
|
|
const [updateFlag, setUpdateFlag] = React.useState<boolean>();
|
|
|
const [listFlag, setListFlag] = React.useState<boolean>();
|
|
const [listFlag, setListFlag] = React.useState<boolean>();
|
|
|
const [userInfoAll, setUserInfoAll] = React.useState<any>({});
|
|
const [userInfoAll, setUserInfoAll] = React.useState<any>({});
|
|
|
|
|
+ // 新手引导(知识库)整体可见性(持久化到 localStorage)
|
|
|
|
|
+ const [showGuide, setShowGuide] = React.useState<boolean>(() => localStorage.getItem('knowledgeGuideHidden') !== 'true');
|
|
|
|
|
+ const hideGuide = () => { localStorage.setItem('knowledgeGuideHidden', 'true'); setShowGuide(false); };
|
|
|
React.useEffect(() => {
|
|
React.useEffect(() => {
|
|
|
init();
|
|
init();
|
|
|
const cFlag = LocalStorage.getStatusFlag('deepseek:knowledge:create');
|
|
const cFlag = LocalStorage.getStatusFlag('deepseek:knowledge:create');
|
|
@@ -240,6 +243,72 @@ const KnowledgeLibList: React.FC = () => {
|
|
|
</div>
|
|
</div>
|
|
|
} */}
|
|
} */}
|
|
|
{/* 创建按钮已移至面包屑组件 */}
|
|
{/* 创建按钮已移至面包屑组件 */}
|
|
|
|
|
+
|
|
|
|
|
+ {/* 新手使用提示区块(知识库) */}
|
|
|
|
|
+ {showGuide && (
|
|
|
|
|
+ <div style={{ padding: '12px 20px 12px 20px', background: '#fff' }}>
|
|
|
|
|
+ <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
|
|
|
|
|
+ <div style={{ fontSize: 13, color: '#333', display: 'flex', alignItems: 'center', gap: 6 }}>
|
|
|
|
|
+ <BulbOutlined style={{ color: '#faad14' }} />
|
|
|
|
|
+ 提示: 如何创建并管理自己的知识库?
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <CloseOutlined onClick={hideGuide} style={{ color: '#999', cursor: 'pointer' }} />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <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 }}>点击右上角“创建知识库”,按需填写名称与描述,当前仅创建空的知识库集合。</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 }}>上传Word, Pdf等多种文档格式,支持图片 OCR,查看切片与索引状态,按需更新或删除,保持知识内容最新。</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 }}>创建RAG应用时引用知识库</span>}
|
|
|
|
|
+ >
|
|
|
|
|
+ <div style={{ color: '#666', fontSize: 12 }}>在RAG应用配置中选择此知识库参与检索问答。</div>
|
|
|
|
|
+ <div style={{ textAlign: 'right', color: '#1677ff', fontWeight: 600 }}>step 3</div>
|
|
|
|
|
+ </Card>
|
|
|
|
|
+ </Col>
|
|
|
|
|
+ </Row>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ )}
|
|
|
<div className='knowledgeLibList-table'>
|
|
<div className='knowledgeLibList-table'>
|
|
|
<Table
|
|
<Table
|
|
|
scroll={{ x: 'max-content' }}
|
|
scroll={{ x: 'max-content' }}
|