Procházet zdrojové kódy

feat:1.修改CSS,更改聊天框颜色,间距;2.增加滚动栏

shanshan před 3 roky
rodič
revize
2088c5d1c2
2 změnil soubory, kde provedl 41 přidání a 7 odebrání
  1. 33 0
      src/pages/chatGPT/chatGPT.style.css
  2. 8 7
      src/pages/chatGPT/index.tsx

+ 33 - 0
src/pages/chatGPT/chatGPT.style.css

@@ -0,0 +1,33 @@
+.ChatGPT {
+    overflow: scroll;
+    height: calc(100vh - 55px);
+}
+
+.input_box > input {
+    width: 220px;
+    height: 32px;
+    margin: 7px;
+    border-radius: 5px;
+}
+
+.input_box > Button {
+    height: 32px;
+    margin: 7px 2px;
+    border-radius: 5px;
+    background-color: rgb(130, 130, 130);
+}
+
+.input_box > Button:hover {
+    background-color: rgb(100, 100, 100);
+}
+
+.answer_box {
+    max-height: calc(100% - 46px);
+    padding: 5px 10px;
+    overflow: scroll;
+}
+
+.item {
+    margin-bottom: 5px;
+    overflow-anchor: auto;
+}

+ 8 - 7
src/pages/chatGPT/index.tsx

@@ -3,6 +3,7 @@ import { useRef, useState } from 'react'
 import { Button ,Spin,message} from 'antd';
 import { AudioOutlined ,RedditOutlined} from '@ant-design/icons';
 // import 'antd/dist/reset.css';
+import "./chatGPT.style.css";
 import  { Configuration, OpenAIApi } from "openai";
 
 interface answerListType{
@@ -27,9 +28,9 @@ export async function davinciCompletion(prompt:String) {
 		// "top_p": 1,
 		// "frequency_penalty": 0,
 		// "presence_penalty": 0
-		"messages": 
+		"messages":
 			[
-				{"role": "user", 
+				{"role": "user",
 				"content": prompt
 				}
 			]
@@ -108,9 +109,9 @@ export function ChatGPT() {
 		{contextHolder}
 		<div className='input_box'>
 			<input type="text" className='input' value={inputValue} onChange={e=>setInputValue(e.target.value)}></input>
-			<Button 
-				type="primary" 
-				size='large' 
+			<Button
+				type="primary"
+				size='large'
 				className='btn'
 				onClick={quize}
 			>提问</Button>
@@ -140,7 +141,7 @@ export function ChatGPT() {
 							// 回复答案
 							return (
 								<div className='item' key={index}>
-									<div><RedditOutlined style={{fontSize:'24px',color:'#42b883aa'}}/> </div> 
+									<div><RedditOutlined style={{fontSize:'24px',color:'#42b883aa'}}/> </div>
 									<span className='span'><pre> {item.content} </pre></span>
 								</div>
 							)
@@ -153,4 +154,4 @@ export function ChatGPT() {
   )
 }
 
-// export default ChatGPT
+// export default ChatGPT