perf: 模板输入: free style 多行输入; 输入信息保留

src/views/Conversations/Online/Input/Template.jsx

@@ -31,10 +31,10 @@ const templateCaterogyTipText = { 'UTILITY': '触达率高', 'MARKETING': '' }
 const CategoryList = ({ dataSource, handleSendTemplate, valueMapped, onInput, activeInput }) => {
   const currentConversation = useConversationStore((state) => state.currentConversation);
   const renderForm = ({ tempItem }, key = 'body') => {
-    const templateText = tempItem.components?.[key]?.[0]?.text || '';
-    const tempArr = splitTemplate(templateText);
-    const keys = (templateText.match(/{{(.*?)}}/g) || []).map((key) => key.replace(/{{|}}/g, ''));
-    const paramsVal = keys.reduce((r, k) => ({ ...r, [k]: getNestedValue(valueMapped, [k]) }), {});
+    const templateText = tempItem.components?.[key]?.[0]?.text || ''
+    const tempArr = splitTemplate(templateText)
+    const keys = (templateText.match(/{{(.*?)}}/g) || []).map((key) => key.replace(/{{|}}/g, ''))
+    const paramsVal = keys.reduce((r, k) => ({ ...r, [k]: getNestedValue(valueMapped, [k]) }), {})
 
     return (
       <>
@@ -43,11 +43,25 @@ const CategoryList = ({ dataSource, handleSendTemplate, valueMapped, onInput, ac
             <span key={ele.trim()} className=' text-wrap'>
               {ele.replace(/\n+/g, '\n')}
             </span>
+          ) : ele.key.includes('free') || ele.key.includes('detail') ? (
+            <Input.TextArea
+              key={ele.key}
+              rows={2}
+              onChange={(e) => {
+                onInput(tempItem, ele.key, e.target.value, paramsVal)
+              }}
+              className={` w-11/12 `}
+              size={'small'}
+              title={ele.key}
+              placeholder={`${paramsVal[ele.key] || ele.key}  按Tab键跳到下一个空格\n注意: 模板消息无法输入换行`}
+              value={activeInput[tempItem.name]?.[ele.key] || paramsVal[ele.key] || ''}
+              // onPressEnter={() => handleSendTemplate(tempItem)}
+            />
           ) : (
             <Input
               key={ele.key}
               onChange={(e) => {
-                onInput(tempItem, ele.key, e.target.value, paramsVal);
+                onInput(tempItem, ele.key, e.target.value, paramsVal)
               }}
               className={ele.key.includes('free') || ele.key.includes('detail') ? `w-full block ` : `w-auto ${paramsVal[ele.key] ? 'max-w-24' : 'max-w-60'}`}
               size={'small'}
@@ -56,10 +70,10 @@ const CategoryList = ({ dataSource, handleSendTemplate, valueMapped, onInput, ac
               value={activeInput[tempItem.name]?.[ele.key] || paramsVal[ele.key] || ''}
               // onPressEnter={() => handleSendTemplate(tempItem)}
             />
-          )
+          ),
         )}
       </>
-    );
+    )
   };
   const renderHeader = ({ tempItem }) => {
     if (isEmpty(tempItem.components.header)) {
@@ -346,7 +360,7 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
         open={openTemplates}
         onOpenChange={(v) => {
           setOpenTemplates(v);
-          setActiveInput({});
+          // setActiveInput({});
         }}>
         <Button type='text' className='' icon={<MessageOutlined />} size={'middle'} disabled={disabled} />
       </Popover>