|
@@ -1,5 +1,5 @@
|
|
|
import React, { useState, useEffect } from 'react'
|
|
import React, { useState, useEffect } from 'react'
|
|
|
-import { List, Avatar, Tag, Skeleton, Divider, message } from 'antd'
|
|
|
|
|
|
|
+import { List, Avatar, Tag, Skeleton, Divider, message, Typography } from 'antd'
|
|
|
import InfiniteScroll from 'react-infinite-scroll-component'
|
|
import InfiniteScroll from 'react-infinite-scroll-component'
|
|
|
import { queryMessageList, sendMessage } from '@/services/staff'
|
|
import { queryMessageList, sendMessage } from '@/services/staff'
|
|
|
import AddMessage from './components/AddMessage'
|
|
import AddMessage from './components/AddMessage'
|
|
@@ -8,11 +8,14 @@ import { useRequest, useIntl, useAccess } from 'umi'
|
|
|
import { useModal } from '@/components/Modal'
|
|
import { useModal } from '@/components/Modal'
|
|
|
import MessageDrawer from './components/MessageDrawer'
|
|
import MessageDrawer from './components/MessageDrawer'
|
|
|
import ws, { CmdType } from '@/utils/ws'
|
|
import ws, { CmdType } from '@/utils/ws'
|
|
|
|
|
+import MarkDown from 'react-markdown'
|
|
|
|
|
|
|
|
const Notification = () => {
|
|
const Notification = () => {
|
|
|
const intl = useIntl()
|
|
const intl = useIntl()
|
|
|
const { toggleDrawer, setDrawerProps } = useModal()
|
|
const { toggleDrawer, setDrawerProps } = useModal()
|
|
|
// const { sendMsg } = useWebSocketFn()
|
|
// const { sendMsg } = useWebSocketFn()
|
|
|
|
|
+ const { Paragraph } = Typography
|
|
|
|
|
+ const [ellipsis, setEllipsis] = React.useState(true)
|
|
|
const [state, setState] = useState({
|
|
const [state, setState] = useState({
|
|
|
loading: false,
|
|
loading: false,
|
|
|
list: [],
|
|
list: [],
|
|
@@ -96,11 +99,17 @@ const Notification = () => {
|
|
|
endMessage={<Divider plain>别再滚啦,已是尽头</Divider>}
|
|
endMessage={<Divider plain>别再滚啦,已是尽头</Divider>}
|
|
|
scrollableTarget="scrollableDiv">
|
|
scrollableTarget="scrollableDiv">
|
|
|
<List
|
|
<List
|
|
|
- itemLayout="horizontal"
|
|
|
|
|
|
|
+ itemLayout="vertical"
|
|
|
// pagination={{ pageSize: 5 }}
|
|
// pagination={{ pageSize: 5 }}
|
|
|
dataSource={state.list}
|
|
dataSource={state.list}
|
|
|
renderItem={item => (
|
|
renderItem={item => (
|
|
|
- <List.Item key={item.id}>
|
|
|
|
|
|
|
+ <List.Item
|
|
|
|
|
+ key={item.id}
|
|
|
|
|
+ extra={
|
|
|
|
|
+ <span width={200} className="mt-1 text-hex-aaa">
|
|
|
|
|
+ {item.createTime}
|
|
|
|
|
+ </span>
|
|
|
|
|
+ }>
|
|
|
<List.Item.Meta
|
|
<List.Item.Meta
|
|
|
avatar={<Avatar src={item.avatar} />}
|
|
avatar={<Avatar src={item.avatar} />}
|
|
|
title={
|
|
title={
|
|
@@ -120,8 +129,18 @@ const Notification = () => {
|
|
|
</div>
|
|
</div>
|
|
|
}
|
|
}
|
|
|
/>
|
|
/>
|
|
|
- {/* <MarkDown>{item.content}</MarkDown> */}
|
|
|
|
|
- <div className="mt-1 text-hex-aaa">{item.createTime}</div>
|
|
|
|
|
|
|
+
|
|
|
|
|
+ <Paragraph
|
|
|
|
|
+ ellipsis={
|
|
|
|
|
+ ellipsis
|
|
|
|
|
+ ? {
|
|
|
|
|
+ rows: 4
|
|
|
|
|
+ }
|
|
|
|
|
+ : false
|
|
|
|
|
+ }>
|
|
|
|
|
+ <MarkDown>{item.content}</MarkDown>
|
|
|
|
|
+ </Paragraph>
|
|
|
|
|
+ {/* <div className="mt-1 text-hex-aaa">{item.createTime}</div> */}
|
|
|
</List.Item>
|
|
</List.Item>
|
|
|
)}
|
|
)}
|
|
|
/>
|
|
/>
|