From a4c6ab7919aa999a9457a20f3575af782638fea1 Mon Sep 17 00:00:00 2001 From: pan <1029559041@qq.com> Date: Sat, 23 May 2020 01:22:46 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=88=91=E7=9A=84=E5=A5=BD?= =?UTF-8?q?=E5=8F=8B=E7=95=8C=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/user.svg | 1 + src/App.test.tsx | 2 +- src/App.tsx | 8 +- src/Main.tsx | 2 +- src/account/LoginProps.ts | 4 +- src/account/PropCookie.ts | 7 +- src/entity.ts | 30 +++++ src/index.css | 64 +++++++++-- src/index.tsx | 6 +- src/logo.svg | 7 -- src/my/MyDialog.tsx | 14 ++- src/my/MyFriend.tsx | 231 +++++++++++++++++++++++++++++++++++--- src/sub/IndexMenu.tsx | 14 +-- src/sub/MyHelp.tsx | 2 +- yarn.lock | 6 +- 15 files changed, 331 insertions(+), 67 deletions(-) create mode 100644 public/user.svg delete mode 100644 src/logo.svg diff --git a/public/user.svg b/public/user.svg new file mode 100644 index 0000000..f914ae1 --- /dev/null +++ b/public/user.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/App.test.tsx b/src/App.test.tsx index 4db7ebc..9503280 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -4,6 +4,6 @@ import App from './App'; test('renders learn react link', () => { const { getByText } = render(); - const linkElement = getByText(/learn react/i); + const linkElement = getByText(/用户账号/i); expect(linkElement).toBeInTheDocument(); }); diff --git a/src/App.tsx b/src/App.tsx index d9f2863..679cd9a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,16 +2,12 @@ import React from 'react'; import './App.css'; import 'bootstrap/dist/css/bootstrap.min.css'; import {Login} from './account/Login'; -import { instanceOf } from 'prop-types'; -import { withCookies, Cookies } from 'react-cookie'; +import { withCookies } from 'react-cookie'; import {Main} from "./Main"; import {Register} from "./account/Register"; import {user_cookie} from "./account/PropCookie"; class App extends React.Component { - static propTypes = { - cookies: instanceOf(Cookies).isRequired - }; constructor(props: Readonly) { @@ -65,7 +61,7 @@ class App extends React.Component { */ toLogin(){ this.setState({ - page:this.toRegister()} login={(user:string,password:string)=>this.login(user,password)}/> + page:this.toRegister()} login={(user:string,password:string)=>this.login(user,password)}/> }) } diff --git a/src/Main.tsx b/src/Main.tsx index 87a8c9a..32aa4dc 100644 --- a/src/Main.tsx +++ b/src/Main.tsx @@ -102,7 +102,7 @@ export class Main extends React.Component{ switch (dialogType) { case DialogType.friend: this.setState({ - my:{menuName:dialogType,content:,open:true} + my:{menuName:dialogType,content:,open:true} }) break; case DialogType.leaveWord: diff --git a/src/account/LoginProps.ts b/src/account/LoginProps.ts index 0dbf8c3..c6e1d15 100644 --- a/src/account/LoginProps.ts +++ b/src/account/LoginProps.ts @@ -1,10 +1,8 @@ -import {PropCookie} from "./PropCookie"; - /** * 登陆表单 */ -export interface LoginProps extends PropCookie{ +export interface LoginProps{ //跳转注册 toRegister:Function; //登录 diff --git a/src/account/PropCookie.ts b/src/account/PropCookie.ts index ff6eb06..36b9be8 100644 --- a/src/account/PropCookie.ts +++ b/src/account/PropCookie.ts @@ -1,10 +1,9 @@ -import {Cookies } from 'react-cookie'; /** * cookie信息,组件间传递 */ -export interface PropCookie { - cookies:Cookies; -} +// export interface PropCookie { +// cookies:Cookies; +// } export const user_cookie="user_cookie" diff --git a/src/entity.ts b/src/entity.ts index 4f3a575..d448d51 100644 --- a/src/entity.ts +++ b/src/entity.ts @@ -108,9 +108,39 @@ export interface MyDialogProps { onClose:Function; } + /** * 好友信息 */ export interface Friend { + //好友姓名 name:string; + //好友状态 + status?:boolean; +} + +/** + * 用户信息 + */ +export interface User { + //用户姓名 + name:string; + //用户年龄 + age:number; + //用户电话 + mobile:string; +} + +/** + * 聊天信息 + */ +export interface Chat { + //发送人名称 + name:string; + //发送人头像 + headImg:string; + //发送内容 + content:string; + //发送时间 + time:number; } diff --git a/src/index.css b/src/index.css index ec2585e..f529b8d 100644 --- a/src/index.css +++ b/src/index.css @@ -1,13 +1,53 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; +/*关闭图标尺寸*/ +.closeIcon40{ + height: 40px; + width: 40px; +} +/*关闭图标尺寸*/ +.closeIcon20{ + height: 20px; + width: 20px; +} +/*用户图标尺寸*/ +.userIcon{ + height: 20px; + width: 20px; +} +/*活动背景图尺寸*/ +.activeImage{ + height: 100px; + width: 100px; +} + +/*好友列表*/ +.friend-list{ + height: 300px; +} + +/** +聊天记录框 + */ +.chat-history{ + height: 400px; +} + +/** +聊天头像大小 + */ +.chat-headImg{ + width:100px; + height: 100px; +} + +/** +发送信息框 + */ +.chat-send{ + height: 200px; +} +/** +发送信息内容框 + */ +.chat-send-content{ + height: 140px; } diff --git a/src/index.tsx b/src/index.tsx index f5185c1..1851916 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,12 +1,14 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; -import App from './App'; + import * as serviceWorker from './serviceWorker'; +import App from "./App"; + ReactDOM.render( - + , document.getElementById('root') ); diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 6b60c10..0000000 --- a/src/logo.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/src/my/MyDialog.tsx b/src/my/MyDialog.tsx index 28d8c25..860fe3a 100644 --- a/src/my/MyDialog.tsx +++ b/src/my/MyDialog.tsx @@ -1,7 +1,7 @@ import React from "react"; import Dialog from "@material-ui/core/Dialog"; import Draggable from "react-draggable"; -import {Paper} from "@material-ui/core"; +import {Paper, Tooltip} from "@material-ui/core"; import {MyDialogProps} from "../entity"; /** @@ -26,11 +26,17 @@ export class MyDialog extends React.Component{ > - {this.props.menuName} - this.props.onClose()}/> + + {this.props.menuName} + + + this.props.onClose()}/> + - {this.props.content} + + {this.props.content} + {/**/} {/* */} diff --git a/src/my/MyFriend.tsx b/src/my/MyFriend.tsx index f78e69e..34f96d4 100644 --- a/src/my/MyFriend.tsx +++ b/src/my/MyFriend.tsx @@ -1,7 +1,59 @@ import React from "react"; -import {Col, Container, ListGroup, Row} from "react-bootstrap"; -import {Friend} from "../entity"; +import {Button, Col, Container, FormControl, Image, ListGroup, Row,} from "react-bootstrap"; +import {Chat, Friend, User} from "../entity"; +import {Tooltip} from "@material-ui/core"; +import moment from "moment"; +/** + * 聊天窗头像名字 + * @param props + * @constructor + */ +function UserPart(props:Readonly) { + return ( + + + {props.name} + + ) +} + +/** + * 聊天窗内容 + * @param props + * @constructor + */ +function ContentPart(props:Readonly) { + return ( + + {moment(props.time).format("YYYY-MM-DD HH:mm:ss")} + {props.content} + + ) +} + +/** + * 一组信息 + * @param props + * @constructor + */ +function GroupPart(props:Readonly) { + if(props.flag){ + return ( + + + + ) + }else{ + return ( + + + + ) + } +} + +const maxLength=150 /** * 我的好友 */ @@ -12,35 +64,182 @@ export class MyFriend extends React.Component{ super(props); this.state={ - friendList:[] + //好友列表 + friendList:[], + //查找好友关键字 + queryFriend:"", + //用户列表 + userList:[], + //聊天记录 + chatList:[], + //当前选中好友 + friendIndex:-1, + //发送内容 + sendContent:'' } } + componentDidMount() { + this.loadMyFriend("") + } - //加载我的好友 - loadMyFriend(){ + /** + * 查找用户 + * @param keyword + */ + queryUser(keyword:string){ + this.setState({ + userList:[{ + //用户姓名 + name:"张三", + //用户年龄 + age:Math.floor(Math.random()*100)+1, + //用户电话 + mobile:15920722180, + //发送时间 + time:new Date().getTime() + }, + { + //用户姓名 + name:"李四", + //用户年龄 + age:Math.floor(Math.random()*100)+1, + //用户电话 + mobile:15920722180, + //发送时间 + time:new Date().getTime() + }, + { + //用户姓名 + name:"王五", + //用户年龄 + age:Math.floor(Math.random()*100)+1, + //用户电话 + mobile:15920722180, + //发送时间 + time:new Date().getTime() + }] + }) + } + + //查找我的好友 + loadMyFriend(keyword:string){ this.setState({ friendList:[{ - name:"好友1" + name:"好友1", + status:true + }, + { + name:"好友2", + status:false + }, + { + name:"好友3", + status:false + }] + }) + } + + //加载聊天记录 + loadMyChat(friend:Friend){ + this.setState({ + chatList:[{ + //发送人名称 + name:"张三", + //发送人头像 + headImg:"logo512.png", + //发送内容 + content:"发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容" }, - { - name:"好友2" - }, - { - name:"好友3" - }] + { + //发送人名称 + name:"张三", + //发送人头像 + headImg:"logo512.png", + //发送内容 + content:"发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容" + }, + { + //发送人名称 + name:"abc", + //发送人头像 + headImg:"logo512.png", + //发送内容 + content:"发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容" + }] }) } render() { + return ( - - - 我的好友 - {this.state.friendList.map((friend:Friend)=>{friend.name})} + + + 我的好友 + + this.loadMyFriend(e.target.value)}/> + + {this.state.friendList.map((friend:Friend,index:number)=> + + + { + this.setState({ + friendIndex:index + }) + this.loadMyChat(friend) + }} className={index===this.state.friendIndex?"text-success":"text-dark"} + style={{cursor:"pointer"}} variant={friend.status?"info":"secondary"}>{friend.name} + + )} + + + + 添加好友 + + this.queryUser(e.target.value)}/> + + + {this.state.userList.map((user:User,index:number)=> + + {user.name} + + + + )} + + + + + + {this.state.chatList.map((chat:Chat,index:number)=> + + )} + + + + { + if(e.target.innerText.length>=maxLength){ + e.preventDefault() + } + }} onKeyUp={(e:any)=> + { + this.setState({sendContent:e.target.innerText}) + }}> + + + + + + {"您还可以输入"+(maxLength-this.state.sendContent.length)+"个字符"} + + + 发送 + + + diff --git a/src/sub/IndexMenu.tsx b/src/sub/IndexMenu.tsx index 1347d66..a24c979 100644 --- a/src/sub/IndexMenu.tsx +++ b/src/sub/IndexMenu.tsx @@ -35,7 +35,7 @@ export class IndexMenu extends React.Component{ //活动内容 content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容", //活动图片 - activeImg: "https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg" + activeImg: "/logo512.png" },{ activeId: 123, //活动标题 @@ -43,7 +43,7 @@ export class IndexMenu extends React.Component{ //活动内容 content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容", //活动图片 - activeImg: "https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg" + activeImg: "/logo512.png" },{ activeId: 123, //活动标题 @@ -51,7 +51,7 @@ export class IndexMenu extends React.Component{ //活动内容 content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容", //活动图片 - activeImg: "https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg" + activeImg: "/logo512.png" }],[{ activeId: 123, //活动标题 @@ -59,7 +59,7 @@ export class IndexMenu extends React.Component{ //活动内容 content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容", //活动图片 - activeImg: "https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg" + activeImg: "/logo512.png" },{ activeId: 123, //活动标题 @@ -67,7 +67,7 @@ export class IndexMenu extends React.Component{ //活动内容 content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容", //活动图片 - activeImg: "https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg" + activeImg: "/logo512.png" },{ activeId: 123, //活动标题 @@ -75,7 +75,7 @@ export class IndexMenu extends React.Component{ //活动内容 content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容", //活动图片 - activeImg: "https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg" + activeImg: "/logo512.png" }]] }) } @@ -87,7 +87,7 @@ export class IndexMenu extends React.Component{ - + diff --git a/src/sub/MyHelp.tsx b/src/sub/MyHelp.tsx index 1a643ae..1edfbbe 100644 --- a/src/sub/MyHelp.tsx +++ b/src/sub/MyHelp.tsx @@ -203,7 +203,7 @@ export class MyHelp extends React.Component{ } > - { + { delete this.state.chooseFriendList[key] this.setState({ chooseFriendList:this.state.chooseFriendList diff --git a/yarn.lock b/yarn.lock index b5cf580..8a68270 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1526,7 +1526,7 @@ "@types/cookie@^0.3.3": version "0.3.3" - resolved "https://registry.npm.taobao.org/@types/cookie/download/@types/cookie-0.3.3.tgz?cache=0&sync_timestamp=1589385151733&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fcookie%2Fdownload%2F%40types%2Fcookie-0.3.3.tgz#85bc74ba782fb7aa3a514d11767832b0e3bc6803" + resolved "https://registry.npm.taobao.org/@types/cookie/download/@types/cookie-0.3.3.tgz#85bc74ba782fb7aa3a514d11767832b0e3bc6803" integrity sha1-hbx0ungvt6o6UU0RdngysOO8aAM= "@types/eslint-visitor-keys@^1.0.0": @@ -1550,7 +1550,7 @@ "@types/hoist-non-react-statics@^3.0.1": version "3.3.1" - resolved "https://registry.npm.taobao.org/@types/hoist-non-react-statics/download/@types/hoist-non-react-statics-3.3.1.tgz?cache=0&sync_timestamp=1588200643669&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fhoist-non-react-statics%2Fdownload%2F%40types%2Fhoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" + resolved "https://registry.npm.taobao.org/@types/hoist-non-react-statics/download/@types/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" integrity sha1-ESSq/lEYy1kZd66xzqrtEHDrA58= dependencies: "@types/react" "*" @@ -3232,7 +3232,7 @@ cookie@0.4.0: cookie@^0.4.0: version "0.4.1" - resolved "https://registry.npm.taobao.org/cookie/download/cookie-0.4.1.tgz?cache=0&sync_timestamp=1587525865178&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcookie%2Fdownload%2Fcookie-0.4.1.tgz#afd713fe26ebd21ba95ceb61f9a8116e50a537d1" + resolved "https://registry.npm.taobao.org/cookie/download/cookie-0.4.1.tgz#afd713fe26ebd21ba95ceb61f9a8116e50a537d1" integrity sha1-r9cT/ibr0hupXOth+agRblClN9E= copy-concurrently@^1.0.0:
{props.content}
{"您还可以输入"+(maxLength-this.state.sendContent.length)+"个字符"}