Merge pull request #17 from LiuXianJing/dev

Dev

README.md

@@ -15,17 +15,26 @@ Note: Commercial use of this project code is prohibited
 
 # Features
 - Login and Registration, 
+<img src="./frontend//src//assets/images/pages/sign.png" />
 - AIGC, 
 - Dashboard, 
+<img src="./frontend//src//assets/images/pages/dash.png" />
 - Entertainment, 
+<img src="./frontend//src//assets/images/pages/e_c.png" />
 - Food, 
+<img src="./frontend//src//assets/images/pages/milk.png" />
 - Question List, 
+<img src="./frontend//src//assets/images/pages/issues.png" />
 - Record Video, 
+<img src="./frontend//src//assets/images/pages/record_video.png" />
 - About, 
 - User Management, 
+<img src="./frontend//src//assets/images/pages/user_management.png" />
 - IP information management,
 - Large visualization screen,
+<img src="./frontend//src//assets/images/pages/vusual.png" />
 - Chat conversations,
+<img src="./frontend//src//assets/images/pages/chat.png" />
 - Play music,
 - Visual operation, multi-functional collection
 

README_de.md

@@ -15,17 +15,26 @@ Hinweis: Die kommerzielle Nutzung dieses Projektcodes ist untersagt
 
 # Merkmale
 - Anmeldung und Registrierung, 
+<img src="./frontend//src//assets/images/pages/sign.png" />
 - AIGC, 
 - Dashboard, 
+<img src="./frontend//src//assets/images/pages/dash.png" />
 - Unterhaltung, 
+<img src="./frontend//src//assets/images/pages/e_c.png" />
 - Essen, 
+<img src="./frontend//src//assets/images/pages/milk.png" />
 - Fragenliste, 
+<img src="./frontend//src//assets/images/pages/issues.png" />
 - Video aufnehmen, 
+<img src="./frontend//src//assets/images/pages/record_video.png" />
 - Info， 
 - Benutzerverwaltung, 
+<img src="./frontend//src//assets/images/pages/user_management.png" />
 - IP-Informationsmanagement,
 - Großer Visualisierungsbildschirm,
+<img src="./frontend//src//assets/images/pages/vusual.png" />
 - Chat-Gespräche,
+<img src="./frontend//src//assets/images/pages/chat.png" />
 - Spiel Musik,
 - Visuelle Bedienung, multifunktionale Sammlung
 

README_ja-JP.md

@@ -15,17 +15,26 @@
 
 # 特徴
 - ログインと登録、
+<img src="./frontend//src//assets/images/pages/sign.png" />
 - AIGC、
 - ダッシュボード、
+<img src="./frontend//src//assets/images/pages/dash.png" />
 - エンターテイメント、
+<img src="./frontend//src//assets/images/pages/e_c.png" />
 - 食べ物、
+<img src="./frontend//src//assets/images/pages/milk.png" />
 - 質問リスト、
+<img src="./frontend//src//assets/images/pages/issues.png" />
 - ビデオ録画、
+<img src="./frontend//src//assets/images/pages/record_video.png" />
 - 概要、
 - ユーザー管理、
+<img src="./frontend//src//assets/images/pages/user_management.png" />
 - IP情報管理、
 - 大きな視覚化画面、
+<img src="./frontend//src//assets/images/pages/vusual.png" />
 - チャットでの会話、
+<img src="./frontend//src//assets/images/pages/chat.png" />
 - 音楽を再生、
 - 視覚的な操作、多機能なコレクション
 

README_zh-CN.md

@@ -15,16 +15,26 @@
 
 # 特性
 - 登录注册，
-- AIGC，仪表盘，
+<img src="./frontend//src//assets/images/pages/sign.png" />
+- AIGC，
+- 仪表盘，
+<img src="./frontend//src//assets/images/pages/dash.png" />
 - 娱乐，
+<img src="./frontend//src//assets/images/pages/e_c.png" />
 - 食品，
+<img src="./frontend//src//assets/images/pages/milk.png" />
 - 问题列表，
+<img src="./frontend//src//assets/images/pages/issues.png" />
 - 录制视频，
+<img src="./frontend//src//assets/images/pages/record_video.png" />
 - 关于, 
 - 用户管理，
+<img src="./frontend//src//assets/images/pages/user_management.png" />
 - IP信息管理，
 - 可视化大屏，
+<img src="./frontend//src//assets/images/pages/vusual.png" />
 - 聊天对话，
