首页样式状态

app/components/DeekSeekHome.tsx

@@ -1,21 +1,25 @@
 import * as React from 'react';
 import { useNavigate } from "react-router-dom";
-import { Dropdown, Spin } from 'antd';
+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,
@@ -51,83 +55,124 @@ const DeekSeek: React.FC = () => {
         }
     }, []);
 
+    // 处理发送消息
+    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'>
-                <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' }}>
-                            上海建科
+                {/* 左侧 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>
-                    {
-                        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 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 }}
                             >
-                                <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='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>
+                        </div>
+                    )}
                 </div>
             </div>
         </Spin>

app/components/deepSeekHome.scss

@@ -1,72 +1,390 @@
 .deekSeek {
   width: 100%;
-  /* 使用 fill-available 确保兼容性 */
-  height: -webkit-fill-available;
-  height: 100dvh;
-  /* 新的动态视口单位，推荐使用 */
-  background: linear-gradient(90.52deg, rgba(24, 126, 255, 1) 1.54%, rgba(23, 66, 255, 1) 99.26%);
-  padding-bottom: env(safe-area-inset-bottom);
-  /* 适配底部安全区域 */
+  height: 100vh;
+  display: flex;
+  background: #ffffff; /* 移除渐变背景，改为纯白色 */
+
+  /* 主要区域 */
+  &-main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background: #ffffff;
+    padding: 20px;
+    box-sizing: border-box;
+    overflow: hidden; /* 防止内容溢出 */
+  }
 
   &-header {
     width: 100%;
     height: 60px;
-    border: 1px solid rgba(24, 126, 255, 1);
+    border: 1px solid #e8e8e8; /* 改为浅灰色边框 */
+    background: #ffffff; /* 改为白色背景 */
     display: flex;
-    color: #FFFFFF;
+    color: #333333; /* 改为深灰色文字 */
     justify-content: center;
     align-items: center;
     overflow-x: auto;
     overflow-y: hidden;
     box-sizing: border-box;
+    border-radius: 8px; /* 添加圆角 */
+    margin-bottom: 20px;
+    flex-shrink: 0; /* 防止 header 被压缩 */
   }
 
   &-content {
-    width: 100%;
-    height: calc(100% - 80px - env(safe-area-inset-bottom));
+    flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
+    background: #ffffff;
+    min-height: 0; /* 允许内容区域收缩 */
 
     &-title {
       display: flex;
       justify-content: center;
-      margin-bottom: 5px;
+      margin-bottom: 20px;
+      flex-shrink: 0; /* 防止标题被压缩 */
 
       img {
         width: 200px;
+        height: auto;
       }
     }
 
     &-title-sm {
-      font-size: 20px;
-      color: #FFFFFF;
+      font-size: 24px;
+      color: #333333; /* 改为深灰色文字 */
+      font-weight: 600;
+      margin-bottom: 30px;
+      text-align: center;
+      flex-shrink: 0; /* 防止副标题被压缩 */
 
       @media (max-width: 768px) {
-        font-size: 16px;
+        font-size: 20px;
       }
 
       @media (max-width: 480px) {
-        font-size: 14px;
+        font-size: 18px;
       }
     }
 
     &-pc {
-      width: 36%;
-      min-width: 400px;
-      height: 78%;
-      background: #FFFFFF;
+      width: 100%;
+      max-width: 800px;
+      height: 600px;
+      background: #ffffff;
+      border: 1px solid #e8e8e8; /* 添加浅灰色边框 */
       border-radius: 12px;
       overflow: hidden;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 添加轻微阴影 */
+      flex-shrink: 1; /* 允许内容区域收缩 */
     }
 
     &-mobile {
-      width: 90%;
-      height: 82%;
-      background: #FFFFFF;
+      width: 100%;
+      height: 500px;
+      background: #ffffff;
+      border: 1px solid #e8e8e8; /* 添加浅灰色边框 */
       border-radius: 12px;
       overflow: hidden;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 添加轻微阴影 */
+      flex-shrink: 1; /* 允许内容区域收缩 */
+    }
+  }
+
+  /* 新增的输入区域样式 */
+  &-input-section {
+    width: 100%;
+    max-width: 800px;
+    margin-bottom: 30px;
+    flex-shrink: 0;
+  }
+
+  &-input-tabs {
+    display: flex;
+    gap: 12px;
+    margin-bottom: 16px;
+    justify-content: flex-start;
+  }
+
+  &-tab-button {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    border: 1px solid #e8e8e8;
+    background: #ffffff;
+    color: #666666;
+
+    &.active {
+      background: #1890ff;
+      color: #ffffff;
+      border-color: #1890ff;
+    }
+
+    &:hover:not(.active) {
+      border-color: #1890ff;
+      color: #1890ff;
+    }
+  }
+
+  &-tab-icon {
+    font-size: 16px;
+  }
+
+  &-input-container {
+    position: relative;
+    border: 1px solid #e8e8e8;
+    border-radius: 8px;
+    background: #ffffff;
+    padding: 16px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+      border-color: #1890ff;
+      box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
+    }
+  }
+
+  &-main-input {
+    border: none !important;
+    background: transparent !important;
+    resize: none;
+    font-size: 16px;
+    line-height: 1.5;
+    color: #333333;
+    padding: 0 !important;
+    margin-bottom: 16px;
+
+    &::placeholder {
+      color: #999999;
+    }
+
+    &:focus {
+      box-shadow: none !important;
+    }
+  }
+
+  &-input-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+  }
+
+  &-clear-button {
+    width: 32px !important;
+    height: 32px !important;
+    border-radius: 50% !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    background: #f5f5f5 !important;
+    color: #666666 !important;
+    border: none !important;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background: #e8e8e8 !important;
+      color: #333333 !important;
+    }
+  }
+
+  &-send-button {
+    width: 32px !important;
+    height: 32px !important;
+    border-radius: 50% !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    background: #1890ff !important;
+    color: #ffffff !important;
+    border: none !important;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background: #40a9ff !important;
+    }
+  }
+
+  /* 建议问题样式 */
+  &-suggestions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    margin-bottom: 20px;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  &-suggestion-button {
+    display: flex !important;
+    align-items: center !important;
+    gap: 8px !important;
+    padding: 12px 16px !important;
+    border-radius: 8px !important;
+    background: #f8f9fa !important;
+    border: 1px solid #e8e8e8 !important;
+    color: #333333 !important;
+    font-size: 14px !important;
+    transition: all 0.2s ease !important;
+    cursor: pointer !important;
+
+    &:hover {
+      background: #e9ecef !important;
+      border-color: #1890ff !important;
+      color: #1890ff !important;
+    }
+  }
+
+  &-suggestion-icon {
+    font-size: 16px;
+  }
+
+  &-suggestion-text {
+    white-space: nowrap;
+  }
+
+  /* 底部提示文字 */
+  &-footer-text {
+    text-align: center;
+    color: #999999;
+    font-size: 12px;
+    margin-top: 20px;
+    flex-shrink: 0;
+  }
+
+  /* 返回按钮 */
+  &-back-button {
+    margin-top: 20px;
+    padding: 8px 24px;
+    border-radius: 6px;
+    background: #1890ff;
+    color: #ffffff;
+    border: none;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background: #40a9ff;
+    }
+  }
+
+  /* 响应式支持 */
+  @media (max-width: 768px) {
+    &-main {
+      padding: 15px;
+    }
+
+    &-header {
+      height: 50px;
+      margin-bottom: 15px;
+    }
+
+    &-content {
+      &-title {
+        margin-bottom: 15px;
+
+        img {
+          width: 150px;
+        }
+      }
+
+      &-title-sm {
+        margin-bottom: 20px;
+      }
+
+      &-pc,
+      &-mobile {
+        height: 400px;
+      }
+    }
+
+    &-input-section {
+      margin-bottom: 20px;
+    }
+
+    &-input-tabs {
+      gap: 8px;
+      margin-bottom: 12px;
+    }
+
+    &-tab-button {
+      padding: 6px 12px;
+      font-size: 13px;
+    }
+
+    &-suggestions {
+      gap: 8px;
+      margin-bottom: 15px;
+    }
+
+    &-suggestion-button {
+      padding: 10px 12px !important;
+      font-size: 13px !important;
+    }
+  }
+
+  @media (max-width: 480px) {
+    &-main {
+      padding: 10px;
+    }
+
+    &-header {
+      height: 45px;
+      margin-bottom: 10px;
+    }
+
+    &-content {
+      &-title {
+        margin-bottom: 10px;
+
+        img {
+          width: 120px;
+        }
+      }
+
+      &-title-sm {
+        margin-bottom: 15px;
+      }
+
+      &-pc,
+      &-mobile {
+        height: 350px;
+      }
+    }
+
+    &-input-section {
+      margin-bottom: 15px;
+    }
+
+    &-input-container {
+      padding: 12px;
+    }
+
+    &-input-tabs {
+      gap: 6px;
+      margin-bottom: 10px;
+    }
+
+    &-tab-button {
+      padding: 5px 10px;
+      font-size: 12px;
+    }
+
+    &-suggestions {
+      gap: 6px;
+      margin-bottom: 12px;
+    }
+
+    &-suggestion-button {
+      padding: 8px 10px !important;
+      font-size: 12px !important;
     }
   }
 }