llvy.ltd/casdoor
1
0
Fork 0
mirror of https://github.com/casdoor/casdoor.git synced 2025-05-24 08:20:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add empty list item and expand menu by default

Browse Source
This commit is contained in:
Yang Luo 2023-04-10 01:57:53 +08:00
parent ebe8ad8669
commit 0db61dd658
3 changed files with 50 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
web/src/ChatBox.js
View File

@ -49,27 +49,38 @@ class ChatBox extends React.Component {
<List <List
style={{maxHeight: "calc(100vh - 140px)", overflowY: "auto"}} style={{maxHeight: "calc(100vh - 140px)", overflowY: "auto"}}
itemLayout="horizontal" itemLayout="horizontal"
dataSource={this.props.messages} dataSource={this.props.messages === undefined ? undefined : [...this.props.messages, {}]}
renderItem={(item, index) => ( renderItem={(item, index) => {
<List.Item style={{ if (Object.keys(item).length === 0 && item.constructor === Object) {
backgroundColor: index % 2 === 0 ? "white" : "rgb(247,247,248)", return <List.Item style={{
borderBottom: "1px solid rgb(229, 229, 229)", height: "160px",
position: "relative", backgroundColor: index % 2 === 0 ? "white" : "rgb(247,247,248)",
}}> borderBottom: "1px solid rgb(229, 229, 229)",
<div style={{width: "800px", margin: "0 auto", position: "relative"}}> 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>}
/> return (
<div style={{position: "absolute", top: "0px", right: "0px"}} <List.Item style={{
> backgroundColor: index % 2 === 0 ? "white" : "rgb(247,247,248)",
<CopyOutlined style={{color: "rgb(172,172,190)", margin: "5px"}} /> borderBottom: "1px solid rgb(229, 229, 229)",
<LikeOutlined style={{color: "rgb(172,172,190)", margin: "5px"}} /> position: "relative",
<DislikeOutlined style={{color: "rgb(172,172,190)", margin: "5px"}} /> }}>
<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> </div>
</div> </List.Item>
</List.Item> );
)} }}
/> />
<div style={{ <div style={{
position: "absolute", position: "absolute",

6
web/src/ChatMenu.js
View File

@ -19,8 +19,12 @@ import {LayoutOutlined} from "@ant-design/icons";
class ChatMenu extends React.Component { class ChatMenu extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
const items = this.chatsToItems(this.props.chats);
const openKeys = items.map((item) => item.key);
this.state = { this.state = {
openKeys: ["0"], openKeys: openKeys,
selectedKeys: ["0-0"], selectedKeys: ["0-0"],
}; };
} }

25
web/src/ChatPage.js
View File

@ -13,6 +13,7 @@
// limitations under the License. // limitations under the License.
import React from "react"; import React from "react";
import {Spin} from "antd";
import moment from "moment"; import moment from "moment";
import ChatMenu from "./ChatMenu"; import ChatMenu from "./ChatMenu";
import ChatBox from "./ChatBox"; import ChatBox from "./ChatBox";
@ -76,18 +77,20 @@ class ChatPage extends BaseListPage {
} }
renderTable(chats) { renderTable(chats) {
return ( return (this.state.loading) ? <Spin size="large" style={{marginLeft: "50%", marginTop: "10%"}} /> : (
<div style={{display: "flex", height: "calc(100vh - 140px)"}}> (
<div style={{width: "250px", height: "100%", backgroundColor: "lightblue"}}> <div style={{display: "flex", height: "calc(100vh - 140px)"}}>
<ChatMenu chats={this.state.data} onSelect={(i) => { <div style={{width: "250px", height: "100%", backgroundColor: "lightblue"}}>
const chat = chats[i]; <ChatMenu chats={chats} onSelect={(i) => {
this.getMessages(chat.name); const chat = chats[i];
}} /> this.getMessages(chat.name);
}} />
</div>
<div style={{flex: 1, height: "100%", backgroundColor: "lightgreen"}}>
<ChatBox messages={this.state.messages} account={this.props.account} />
</div>
</div> </div>
<div style={{flex: 1, height: "100%", backgroundColor: "lightgreen"}}> )
<ChatBox messages={this.state.messages} account={this.props.account} />
</div>
</div>
); );
} }