+<img src="./frontend//src//assets/images/pages/chat.png" />
 - 播放音乐，
 - 可视化操作，多功能集合
 

frontend/src/components/Chat/index.less

@@ -65,20 +65,6 @@
         .input-message {
             flex: 1;
             height: 70px;
-            .message-textarea {
-                width: 90%;
-                height: 48px;
-                padding: 10px;
-                border: 1px solid #ebe7e7;
-                border-radius: 10px;
-                outline: none;
-                resize: none;
-                &::-webkit-input-placeholder {
-                    font-size: 16px;
-                    color: #7a7a80;
-                    font-weight: bold;
-                }
-            }
         }
         .send-btn {
             padding: 10px 30px;

frontend/src/components/Chat/index.tsx

@@ -1,5 +1,6 @@
 import { ChangeEvent, useEffect, useRef, useState, } from 'react'
 import { ChatDataType } from '../../types';
+import MultifunctionalInput from '../MultifunctionalInput';
 import './index.less'
 
 interface IProps {
@@ -28,8 +29,7 @@ const Chat = (props: IProps) => {
         }
     }, [])
 
-    const changeEnterMessage = (e: ChangeEvent<HTMLTextAreaElement>) => {
-        const { value, } = e.target;
+    const changeEnterMessage = (value: string) => {
         setValue(value)
         onEnterMessage?.(value)
     }
@@ -65,10 +65,8 @@ const Chat = (props: IProps) => {
             onEnterMessage ?
             <div className="operate">
                 <div className="input-message">
-                    <textarea 
-                    className='message-textarea' 
-                    placeholder='Please enter your message' 
-                    onChange={changeEnterMessage}
+                    <MultifunctionalInput 
+                    changeEnterMessage={changeEnterMessage} 
                     />
                 </div>
                 <button className='send-btn' onClick={handleSend}>

frontend/src/components/MultifunctionalInput/index.less

@@ -0,0 +1,38 @@
+.multifunctional-input-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .message-textarea {
+        width: 90%;
+        height: 36px;
+        padding: 10px 10px 4px 10px;
+        border: 1px solid #ebe7e7;
+        border-radius: 10px 10px 0 0;
+        outline: none;
+        resize: none;
+        &::-webkit-input-placeholder {
+            font-size: 16px;
+            color: #7a7a80;
+            font-weight: bold;
+        }
+        &::-webkit-scrollbar {
+            width: 2px;
+        }
+    }
+    .other-file-input {
+        width: 90%;
+        padding: 0px 12px 0px 10px;
+        position: absolute;
+        top: 50px;
+        border-radius: 0 0 10px 10px;
+        background-color: #fff;
+        .item {
+            display: inline-flex;
+            width: 32px;
+            margin-right: 2%;
+            cursor: pointer;
+            &:first-child {
+            }
+        }
+    }
+}

frontend/src/components/MultifunctionalInput/index.tsx

@@ -0,0 +1,50 @@
+import { ChangeEvent, useEffect } from 'react';
+import { AudioTwoTone, FileTwoTone, PictureTwoTone, VideoCameraTwoTone } from '@ant-design/icons';
+import './index.less'
+
+interface IProps {
+    style?: Record<string, any>;
+    changeEnterMessage: (value: string) => void;
+}
+
+const iconFontsize = 22
+
+const MultifunctionalInput = (props: IProps) => {
+
+    const { style, changeEnterMessage, } = props;
+
+    useEffect(() => {
+    }, [])
+
+    const onChangeEnterMessage = (e: ChangeEvent<HTMLTextAreaElement>) => {
+        const { value, } = e.target;
+        changeEnterMessage?.(value)
+    }
+
+    return <div 
+    className='multifunctional-input-container' 
+    style={style}
+    >
+        <textarea 
+        className='message-textarea' 
+        placeholder='Please enter your message' 
+        onChange={onChangeEnterMessage}
+        />
+        <div className="other-file-input">
+            <span className='item'>
+                <PictureTwoTone style={{fontSize: iconFontsize}} />
+            </span>
+            <span className='item'>
+                <AudioTwoTone style={{fontSize: iconFontsize}} />
+            </span>
+            <span className='item'>
+                <VideoCameraTwoTone style={{fontSize: iconFontsize}} />
+            </span>
+            <span className='item'>
+                <FileTwoTone style={{fontSize: iconFontsize}} />
+            </span>
+        </div>                                             
+    </div>
+}
+
+export default MultifunctionalInput;