Просмотр исходного кода

增加动态添加按钮(创建问答应用、创建知识库)到 面包屑组件

Ryuiso 5 месяцев назад
Родитель
Сommit
b36e10f618

+ 17 - 3
src/pages/deepseek/knowledgeLib/list/index.tsx

@@ -45,7 +45,20 @@ const KnowledgeLibList: React.FC = () => {
         setUpdateFlag(tFlag);
         const lFlag = LocalStorage.getStatusFlag('deepseek:knowledge:list');
         setListFlag(lFlag);
-        return () => reset();
+        
+        // 监听面包屑创建知识库事件
+        const handleKnowledgeLibCreate = (event: CustomEvent) => {
+            if (event.detail.platform === 'deepseek') {
+                onClickCreate();
+            }
+        };
+        
+        window.addEventListener('knowledgeLibCreate', handleKnowledgeLibCreate as EventListener);
+        
+        return () => {
+            reset();
+            window.removeEventListener('knowledgeLibCreate', handleKnowledgeLibCreate as EventListener);
+        };
     }, []);
 
     const columns: TableColumnsType<Record> = [
@@ -200,7 +213,7 @@ const KnowledgeLibList: React.FC = () => {
 
     return (
         <div className='knowledgeLibList'>
-            {
+            {/* {
                 createFlag &&
                 <div className='knowledgeLibList-operation'>
 
@@ -213,7 +226,8 @@ const KnowledgeLibList: React.FC = () => {
                     </Button>
 
                 </div>
-            }
+            } */}
+            {/* 创建按钮已移至面包屑组件 */}
             <div className='knowledgeLibList-table'>
                 <Table
                     scroll={{ x: 'max-content' }}

+ 6 - 2
src/pages/deepseek/knowledgeLib/list/store.ts

@@ -68,16 +68,20 @@ const useKnowledgeLibListStore = (): KnowledgeLibListStore => {
         createKnowledgeLib: async (data: CreateOrModifyKnowledgeLibApiParams) => {
             actions.setListLoading(true);
             try {
-                const res =await apis.createTakaiKnowledgeLib(data);
+                //console.log('DeepSeek创建知识库请求参数:', data);
+                const res = await apis.createTakaiKnowledgeLib(data);
+                // console.log('DeepSeek创建知识库响应:', res);
                 // 获取知识库列表
                 api.fetchKnowledgeLibList();
                 if(res.data === 1 && res.code === 200){
                     message.success('创建成功');
                 }else{
+                    console.error('DeepSeek创建知识库响应异常:', res);
                     message.error('创建失败');
                 }
             } catch (error: any) {
-                message.error(error.msg);
+                console.error('DeepSeek创建知识库错误:', error);
+                message.error(error.msg || '创建失败');
             }finally{
                 actions.setListLoading(false);
             }

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

@@ -495,7 +495,7 @@ const QuestionAnswerList : React.FC = () => {
             
             </FormItem>
             
-            {
+            {/* {
                 createFlag && (
                     
                     <div style={ { marginLeft: 'auto' } }>
@@ -506,7 +506,9 @@ const QuestionAnswerList : React.FC = () => {
                               } }>创建问答应用</Button>
                     </div>
                 )
-            }
+            } 
+             */}
+            {/* 创建按钮已移至面包屑组件 */}
           
           </Form>
         </div>

+ 56 - 4
src/pages/layout/components/Breadcrumb.tsx

@@ -1,14 +1,61 @@
 import * as React from 'react';
-import { Link } from 'react-router-dom';
-import { Breadcrumb as AntdBreadcrumb } from 'antd';
+import { Link, useLocation } from 'react-router-dom';
+import { Breadcrumb as AntdBreadcrumb, Button } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
 import { State } from '../types';
+import router from '@/router';
 
 interface Props {
     routerMatchList: State['routerMatchList'],
+    onKnowledgeLibCreate?: () => void; // 知识库创建回调
 };
 
 const Breadcrumb: React.FC<Props> = (props: Props) => {
-    const { routerMatchList } = props;
+    const { routerMatchList, onKnowledgeLibCreate } = props;
+    const location = useLocation();
+
+    // 根据当前路由生成动态按钮
+    const getDynamicButton = () => {
+        const path = location.pathname;
+        
+        // 问答应用列表页面
+        if (path === '/deepseek/questionAnswer' || path === '/zhipu/questionAnswer') {
+            return (
+                <Button 
+                    type="primary" 
+                    icon={<PlusOutlined />}
+                    onClick={() => {
+                        const basePath = path.startsWith('/deepseek') ? '/deepseek' : '/zhipu';
+                        router.navigate(`${basePath}/questionAnswer/create`);
+                    }}
+                >
+                    创建问答应用
+                </Button>
+            );
+        }
+        
+        // 知识库列表页面
+        if (path === '/deepseek/knowledgeLib' || path === '/zhipu/knowledgeLib') {
+            return (
+                <Button 
+                    type="primary" 
+                    icon={<PlusOutlined />}
+                    onClick={() => {
+                        // 触发自定义事件,让页面组件监听并处理
+                        const event = new CustomEvent('knowledgeLibCreate', {
+                            detail: { platform: path.startsWith('/deepseek') ? 'deepseek' : 'zhipu' }
+                        });
+                        window.dispatchEvent(event);
+                    }}
+                >
+                    创建知识库
+                </Button>
+            );
+        }
+        
+        // 其他页面不显示按钮
+        return null;
+    };
 
     const items = routerMatchList.map((item, index) => {
         const color = (index === 0 || index < routerMatchList.length - 1) ? '#8C8C8C' : '#595959';
@@ -23,7 +70,12 @@ const Breadcrumb: React.FC<Props> = (props: Props) => {
     });
 
     return (
-        <AntdBreadcrumb className='breadcrumb' items={items} />
+        <div className='breadcrumb-container'>
+            <AntdBreadcrumb className='breadcrumb' items={items} />
+            <div className='breadcrumb-actions'>
+                {getDynamicButton()}
+            </div>
+        </div>
     );
 };
 

+ 15 - 10
src/pages/platforms/zhipu/knowledgeLib/list/index.tsx

@@ -31,7 +31,20 @@ const KnowledgeLibList: React.FC = () => {
 
     React.useEffect(() => {
         init();
-        return () => reset();
+        
+        // 监听面包屑创建知识库事件
+        const handleKnowledgeLibCreate = (event: CustomEvent) => {
+            if (event.detail.platform === 'zhipu') {
+                onClickCreate();
+            }
+        };
+        
+        window.addEventListener('knowledgeLibCreate', handleKnowledgeLibCreate as EventListener);
+        
+        return () => {
+            reset();
+            window.removeEventListener('knowledgeLibCreate', handleKnowledgeLibCreate as EventListener);
+        };
     }, []);
 
     const columns: TableColumnsType<Record> = [
@@ -155,15 +168,7 @@ const KnowledgeLibList: React.FC = () => {
 
     return (
         <div className='knowledgeLibList'>
-            <div className='knowledgeLibList-operation'>
-                <Button
-                    type='primary'
-                    icon={<PlusOutlined />}
-                    onClick={onClickCreate}
-                >
-                    创建知识库
-                </Button>
-            </div>
+            {/* 创建按钮已移至面包屑组件 */}
             <div className='knowledgeLibList-table'>
                 <Table
                     scroll={{ x: 'max-content' }}

+ 5 - 2
src/pages/platforms/zhipu/knowledgeLib/list/store.ts

@@ -66,12 +66,15 @@ const useKnowledgeLibListStore = (): KnowledgeLibListStore => {
         // 创建知识库
         createKnowledgeLib: async (data: CreateOrModifyKnowledgeLibApiParams) => {
             try {
-                await apis.createKnowledgeLib(data);
+                //console.log('智谱AI创建知识库请求参数:', data);
+                const res = await apis.createKnowledgeLib(data);
+                // console.log('智谱AI创建知识库响应:', res);
                 // 获取知识库列表
                 await api.fetchKnowledgeLibList();
                 message.success('创建成功');
             } catch (error: any) {
-                message.error(error.msg);
+                console.error('智谱AI创建知识库错误:', error);
+                message.error(error.msg || '创建失败');
             }
         },
         // 修改知识库

+ 1 - 5
src/pages/platforms/zhipu/questionAnswer/list/index.tsx

@@ -187,11 +187,7 @@ const QuestionAnswerList : React.FC = () => {
                 {/*</div>*/}
                 <div style={ { display: 'flex', justifyContent: 'space-between', padding: '16px 20px' } }>
                   <div>所有问答应用</div>
-                  <Button type='primary'
-                          icon={ <PlusOutlined /> }
-                          onClick={ () => {
-                            router.navigate( { pathname: '/zhipu/questionAnswer/create' } );
-                          } }>创建问答应用</Button>
+                  {/* 创建按钮已移至面包屑组件 */}
                 </div>
                 <div className='applicationList'>
                   <List grid={ {