chat-client-web/app/components/DeekSeekHome.tsx

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 = () => {
    const chatStore = useChatStore();
    const isMobileScreen = useMobileScreen();

    const navigate = useNavigate();

    const [listLoading, setListLoading] = React.useState(false);

    type List = {
        title: string,
        children: {
            title: string,
            showMenu: string,
            chatMode: string,
            appId: string,
            children: List[number]['children'],
        }[],
    }[];

    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();
        const userInfo = localStorage.getItem('userInfo');

        if (userInfo) {
            init();
        }
    }, []);

    return (
        <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>
                    {
                        list.map((item, index) => {
                            return <Dropdown
                                menu={{
                                    items: item.children.map((child, i) => {
                                        return {
                                            key: 'child' + i,
                                            label: <div
                                                onClick={() => {
                                                    const search = `?showMenu=${child.showMenu}&chatMode=${child.chatMode}&appId=${child.appId}`;
                                                    if (child.appId) {
                                                        navigate({
                                                            pathname: '/knowledgeChat',
                                                            search: search,
                                                        })
                                                    }
                                                }}
                                            >
                                                {child.title}
                                            </div>,
                                            children: child.children ? child.children.map((record, ind) => {
                                                return {
                                                    key: 'record' + ind,
                                                    label: <div
                                                        onClick={() => {
                                                            const search = `?showMenu=${record.showMenu}&chatMode=${record.chatMode}&appId=${record.appId}`;
                                                            if (record.appId) {
                                                                navigate({
                                                                    pathname: '/knowledgeChat',
                                                                    search: search,
                                                                })
                                                            }
                                                        }}
                                                    >
                                                        {record.title}
                                                    </div>
                                                };
                                            }) : undefined,
                                        };
                                    })
                                }}
                                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 style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
                        <button
                            className='open-platform-btn'
                            onClick={() => window.open('https://llm.jkec.info:11431', '_blank')}
                        >
                            建科 • 小智开放平台
                        </button>
                    </div>
                    {/* 右侧跳转按钮 */}
                    <div style={{
                        marginLeft: 'auto', // 自动占据左侧空间，将按钮推到最右侧
                        marginRight: 20 // 右侧间距，与其他元素保持一致
                    }}>
                        <button
                            onClick={() => {
                                // 跳转到其他平台的逻辑，这里使用window.open举例
                                const userInfo = localStorage.getItem('userInfo');
                                const tokenParam = userInfo ? "?token=" + JSON.parse(userInfo).token : "";
                                window.open('http://localhost:3100' + tokenParam, '_blank');
                                // 如果是内部路由跳转，可以使用navigate:
                                // navigate('/target-path');
                            }}
                            style={{
                                padding: '6px 12px',
                                backgroundColor: '#165DFF', // 蓝色按钮，可根据设计调整
                                color: 'white',
                                border: 'none',
                                borderRadius: 4,
                                cursor: 'pointer',
                                whiteSpace: 'nowrap'
                            }}
                        >
                            前往开放平台
                        </button>
                    </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 : 20 }}>
                        智能问答助手
                    </div>
                    <div className={isMobileScreen ? 'deekSeek-content-mobile' : 'deekSeek-content-pc'}>
                        <Chat />
                    </div>
                </div>
            </div>
        </Spin>
    );
};

export default DeekSeek;