Pārlūkot izejas kodu

增加“新手使用提示区块” 每个区块3个step,关闭状态保存在localStorage中。

Ryuiso 3 nedēļas atpakaļ
vecāks
revīzija
3cf9ea628e

+ 72 - 2
src/pages/deepseek/knowledgeLib/detail/index.tsx

@@ -13,9 +13,12 @@ import {
   Upload,
   UploadProps,
   message,
-  Spin
+  Spin,
+  Row,
+  Col,
+  Card
 } from 'antd';
-import { EditOutlined, DeleteOutlined, InboxOutlined, PlusOutlined, ArrowLeftOutlined } from '@ant-design/icons';
+import { EditOutlined, DeleteOutlined, InboxOutlined, PlusOutlined, ArrowLeftOutlined, CloseOutlined, BulbOutlined } from '@ant-design/icons';
 import InfoModal from './components/InfoModal';
 import InfoModalSetting from './components/InfoModalSetting';
 import router from '@/router';
@@ -69,6 +72,9 @@ const KnowledgeLibInfo : React.FC = () => {
   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');
+  const hideDocGuide = () => { localStorage.setItem('knowledgeDocGuideHidden', 'true'); setShowDocGuide(false); };
 
   const props : UploadProps = {
     name: 'files',
@@ -360,6 +366,70 @@ const KnowledgeLibInfo : React.FC = () => {
   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: 8 }}>
+                <div style={{ fontSize: 13, color: '#333', display: 'flex', alignItems: 'center', gap: 6 }}>
+                  <BulbOutlined style={{ color: '#faad14' }} />
+                  提示:如何上传并管理知识库文档?
+                </div>
+                <CloseOutlined onClick={hideDocGuide} 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 }}>支持多种格式(Word、PDF、图片等),单个/总大小有上限,上传后自动处理(约5-10分钟,如遇到超时,可等待几分钟后刷新页面,将自动成功)。</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>
+          )}
           {
               page.total === 0 &&
               <div className='knowledgeLibInfo-operation'>

+ 71 - 2
src/pages/deepseek/knowledgeLib/list/index.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 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 dayjs from 'dayjs';
 import store from './store';
@@ -36,6 +36,9 @@ const KnowledgeLibList: React.FC = () => {
     const [updateFlag, setUpdateFlag] = React.useState<boolean>();
     const [listFlag, setListFlag] = React.useState<boolean>();
     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(() => {
         init();
         const cFlag = LocalStorage.getStatusFlag('deepseek:knowledge:create');
@@ -240,6 +243,72 @@ const KnowledgeLibList: React.FC = () => {
                 </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'>
                 <Table
                     scroll={{ x: 'max-content' }}

+ 72 - 2
src/pages/deepseek/questionAnswer/list/index.tsx

@@ -17,7 +17,7 @@ import {
   Space,
   Row,
   Col,
-  Input, Cascader
+  Input, Cascader, Card
 } from 'antd';
 import {
   PlusOutlined,
@@ -30,7 +30,7 @@ import {
   BookOutlined,
   TeamOutlined,
   AppstoreOutlined,
-  EditOutlined
+  EditOutlined, CloseOutlined, BulbOutlined
 } from '@ant-design/icons';
 import { apis } from '@/apis';
 import './style.less';
@@ -135,6 +135,9 @@ const QuestionAnswerList: React.FC = () => {
   const wrapperRef = React.useRef<HTMLDivElement>(null);
   const selectRef = React.useRef<any>(null);
   const [levelTypeList, setLevelTypeList] = React.useState<AppTypeList>([]);
+  // 新手引导整体可见性(持久化到 localStorage)
+  const [showGuide, setShowGuide] = React.useState<boolean>(() => localStorage.getItem('appGuideHidden') !== 'true');
+  const hideGuide = () => { localStorage.setItem('appGuideHidden', 'true'); setShowGuide(false); };
 
   const appApi = {
     fetchList: async (typeId: any, projectId: any) => {
@@ -453,6 +456,7 @@ const QuestionAnswerList: React.FC = () => {
           colon={false}
           style={{ flex: 1 }}
         >
+
           <div>
             {/* 主选择器 - 修改为按钮组形式 */}
             <FormItem
@@ -601,6 +605,72 @@ const QuestionAnswerList: React.FC = () => {
 
         </Form>
       </div>
+      
+      {/* 新手使用提示区块 */}
+      {showGuide && (
+        <div style={{ padding: '12px 20px 12px 20px' }}>
+          <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' }} />
+              提示:如何创建并发布自己的RAG(增强检索生成)应用?
+            </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 }}>点击右上角,创建应用,选择模型与知识范围,配置Prompt、检索策略并调试。</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 }}>发布后可在相应的项目内使用。</div>
+                <div style={{ textAlign: 'right', color: '#1677ff', fontWeight: 600 }}>step 3</div>
+              </Card>
+            </Col>
+          </Row>
+        </div>
+      )}
       {
         list.length
           ?

+ 2 - 2
src/pages/deepseek/questionAnswer/list/style.less

@@ -1,6 +1,6 @@
 .questionAnswerList {
   width: 100%;
-  height: 100%;
+  // height: 100%;
   background: #FFFFFF;
   border-radius: @border-radius-base;
   padding: 16px 20px;
@@ -8,7 +8,7 @@
 
 .applicationList {
   width: 100%;
-  min-height: 600px;
+  // min-height: 600px;
 }
 
 .card{

+ 1 - 1
src/pages/layout/style.less

@@ -270,7 +270,7 @@
 
 
 .main-content {
-    padding-bottom: 40px;
+    // padding-bottom: 40px;
     display: flex;
     flex-direction: column;
     height: calc(100vh - 114px); /* 减去Header(64px)和面包屑(50px) */