首页动态加载入口

app/components/DeekSeekHome.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react';
 import { useNavigate } from "react-router-dom";
+import { Dropdown, Spin } from 'antd';
 import { Chat } from './DeepSeekChat';
 import whiteLogo from "../icons/whiteLogo.png";
 import jkxz from "../icons/jkxz.png";
 import { useChatStore } from "../store";
 import { useMobileScreen } from '../utils';
+import api from "@/app/api/api";
 import './deepSeekHome.scss';
 
 const DeekSeek: React.FC = () => {
@@ -13,87 +15,94 @@ const DeekSeek: React.FC = () => {
 
     const navigate = useNavigate();
 
-    const [list, setList] = React.useState<{ title: string, onClick?: () => void }[]>([]);
+    const [listLoading, setListLoading] = React.useState(false);
 
-    const URLSearchParams = '?showMenu=false&chatMode=LOCAL';
+    type List = {
+        title: string,
+        children: {
+            title: string,
+            showMenu: string,
+            chatMode: string,
+            appId: string,
+        }[],
+    }[];
+
+    const [list, setList] = React.useState<List>([]);
+
+    const init = async () => {
+        setListLoading(true);
+        try {
+            const res = await api.get('/deepseek/api/appType');
+            setList(res.data);
+        } catch (error) {
+            console.error(error);
+        } finally {
+            setListLoading(false);
+        }
+    }
 
     React.useEffect(() => {
         chatStore.clearSessions();
-        setList([
-            // {
-            //     title: '智能问答',
-            //     onClick: () => {
-            //         navigate({ pathname: '/deepseekChat' })
-            //     }
-            // },
-            // {
-            //     title: '知识库问答',
-            //     onClick: () => {
-            //         navigate({ pathname: '/knowledgeChat' })
-            //     }
-            // },
-            {
-                title: '数字系统答疑',
-                onClick: () => {
-                    navigate({
-                        pathname: '/knowledgeChat',
-                        search: URLSearchParams + '&appId=2919668410128666624'
-                    })
-                }
-            },
-            {
-                title: '员工入职小百科',
-                onClick: () => {
-                    navigate({
-                        pathname: '/knowledgeChat',
-                        search: URLSearchParams + '&appId=2919677614293913600'
-                    })
-                }
-            },
-            {
-                title: '钢结构智能监理',
-                onClick: () => {
-                    navigate({
-                        pathname: '/knowledgeChat',
-                        search: URLSearchParams + '&appId=2920304945362505728'
-                    })
-                }
-            },
-            {
-                title: '更多',
-            }
-        ])
+        init()
     }, []);
 
     return (
-        <div className='deekSeek'>
-            <div className='deekSeek-header' style={{ justifyContent: isMobileScreen ? 'flex-start' : 'center' }}>
-                <div style={{ display: 'flex', alignItems: 'center', margin: '0 20px' }}>
-                    <img src={whiteLogo.src} style={{ width: 20, marginRight: 10 }} />
-                    <div style={{ whiteSpace: 'nowrap' }}>
-                        上海建科
-                    </div>
-                </div>
-                {
-                    list.map((item, index) => {
-                        return <div style={{ whiteSpace: 'nowrap', marginRight: 20, color: '#98b4fa', cursor: 'pointer' }} onClick={item.onClick} key={index}>
-                            {item.title}
+        <Spin spinning={listLoading}>
+            <div className='deekSeek'>
+                <div className='deekSeek-header' style={{ justifyContent: isMobileScreen ? 'flex-start' : 'center' }}>
+                    <div style={{ display: 'flex', alignItems: 'center', margin: '0 20px' }}>
+                        <img src={whiteLogo.src} style={{ width: 20, marginRight: 10 }} />
+                        <div style={{ whiteSpace: 'nowrap' }}>
+                            上海建科
                         </div>
-                    })
-                }
-            </div>
-            <div className='deekSeek-content'>
-                <div className='deekSeek-content-title'>
-                    <img src={jkxz.src} />
-                </div>
-                <div className='deekSeek-content-title-sm' style={{ marginBottom: isMobileScreen ? 14 : 36 }}>
-                    智能问答助手
+                    </div>
+                    {
+                        list.map((item, index) => {
+                            return <Dropdown
+                                menu={{
+                                    items: item.children.map((child, i) => {
+                                        return {
+                                            key: i,
+                                            label: child.title,
+                                            onClick: () => {
+                                                const search = `?showMenu=${child.showMenu}&chatMode=${child.chatMode}&appId=${child.appId}`;
+                                                navigate({
+                                                    pathname: '/knowledgeChat',
+                                                    search: search,
+                                                })
+                                            },
+                                        };
+                                    })
+                                }}
+                                key={index}
+                            >
+                                <div style={{ whiteSpace: 'nowrap', marginRight: 20, color: '#98b4fa', cursor: 'pointer' }}>
+                                    {item.title}
+                                </div>
+                            </Dropdown>
+                        })
+                    }
+                    <div style={{ whiteSpace: 'nowrap', marginRight: 20, color: '#98b4fa', cursor: 'pointer' }} onClick={() => {
+                        navigate({
+                            pathname: '/deepseekChat',
+                        })
+                    }}>
+                        DeepSeek问答
+                    </div>
                 </div>
-                <div className={isMobileScreen ? 'deekSeek-content-mobile' : 'deekSeek-content-pc'}>
-                    <Chat />
+                <div className='deekSeek-content'>
+                    <div className='deekSeek-content-title'>
+                        <img src={jkxz.src} />
+                    </div>
+                    <div className='deekSeek-content-title-sm' style={{ marginBottom: isMobileScreen ? 14 : 36 }}>
+                        智能问答助手
+                    </div>
+                    <div className={isMobileScreen ? 'deekSeek-content-mobile' : 'deekSeek-content-pc'}>
+                        <Chat />
+                    </div>
                 </div>
             </div>
-        </div>
+        </Spin>
     );
 };