mirror of https://github.com/fantasticit/think.git
client: use popover with arrow
This commit is contained in:
parent
70d3879a85
commit
9d72480316
|
@ -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}>
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue