feat: 提交按钮

f4ea264f · HoMeTown · 7733c889 · f4ea264f · f4ea264f · f4ea264f
Commit f4ea264f authored Aug 06, 2024 by HoMeTown
Hide whitespace changes
Inline Side-by-side

Showing with 46 additions and 17 deletions

src/assets/svg/send.svg
+23 -0

src/components/ChatEditor/index.tsx
+19 -8

src/pages/Home/Home.tsx
+0 -5

src/pages/Home/components/QuestionList/QuestionList.tsx
+4 -4

No files found.
--- a/src/assets/svg/send.svg
+++ b/src/assets/svg/send.svg
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>蒙版</title>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="24" height="24"></rect>
+    </defs>
+    <g id="晓得---PC端页面-草稿" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="晓得-PC端---当前对话提问" transform="translate(-1446.000000, -972.000000)">
+            <g id="输入框" transform="translate(498.000000, 948.000000)">
+                <g id="发送-点击" transform="translate(940.000000, 16.000000)">
+                    <g id="编组-9" transform="translate(8.000000, 8.000000)">
+                        <mask id="mask-2" fill="white">
+                            <use xlink:href="#path-1"></use>
+                        </mask>
+                        <g id="蒙版"></g>
+                        <path d="M6.11031748,17.8599937 C6.89136606,18.6410423 6.89136606,19.9073723 6.11031748,20.6884209 L5.16750844,21.6312299 C4.38645986,22.4122785 3.1201299,22.4122785 2.33908131,21.6312299 C1.55803273,20.8501813 1.55803273,19.5838514 2.33908131,18.8028028 L3.28189036,17.8599937 C4.06293894,17.0789452 5.3292689,17.0789452 6.11031748,17.8599937 Z M18.5659347,2.66666667 C20.0386941,2.66666667 21.2326014,3.860574 21.2326014,5.33333333 L21.2326014,16.6666667 C21.2326014,17.7712362 20.3371709,18.6666667 19.2326014,18.6666667 C18.1280319,18.6666667 17.2326014,17.7712362 17.2326014,16.6666667 L17.2322949,9.56566667 L11.0531265,15.7456118 C10.2720779,16.5266604 9.00574798,16.5266604 8.2246994,15.7456118 C7.44365081,14.9645632 7.44365081,13.6982333 8.2246994,12.9171847 L14.4742949,6.66666667 L7.23260141,6.66666667 C6.12803191,6.66666667 5.23260141,5.77123617 5.23260141,4.66666667 C5.23260141,3.56209717 6.12803191,2.66666667 7.23260141,2.66666667 L18.5659347,2.66666667 Z" id="形状结合" fill="#FFFFFF" mask="url(#mask-2)"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
--- a/src/components/ChatEditor/index.tsx
+++ b/src/components/ChatEditor/index.tsx
 import React, { useEffect, useRef, useState } from 'react'
 import { AnimatePresence, motion } from 'framer-motion'
