新增自定义聊天样式，优化移动端输入框和滚动条样式，调整聊天组件布局以提升用户体验

app/components/DeepSeekChat.tsx

@@ -15,7 +15,7 @@ import { useNavigate, useLocation } from "react-router-dom";
 // 本地组件和工具导入
 import { IconButton } from "./button";
 import { MaskAvatar } from "./mask";
-import styles from "./chat.module.scss";
+import styles from "./chatHomeOnly.module.scss";
 
 // 图标资源导入
 import LeftIcon from "../icons/left.svg";
@@ -801,7 +801,7 @@ export function DeleteImageButton( props : { deleteImage : () => void } ) {
   );
 }
 
-function _Chat() {
+function _Chat(props?: { onMessageSent?: () => void }) {
   type RenderMessage = ChatMessage & { preview? : boolean };
   
   const chatStore = useChatStore();
@@ -852,13 +852,13 @@ function _Chat() {
     } );
   }, [] )
   
-  const [ inputRows, setInputRows ] = useState( 2 );
+  const [ inputRows, setInputRows ] = useState( isMobileScreen ? 1 : 2 );
   const measure = useDebouncedCallback(
       () => {
         const rows = inputRef.current ? autoGrowTextArea( inputRef.current ) : 1;
         const inputRows = Math.min(
             20,
-            Math.max( 2 + Number( !isMobileScreen ), rows ),
+            Math.max( isMobileScreen ? 1 : (2 + Number( !isMobileScreen )), rows ),
         );
         setInputRows( inputRows );
       },
@@ -920,8 +920,11 @@ function _Chat() {
     localStorage.setItem( LAST_INPUT_KEY, userInput );
     setUserInput( "" );
     setPromptHints( [] );
-    if ( !isMobileScreen ) inputRef.current?.focus();
+    // 取消输入框的选定状态
+    inputRef.current?.blur();
     setAutoScroll( true );
+    // 通知父组件消息已发送
+    props?.onMessageSent?.();
   };
   
   const onPromptSelect = ( prompt : RenderPrompt ) => {
@@ -1463,6 +1466,8 @@ function _Chat() {
     )
   }
   
+  const location = useLocation();
+  
   return (
       <div className={ styles.chat } key={ session.id }>
         {
@@ -1777,7 +1782,7 @@ function _Chat() {
                 </Tooltip>}
                 {/*联网搜索按钮*/ }
                 <div style={ {
-                  padding: '0 12px',
+                  padding: isMobileScreen ? '0 8px' : '0 12px',
                   height: 28,
                   borderRadius: 18,
                   fontSize: 12,
@@ -1802,9 +1807,11 @@ function _Chat() {
                          height: 16,
                        } }
                   />
-                  <span style={ { fontSize: 11, marginLeft: 5, marginRight: 10 } }>
-                    联网搜索
-                  </span>
+                  {!isMobileScreen && (
+                    <span style={ { fontSize: 11, marginLeft: 5, marginRight: 10 } }>
+                      联网搜索
+                    </span>
+                  )}
                 </div>
               </div>
               
@@ -1895,7 +1902,9 @@ function _Chat() {
                       alignItems: 'center',
                       cursor: 'pointer',
                     } }
-                    onClick={ () => {
+                    onClick={ ( e ) => {
+                      e.preventDefault();
+                      e.stopPropagation();
                       if ( couldStop ) {
                         stopAll();
                       } else {
@@ -1917,9 +1926,11 @@ function _Chat() {
             </div>
           </label>
           
-          <div style={ { marginTop: 8, textAlign: 'center', color: '#888888', fontSize: 12 } }>
-            内容由AI生成，仅供参考
-          </div>
+          
+            <div style={ { marginTop: 8, textAlign: 'center', color: '#888888', fontSize: 12 } }>
+              内容由AI生成，仅供参考
+            </div>
+         
         </div>
         {
             showExport && (
@@ -1939,7 +1950,7 @@ function _Chat() {
   );
 }
 
-export function Chat() {
+export function Chat(props?: { onMessageSent?: () => void }) {
   const globalStore = useGlobalStore();
   const chatStore = useChatStore();
   const sessionIndex = chatStore.currentSessionIndex;
@@ -1950,5 +1961,5 @@ export function Chat() {
     chatStore.setWebSearch( false );
   }, [] );
   
-  return <_Chat key={ sessionIndex }></_Chat>;
+  return <_Chat key={ sessionIndex } onMessageSent={props?.onMessageSent}></_Chat>;
 }

app/components/chat-custom.module.scss

@@ -0,0 +1,21 @@
+// 自定义样式文件，专门用于 chat.tsx 组件
+// 导入原始样式作为基础
+@import "./chat.module.scss";
+
+// 移动端适配
+@media only screen and (max-width: 600px) {
+  // 移动端输入框容器高度调整
+  .chat-input-panel-inner {
+    min-height: 50px !important;
+    max-height: 50px !important;
+  }
+
+  // 移动端输入框高度调整为一行
+  .chat-input {
+    min-height: 50px !important;
+    padding: 14px 60px 14px 16px !important; // 右侧留出发送按钮空间
+    font-size: 16px !important;
+    line-height: 22px !important;
+  }
+}
+

app/components/chat.module.scss

@@ -280,6 +280,7 @@
   flex-direction: column;
   position: relative;
   height: 100%;
+  background-color: #fdfdfd;
   // background-image: url("/chat-bg.jpg");
   /* 使背景图片按比例填充容器 */
   background-size: cover;
@@ -295,6 +296,16 @@
   overflow-x: hidden;
   padding: 20px;
   padding-bottom: 40px;
+  
+  // 移动端隐藏滚动条
+  @media only screen and (max-width: 600px) {
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+    
+    &::-webkit-scrollbar {
+      display: none; /* Chrome, Safari and Opera */
+    }
+  }
 }
 
 .chat-body-main-title {
@@ -314,6 +325,7 @@
 .chat-message {
   display: flex;
   flex-direction: row;
+  margin-bottom: 24px;
 
   &:last-child {
     animation: slide-in ease 0.3s;
@@ -323,6 +335,7 @@
 .chat-message-user {
   display: flex;
   flex-direction: row-reverse;
+  margin-bottom: 24px;
 
   .chat-message-header {
     flex-direction: row-reverse;
@@ -417,14 +430,16 @@
   max-width: 100%;
   margin-top: 10px;
   border-radius: 10px;
+  border-top-left-radius: 0; // AI消息左上角直角（靠近头像）
   background-color: #FFFFFF;
   padding: 10px;
   font-size: 14px;
   user-select: text;
   word-break: break-word;
-  border: var(--border-in-light);
+   border: var(--border-in-light);
   position: relative;
   transition: all ease 0.3s;
+  // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
 
 .chat-message-item-image {
@@ -501,6 +516,8 @@
 
 .chat-message-user>.chat-message-container>.chat-message-item {
   background-color: var(--second);
+  border-top-left-radius: 10px; // 恢复左上角圆角
+  border-top-right-radius: 0; // 用户消息右上角直角（靠近头像）
 
   &:hover {
     min-width: 0;
@@ -517,8 +534,8 @@
   background: transparent;
   // box-shadow: var(--card-shadow);
   // 下方线条
-  border-top: 1px solid #dedede;
-  // border-top: none;
+  // border-top: 1px solid #dedede;
+  border-top: none;
 
   // 背景
   // background: rgba(155, 155, 255, 0.2);
@@ -592,12 +609,14 @@
   flex-direction: column; // 垂直布局
   flex: 1;
   border-radius: 16px;
-  border: var(--border-in-light);
+  border: none;
   position: relative;
   // min-height: 100px;
   max-height: 120px;
   overflow-y: auto;
   overflow: hidden;
+  box-shadow: 0 4px 26px rgba(0, 0, 0, 0.12);
+  transition: box-shadow 0.3s ease;
 }
 
 .chat-input-panel-inner-attach {
@@ -605,11 +624,11 @@
 }
 
 .chat-input-panel-inner:has(.chat-input:focus) {
-  border: 1px solid var(--primary);
+  box-shadow: 0 6px 20px rgba(73, 95, 230, 0.2);
 }
 
 .chat-input-panel-inner:has(.chat-input2:focus) {
-  border-color: #495fe6;
+  box-shadow: 0 6px 20px rgba(73, 95, 230, 0.2);
 }
 
 .chat-input {
@@ -622,11 +641,11 @@
   box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.03);
   color: var(--black) !important;
   font-family: inherit;
-  padding: 16px 16px 8px 16px;
+  padding: 12px 16px 0px;
   resize: none;
   outline: none;
   box-sizing: border-box;
-  min-height: 60px;
+  min-height: 50px;
   font-size: 14px;
   line-height: 1.5;
   // 文字颜色
@@ -635,6 +654,14 @@
 
 .chat-input2 {
   @extend .chat-input;
+  min-height: auto; // 允许输入框最小高度为1行
+  
+  // 移动端适配：允许输入框最小高度为1行
+  @media screen and (max-width: 600px) {
+    min-height: auto;
+    padding: 10px 16px 0px; // 减少移动端上下内边距
+    font-size: 16px; // 防止iOS自动缩放
+  }
 }
 
 // placeholder颜色
@@ -859,4 +886,5 @@
       justify-content: center !important;
     }
   }
-}
+}
+

app/components/chat.tsx

@@ -80,7 +80,7 @@ import { useGlobalStore } from "../store";
 import Locale from "../locales";
 
 import { IconButton } from "./button";
-import styles from "./chat.module.scss";
+import styles from "./chat-custom.module.scss";
 
 import {
   List,
@@ -137,7 +137,8 @@ import {
   FileOutlined,
   FilePdfOutlined,
   FileTextOutlined,
-  FileWordOutlined
+  FileWordOutlined,
+  SendOutlined
 } from '@ant-design/icons';
 import { RightOutlined, CheckCircleOutlined, CaretRightOutlined, StarTwoTone } from '@ant-design/icons';
 import api from "@/app/api/api";
@@ -2342,12 +2343,24 @@ function _Chat() {
               })}
             </div>
           )}
-          <IconButton
-            icon={couldStop ? <div style={{ width: 13, height: 13, background: '#FFFFFF', borderRadius: 2 }}></div> : <SendWhiteIcon />}
-            text={couldStop ? '停止' : '发送'}
-            className={styles["chat-input-send"]}
-            type="primary"
-            onClick={() => {
+          <div
+            style={{
+              width: 28,
+              height: 28,
+              borderRadius: '50%',
+              background: '#4357d2',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              cursor: 'pointer',
+              position: 'absolute',
+              right: 16,
+              top: '50%',
+              transform: 'translateY(-50%)',
+            }}
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
               if (couldStop) {
                 stopAll();
                 setIsClickStop(true);
@@ -2355,7 +2368,16 @@ function _Chat() {
                 doSubmit(userInput);
               }
             }}
-          />
+          >
+            {
+              couldStop ?
+                <div style={{ width: 13, height: 13, background: '#FFFFFF', borderRadius: 2 }}></div>
+                :
+                <div style={{ transform: 'rotate(-45deg)', padding: '0px 0px 3px 5px' }}>
+                  <SendOutlined style={{ color: '#FFFFFF' }} />
+                </div>
+            }
+          </div>
         </label>
       </div>
       <div style={{ paddingBottom: 12, textAlign: 'center', color: '#888888', fontSize: 12 }}>

app/components/deepSeekHome.scss

@@ -19,9 +19,9 @@
     overflow-y: hidden;
     box-sizing: border-box;
     background-color: blur(10px);
-    background: rgba(17, 39, 66, 0.3);
+    background: rgba(0, 20, 98, 0.658);
     padding: 0 16px;
-    box-shadow: 0 4px 26px rgba(0, 0, 0, 0.35);
+    box-shadow: 0 4px 26px rgba(0, 0, 0, 0.50);
 
     @media (max-width: 768px) {
       height: 45px;
@@ -78,7 +78,7 @@
     justify-content: center;
     align-items: center;
     flex-direction: column;
-    padding: 0 16px;
+    padding: 16px 16px 0px;
     box-sizing: border-box;
     transition: all 0.3s ease;