chat-tools/app/components/DeekSeekHome.tsx

import * as React from 'react';
import { useNavigate } from "react-router-dom";
import { Dropdown, Spin, Input, Button, Space } 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 { SideBar } from './sidebar';
import './deepSeekHome.scss';

const { TextArea } = Input;

const DeekSeek: React.FC = () => {
    const chatStore = useChatStore();
    const isMobileScreen = useMobileScreen();
    const navigate = useNavigate();

    const [listLoading, setListLoading] = React.useState(false);
    const [isChatActive, setIsChatActive] = React.useState(false); // 新增状态：聊天是否激活
    const [userInput, setUserInput] = React.useState(''); // 新增状态：用户输入

    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();
        }
    }, []);

    // 处理发送消息
    const handleSend = () => {
        if (userInput.trim()) {
            setIsChatActive(true);
            // 这里可以添加发送消息的逻辑
            console.log('发送消息:', userInput);
        }
    };

    // 处理输入框点击，激活聊天界面
    const handleInputClick = () => {
        setIsChatActive(true);
    };

    // 重置到初始状态
    const resetToHome = () => {
        setIsChatActive(false);
        setUserInput('');
    };

    return (
        <Spin spinning={listLoading}>
            <div className='deekSeek'>
                {/* 左侧 Sidebar */}
                <SideBar />
                
                {/* 主要区域 */}
                <div className='deekSeek-main'>
                    {!isChatActive ? (
                        // 未交互状态：显示简化对话框
                        <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='deekSeek-input-section'>
                                <div className='deekSeek-input-tabs'>
                                    <Button className='deekSeek-tab-button active'>
                                        <span className='deekSeek-tab-icon'>⚛️</span>
                                        DeepSeek-R1
                                    </Button>
                                    <Button className='deekSeek-tab-button'>
                                        <span className='deekSeek-tab-icon'>🌐</span>
                                        联网搜索
                                    </Button>
                                </div>
                                
                                <div className='deekSeek-input-container' onClick={handleInputClick}>
                                    <TextArea
                                        value={userInput}
                                        onChange={(e) => setUserInput(e.target.value)}
                                        placeholder="输入您的问题或需求, Control+Enter换行"
                                        className='deekSeek-main-input'
                                        autoSize={{ minRows: 3, maxRows: 6 }}
                                        onKeyDown={(e) => {
                                            if (e.ctrlKey && e.key === 'Enter') {
                                                handleSend();
                                            }
                                        }}
                                        onClick={(e) => e.stopPropagation()} // 阻止事件冒泡
                                    />
                                    
                                    <div className='deekSeek-input-actions'>
                                        <Button 
                                            type='text' 
                                            className='deekSeek-clear-button'
                                            onClick={(e) => {
                                                e.stopPropagation();
                                                setUserInput('');
                                            }}
                                        >
                                            ✕
                                        </Button>
                                        <Button 
                                            type='primary' 
                                            className='deekSeek-send-button'
                                            onClick={(e) => {
                                                e.stopPropagation();
                                                handleSend();
                                            }}
                                        >
                                            ✈️
                                        </Button>
                                    </div>
                                </div>
                            </div>
                            
                            {/* 底部提示 */}
                            <div className='deekSeek-footer-text'>
                                内容由AI生成，仅供参考
                            </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>
                            {/* 返回按钮 */}
                            <Button 
                                className='deekSeek-back-button'
                                onClick={resetToHome}
                                style={{ marginTop: 20 }}
                            >
                                返回首页
                            </Button>
                        </div>
                    )}
                </div>
            </div>
        </Spin>
    );
};

export default DeekSeek;