Parcourir la source

fix: 聊在输入框高度统一至 34px 适应ios

王晓东 il y a 1 mois
Parent
commit
6b56321d33

+ 2 - 2
src/pages/chat/components/InputBar/TextInputBar.tsx

@@ -30,11 +30,11 @@ export default ({disabled, onIconClick, onSend}:Props) => {
     messageStopHandle?.()
   }
 
-  const renderExtra = ()=> {
+  const renderExtra = () => {
     // IOS Textarea 高度最小只能是 34px, 高度无法再缩小,所以添加一个高度 34 在同一行中高度居中显示
     return <View className="flex items-center gap-12 leading-34 h-34">
-        {!!value.length && <View className="flex-center" onClick={handleConfirm}><IconSend /></View>}
         {!value.length && <View className="flex-center" onClick={onIconClick}><IconMic /></View>}
+        {!messageStopHandle &&  <View className={`flex-center ${!!value.length ? '':'opacity-50'}`} onClick={handleConfirm}><IconSend /></View>}
         {!!messageStopHandle && <View className="flex-center" onClick={handleStopClick}><IconStop /></View>}
     </View>
   }

+ 7 - 7
src/pages/chat/components/InputBar/VoiceInputBar.tsx

@@ -44,8 +44,8 @@ export default ({agentId,disabled, onIconClick, onSend, beforeSend, onError}:Pro
       return;
     }
     beforeSend()
-    
-    
+
+
     // 以二进制方式读取文件
     try{
       const response = await speechToText(agentId, res.tempFilePath)
@@ -69,10 +69,10 @@ export default ({agentId,disabled, onIconClick, onSend, beforeSend, onError}:Pro
 
   return <>
     {/* <TextInputBar onIconClick={handleTextInputBarSwitch}></TextInputBar> */}
-    
+
       <View className={`flex bg-white gap-6 items-center p-16 rounded-10 ${style.speechButton} ${ idle ? '': style.speechButtonActive}`}>
-        <View 
-          className="flex-1 flex items-center justify-center"
+        <View
+          className="flex-1 flex items-center justify-center leading-34 h-34"
           onLongPress={onLongPress}
           onTouchStart={handleTouchStart}
           onTouchEnd={onTouchEnd}
@@ -84,6 +84,6 @@ export default ({agentId,disabled, onIconClick, onSend, beforeSend, onError}:Pro
           {!!messageStopHandle && <View className="flex items-center" onClick={handleStopClick}><IconStop/></View>}
         </View>
       </View>
-    
+
   </>
-}
+}

+ 1 - 3
src/pages/chat/components/InputBar/index.module.less

@@ -3,18 +3,16 @@
   position: relative;
   display: flex;
   width: 100%;
-  height: 54px;
   align-items: center;
   overflow: hidden;
 }
 
 .speechButtonActive{
   width: 100%;
-  height: 54px;
   justify-content: center;
   background: url(https://cdn.wehome.cn/cmn/gif/169/META-H8UKXHWU-X0WXBKY1C0G0QA1DIH762-PGXK7IEM-OD.gif) center center no-repeat;
   background-size: 124px 27px;
   background-color:  var(--color-primary);
   // background-color: var(--color-primary);
   // background-color: var(--color-primary);
-}
+}

+ 8 - 8
src/pages/chat/index.tsx

@@ -37,7 +37,7 @@ export default function Index() {
 
   // 使用抽离的 hooks
   const { agent } = useChatAgent(agentId, isVisitor);
-  
+
   const {
     historyList,
     groupedMessages,
@@ -63,7 +63,7 @@ export default function Index() {
 
   // 获取当前消息列表长度
   const currentMessageListLength = useTextChat((state) => state.list.length);
-  
+
   const {
     showWelcome,
     haveBg,
@@ -98,10 +98,10 @@ export default function Index() {
   // 页面显示时刷新数据
   useDidShow(() => {
     // 需要清掉当前已经进行的聊天
-    // clearList(); 
+    // clearList();
   });
 
-  
+
 
   // 首次进入聊天生成 session id
   useEffect(() => {
@@ -194,7 +194,7 @@ export default function Index() {
             )}
           </View>
         </ScrollView>
-        
+
         <View
           className="w-full h-60"
           style={{
@@ -228,14 +228,14 @@ export default function Index() {
                   setIsVoice={setIsVoice}
                   disabled={disabled}
                 />
-                
+
               </View>
             )}
-            <View className={style.aiTips}>内容由AI生成,仅供参考</View>
+            <View className={`${style.aiTips} ${keyboardHeight > 0 ? 'hidden': ''} `}>内容由AI生成,仅供参考</View>
           </View>
         </View>
       </View>
-      
+
     </PageCustom>
   );
 }