mirror of
https://github.com/casdoor/casdoor.git
synced 2025-07-04 13:20:19 +08:00
Improve UI effect
This commit is contained in:
@ -629,7 +629,7 @@ class App extends Component {
|
||||
}
|
||||
</Header>
|
||||
<Content style={{display: "flex", flexDirection: "column"}} >
|
||||
{Setting.isMobile() ?
|
||||
{(Setting.isMobile() || window.location.pathname === "/chat") ?
|
||||
this.renderRouter() :
|
||||
<Card className="content-warp-card">
|
||||
{this.renderRouter()}
|
||||
|
@ -43,75 +43,108 @@ class ChatBox extends React.Component {
|
||||
this.setState({inputValue: ""});
|
||||
};
|
||||
|
||||
render() {
|
||||
renderList() {
|
||||
return (
|
||||
<div>
|
||||
<div style={{position: "relative"}}>
|
||||
<List
|
||||
style={{maxHeight: "calc(100vh - 140px)", overflowY: "auto"}}
|
||||
itemLayout="horizontal"
|
||||
dataSource={this.props.messages}
|
||||
renderItem={(item, index) => (
|
||||
<List.Item style={{backgroundColor: index % 2 === 0 ? "white" : "rgb(247,247,248)", borderBottom: "1px solid rgb(229, 229, 229)", position: "relative"}}>
|
||||
<List.Item.Meta
|
||||
avatar={<Avatar style={{width: "30px", height: "30px", borderRadius: "3px"}} src={item.author === `${this.props.account.owner}/${this.props.account.name}` ? this.props.account.avatar : "https://cdn.casbin.com/casdoor/resource/built-in/admin/gpt.png"} />}
|
||||
title={<div style={{fontSize: "16px", fontWeight: "normal", lineHeight: "24px", marginTop: "-15px", marginLeft: "5px", marginRight: "70px"}}>{item.text}</div>}
|
||||
/>
|
||||
<div style={{position: "absolute", top: "10px", right: "10px"}}
|
||||
>
|
||||
<CopyOutlined style={{color: "rgb(172,172,190)", margin: "5px"}} />
|
||||
<LikeOutlined style={{color: "rgb(172,172,190)", margin: "5px"}} />
|
||||
<DislikeOutlined style={{color: "rgb(172,172,190)", margin: "5px"}} />
|
||||
<List.Item style={{
|
||||
backgroundColor: index % 2 === 0 ? "white" : "rgb(247,247,248)",
|
||||
borderBottom: "1px solid rgb(229, 229, 229)",
|
||||
position: "relative",
|
||||
}}>
|
||||
<div style={{width: "800px", margin: "0 auto", position: "relative"}}>
|
||||
<List.Item.Meta
|
||||
avatar={<Avatar style={{width: "30px", height: "30px", borderRadius: "3px"}} src={item.author === `${this.props.account.owner}/${this.props.account.name}` ? this.props.account.avatar : "https://cdn.casbin.com/casdoor/resource/built-in/admin/gpt.png"} />}
|
||||
title={<div style={{fontSize: "16px", fontWeight: "normal", lineHeight: "24px", marginTop: "-15px", marginLeft: "5px", marginRight: "80px"}}>{item.text}</div>}
|
||||
/>
|
||||
<div style={{position: "absolute", top: "0px", right: "0px"}}
|
||||
>
|
||||
<CopyOutlined style={{color: "rgb(172,172,190)", margin: "5px"}} />
|
||||
<LikeOutlined style={{color: "rgb(172,172,190)", margin: "5px"}} />
|
||||
<DislikeOutlined style={{color: "rgb(172,172,190)", margin: "5px"}} />
|
||||
</div>
|
||||
</div>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
position: "fixed",
|
||||
bottom: "100px",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
backgroundColor: "white",
|
||||
}}
|
||||
>
|
||||
<div style={{position: "relative", width: "770px", marginLeft: "-315px"}}>
|
||||
<TextArea
|
||||
placeholder={"Send a message..."}
|
||||
autoSize
|
||||
value={this.state.inputValue}
|
||||
onChange={(e) => this.setState({inputValue: e.target.value})}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
style={{
|
||||
fontSize: "16px",
|
||||
fontWeight: "normal",
|
||||
lineHeight: "24px",
|
||||
width: "770px",
|
||||
height: "48px",
|
||||
borderRadius: "6px",
|
||||
borderColor: "rgb(229,229,229)",
|
||||
boxShadow: "0 0 15px rgba(0, 0, 0, 0.1)",
|
||||
paddingLeft: "17px",
|
||||
paddingRight: "17px",
|
||||
paddingTop: "12px",
|
||||
paddingBottom: "12px",
|
||||
}}
|
||||
suffix={<SendOutlined style={{color: "rgb(210,210,217"}} onClick={() => this.send(this.state.inputValue)} />}
|
||||
autoComplete="off"
|
||||
/>
|
||||
<SendOutlined
|
||||
style={{
|
||||
color: this.state.inputValue === "" ? "rgb(210,210,217)" : "rgb(142,142,160)",
|
||||
position: "absolute",
|
||||
bottom: "17px",
|
||||
right: "17px",
|
||||
}}
|
||||
onClick={() => this.send(this.state.inputValue)}
|
||||
/>
|
||||
</div>
|
||||
<div style={{
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: "120px",
|
||||
background: "linear-gradient(transparent 0%, rgba(255, 255, 255, 0.8) 50%, white 100%)",
|
||||
pointerEvents: "none",
|
||||
}} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderInput() {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: "fixed",
|
||||
bottom: "90px",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<div style={{position: "relative", width: "760px", marginLeft: "-280px"}}>
|
||||
<TextArea
|
||||
placeholder={"Send a message..."}
|
||||
autoSize={{maxRows: 8}}
|
||||
value={this.state.inputValue}
|
||||
onChange={(e) => this.setState({inputValue: e.target.value})}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
style={{
|
||||
fontSize: "16px",
|
||||
fontWeight: "normal",
|
||||
lineHeight: "24px",
|
||||
width: "770px",
|
||||
height: "48px",
|
||||
borderRadius: "6px",
|
||||
borderColor: "rgb(229,229,229)",
|
||||
boxShadow: "0 0 15px rgba(0, 0, 0, 0.1)",
|
||||
paddingLeft: "17px",
|
||||
paddingRight: "17px",
|
||||
paddingTop: "12px",
|
||||
paddingBottom: "12px",
|
||||
}}
|
||||
suffix={<SendOutlined style={{color: "rgb(210,210,217"}} onClick={() => this.send(this.state.inputValue)} />}
|
||||
autoComplete="off"
|
||||
/>
|
||||
<SendOutlined
|
||||
style={{
|
||||
color: this.state.inputValue === "" ? "rgb(210,210,217)" : "rgb(142,142,160)",
|
||||
position: "absolute",
|
||||
bottom: "17px",
|
||||
right: "17px",
|
||||
}}
|
||||
onClick={() => this.send(this.state.inputValue)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
{
|
||||
this.renderList()
|
||||
}
|
||||
{
|
||||
this.renderInput()
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ChatBox;
|
||||
|
@ -22,7 +22,7 @@ import * as MessageBackend from "./backend/MessageBackend";
|
||||
import i18next from "i18next";
|
||||
import BaseListPage from "./BaseListPage";
|
||||
|
||||
class ChatListPage extends BaseListPage {
|
||||
class ChatPage extends BaseListPage {
|
||||
newChat() {
|
||||
const randomName = Setting.getRandomName();
|
||||
return {
|
||||
@ -77,7 +77,7 @@ class ChatListPage extends BaseListPage {
|
||||
|
||||
renderTable(chats) {
|
||||
return (
|
||||
<div style={{display: "flex", height: "calc(100vh - 197px)"}}>
|
||||
<div style={{display: "flex", height: "calc(100vh - 140px)"}}>
|
||||
<div style={{width: "250px", height: "100%", backgroundColor: "lightblue"}}>
|
||||
<ChatMenu chats={this.state.data} onSelect={(i) => {
|
||||
const chat = chats[i];
|
||||
@ -136,4 +136,4 @@ class ChatListPage extends BaseListPage {
|
||||
}
|
||||
}
|
||||
|
||||
export default ChatListPage;
|
||||
export default ChatPage;
|
||||
|
Reference in New Issue
Block a user