Explorar o código

feat: 输入框支持多行

王晓东 hai 1 mes
pai
achega
e1c4af002c

+ 7 - 0
src/components/icon/IconSend/index.tsx

@@ -0,0 +1,7 @@
+import { Image } from '@tarojs/components'
+import Icon from '@/images/svgs/chat/IconSend.svg'
+export default () => {
+  return (
+    <Image src={Icon} mode="widthFix" style={{width: '20px', height: '20px'}}></Image>
+  )
+}

+ 6 - 0
src/images/svgs/chat/IconSend.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="design-iconfont">
+  <g fill="none" fill-rule="evenodd">
+    <rect fill="#327BF9" width="20" height="20" rx="10"/>
+    <path d="M4.90719141,0 L4.89816016,0 C4.77788572,0.00173419204 4.66100031,0.040121798 4.56312891,0.110050821 C4.52029673,0.138111119 4.48403254,0.166818961 4.45080078,0.198832071 L4.44145703,0.208003946 L0.207925781,4.43644145 C-0.0693085938,4.71333207 -0.0693085938,5.16231645 0.207925781,5.4392227 L0.216300781,5.44744145 C0.494113281,5.7160352 0.937269531,5.71330082 1.21169141,5.4392227 L4.31476953,2.3398477 L4.31476953,11.3655614 C4.31476953,11.6923427 4.57998828,11.9572333 4.90708203,11.9572333 L4.99003516,11.9572333 C5.31261328,11.9519208 5.57253516,11.6890771 5.57253516,11.3655614 L5.57253516,2.33983207 L8.67562891,5.43920707 C8.95281641,5.71608207 9.40219141,5.71608207 9.67939453,5.43920707 C9.95662891,5.16233207 9.95664453,4.7133477 9.67942578,4.43644145 L5.44555078,0.207660196 L5.43656641,0.198847696 C5.40636288,0.169743812 5.37364715,0.143365224 5.33880078,0.120019571 L5.32991016,0.114160196 L5.33153516,0.115347696 C5.22979029,0.0402653722 5.10662475,-0.000161757893 4.98017578,0 L4.90719141,0 Z" transform="translate(5 4)" fill="#FFF" fill-rule="nonzero"/>
+  </g>
+</svg>

+ 2 - 2
src/images/svgs/chat/IconStop.svg

@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="design-iconfont">
   <g fill-rule="nonzero" fill="none">
-    <rect stroke="#000" stroke-width="1.5" opacity=".99" x=".75" y=".75" width="18.5" height="18.5" rx="9.25"/>
-    <path d="M11.8947368,6 L8.10778443,6 C6.94295619,6 6,6.94295619 6,8.10778443 L6,11.8922156 C6,13.0570438 6.94295619,14 8.10778443,14 L11.8922156,14 C13.0570438,14 14,13.0570438 14,11.8922156 L14,8.10778443 C14,6.94295619 13.0570438,6 11.8947368,6 Z" fill="#010101"/>
+    <rect stroke="#327BF9" stroke-width="1.5" opacity=".99" x=".75" y=".75" width="18.5" height="18.5" rx="9.25"/>
+    <path d="M11.8947368,6 L8.10778443,6 C6.94295619,6 6,6.94295619 6,8.10778443 L6,11.8922156 C6,13.0570438 6.94295619,14 8.10778443,14 L11.8922156,14 C13.0570438,14 14,13.0570438 14,11.8922156 L14,8.10778443 C14,6.94295619 13.0570438,6 11.8947368,6 Z" fill="#327BF9"/>
   </g>
 </svg>

+ 5 - 3
src/pages/chat/components/InputBar/TextInputBar.tsx

@@ -1,8 +1,9 @@
 import { View } from "@tarojs/components"
 import IconMic from "@/components/icon/IconMic"
 import IconStop from "@/components/icon/IconStop"
+import IconSend from "@/components/icon/IconSend"
 import { useState } from "react";
-import WemetaInput from '@/components/wemeta-input'
+// import WemetaInput from '@/components/wemeta-input'
 import WemetaTextarea from '@/components/wemeta-textarea'
 import { useTextChat } from "@/store/textChatStore";
 interface Props {
@@ -30,8 +31,9 @@ export default ({disabled, onIconClick, onSend}:Props) => {
   }
 
   const renderExtra = ()=> {
-    return <View className="flex items-center gap-12">
-        {!!value.length && <View onClick={handleConfirm}>send</View>}
+    // 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" onClick={handleStopClick}><IconStop /></View>}
     </View>