client: use popover with arrow

This commit is contained in:
fantasticit 2022-05-29 23:43:00 +08:00
parent 70d3879a85
commit 9d72480316
2 changed files with 7 additions and 43 deletions

View File

@ -23,11 +23,13 @@ export const DocumentStyle = () => {
return ( return (
<Popover <Popover
key="style" key="style"
showArrow
trigger="click" trigger="click"
zIndex={1061} zIndex={1061}
position={isMobile ? 'topRight' : 'bottomLeft'} position={isMobile ? 'topRight' : 'bottomLeft'}
visible={visible} visible={visible}
onVisibleChange={toggleVisible} onVisibleChange={toggleVisible}
style={{ padding: 0 }}
content={ content={
<div className={styles.wrap}> <div className={styles.wrap}>
<div className={styles.item}> <div className={styles.item}>

View File

@ -1,4 +1,4 @@
import { Badge, Button, Dropdown, Modal, Notification, Pagination, TabPane, Tabs, Typography } from '@douyinfe/semi-ui'; import { Badge, Button, Dropdown, Modal, Pagination, Popover, TabPane, Tabs, Typography } from '@douyinfe/semi-ui';
import { DataRender } from 'components/data-render'; import { DataRender } from 'components/data-render';
import { Empty } from 'components/empty'; import { Empty } from 'components/empty';
import { IconMessage } from 'components/icons/IconMessage'; import { IconMessage } from 'components/icons/IconMessage';
@ -119,46 +119,6 @@ const MessageBox = () => {
toggleVisible(true); toggleVisible(true);
}, [isMobile, toggleVisible]); }, [isMobile, toggleVisible]);
// useEffect(() => {
// if (!unreadMsgs || !unreadMsgs.total) return;
// const msg = unreadMsgs.data[0];
// Notification.info({
// title: '消息通知',
// content: (
// <>
// <div>
// <Text
// ellipsis={{
// showTooltip: {
// opts: { content: msg.message },
// },
// }}
// style={{ width: 240 }}
// >
// {msg.title}
// </Text>
// </div>
// <div>
// <Text link>
// <Link href={msg.url}>
// <a className={styles.item} target="_blank">
// 查看详情
// </a>
// </Link>
// </Text>
// </div>
// </>
// ),
// duration: 3,
// showClose: true,
// onHookClose() {
// readMessage(msg.id);
// },
// });
// }, [unreadMsgs, readMessage]);
const content = ( const content = (
<Tabs <Tabs
type="line" type="line"
@ -236,13 +196,15 @@ const MessageBox = () => {
{btn} {btn}
</> </>
) : ( ) : (
<Dropdown <Popover
showArrow
style={{ padding: 0 }}
position="bottomRight" position="bottomRight"
trigger="click" trigger="click"
content={<div style={{ width: 300, padding: '16px 16px 0' }}>{content}</div>} content={<div style={{ width: 300, padding: '16px 16px 0' }}>{content}</div>}
> >
{btn} {btn}
</Dropdown> </Popover>
)} )}
</span> </span>
); );