+import { Button } from '@nextui-org/react'
+import SendIcon from '@/assets/svg/send.svg?react'
 interface EditorProps {
  onChange?: (value: string) => void
@@ -37,16 +39,20 @@ const Editor: React.FC<EditorProps> = ({ onChange, onFocus, onSubmit, placeholde
    }
  }
+  const handleSubmit = () => {
+    if (content.trim()) {
+      onSubmit?.(content.trim())
+      setContent('')
+      if (editorRef.current) {
+        editorRef.current.textContent = ''
+      }
+    }
+  }
  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault()
-      if (content.trim()) {
+      handleSubmit()
-        onSubmit?.(content.trim())
-        setContent('')
-        if (editorRef.current) {
-          editorRef.current.textContent = ''
-        }
-      }
    }
    else if (e.key === 'Backspace' && !content) {
      e.preventDefault() // 防止删除最后一个字符后继续删除
@@ -68,10 +74,11 @@ const Editor: React.FC<EditorProps> = ({ onChange, onFocus, onSubmit, placeholde
    }
  }, [content])
  return (
-    <div className="w-full h-auto relative mx-auto bg-white  rounded-[36px] overflow-hidden transition duration-200 py-[012px] px-[32px]">
+    <div className="flex items-end w-full h-auto relative mx-auto bg-white  rounded-[36px] overflow-hidden transition duration-200 py-[12px] pl-[32px] pr-[20px]">
      <div
        ref={editorRef}
        contentEditable
+        translate="no"
        className="w-full min-h-[40px] max-h-[200px] p-2  rounded overflow-y-auto outline-none"
        onInput={handleInput}
        onFocus={onFocus}
@@ -81,6 +88,10 @@ const Editor: React.FC<EditorProps> = ({ onChange, onFocus, onSubmit, placeholde
          resize: 'none',
        }}
      />
+      <Button onClick={handleSubmit} radius="full" isDisabled={!content} isIconOnly color="primary">
+        <SendIcon />
+      </Button>
      <div className="absolute inset-0 flex items-center rounded-full pointer-events-none">
        <AnimatePresence mode="wait">
          {!content && (

--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -51,11 +51,6 @@ export const Home: React.FC = () => {
          </div>
          <div className="box-border px-[0] mx-auto iptContainer w-full  max-w-[1000px] flex-shrink-0 sm:px-0">
-            {/* <PlaceholdersInput
-              placeholders={placeholders}
-              onChange={handleChange}
-              onSubmit={onSubmit}
-            /> */}
            <ChatEditor placeholders={placeholders} />
            <div className="w-full text-center mt-[20px] text-[#3333334d] text-[12px]">
              内容由AI模型生成，其准确性和完整性无法保证，仅供参考

--- a/src/pages/Home/components/QuestionList/QuestionList.tsx
+++ b/src/pages/Home/components/QuestionList/QuestionList.tsx
@@ -81,7 +81,7 @@ export const QuestionList: React.FC<QuestionListProps> = ({ dotColor, title, ico
          variants={item}
        >
          <Button color="primary" variant="flat" className="w-full bg-[#F7FCFF] ">
-            <div className="w-full text-nowrap text-ellipsis overflow-hidden text-[#ABB1B8]">
+            <div className="w-full text-nowrap text-ellipsis overflow-hidden text-[#82969C]">
              <span style={{ color: dotColor }}>·</span>
              <span className="ml-[8px]">推荐几款60周岁还能投的医疗保推荐几款60周岁还能投的医疗保</span>
            </div>
@@ -91,7 +91,7 @@ export const QuestionList: React.FC<QuestionListProps> = ({ dotColor, title, ico
          variants={item}
        >
          <Button color="primary" variant="flat" className="w-full bg-[#F7FCFF] ">
-            <div className="w-full text-nowrap text-ellipsis overflow-hidden text-[#ABB1B8]">
+            <div className="w-full text-nowrap text-ellipsis overflow-hidden text-[#82969C]">
              <span style={{ color: dotColor }}>·</span>
              <span className="ml-[8px]">推荐几款60周岁还能投的医疗保推荐几款60周岁还能投的医疗保</span>
            </div>
@@ -101,7 +101,7 @@ export const QuestionList: React.FC<QuestionListProps> = ({ dotColor, title, ico
          variants={item}
        >
          <Button color="primary" variant="flat" className="w-full bg-[#F7FCFF] ">
-            <div className="w-full text-nowrap text-ellipsis overflow-hidden text-[#ABB1B8]">
+            <div className="w-full text-nowrap text-ellipsis overflow-hidden text-[#82969C]">
              <span style={{ color: dotColor }}>·</span>
              <span className="ml-[8px]">推荐几款60周岁还能投的医疗保推荐几款60周岁还能投的医疗保</span>
            </div>
@@ -111,7 +111,7 @@ export const QuestionList: React.FC<QuestionListProps> = ({ dotColor, title, ico
          variants={item}
        >
          <Button color="primary" variant="flat" className="w-full bg-[#F7FCFF] ">
-            <div className="w-full text-nowrap text-ellipsis overflow-hidden text-[#ABB1B8]">
+            <div className="w-full text-nowrap text-ellipsis overflow-hidden text-[#82969C]">
              <span style={{ color: dotColor }}>·</span>
              <span className="ml-[8px]">推荐几款60周岁还能投的医疗保推荐几款60周岁还能投的医疗保</span>
            </div>