update 通知公告显示优化

Api/Ewide.Core/Ewide.Core.xml

@@ -5536,6 +5536,12 @@
             <param name="input"></param>
             <returns></returns>
         </member>
+        <member name="M:Ewide.Core.Service.Notice.SysNoticeService.GetUnreadCount">
+            <summary>
+            获取接收到的通知公告总数
+            </summary>
+            <returns></returns>
+        </member>
         <member name="M:Ewide.Core.Service.Notice.SysNoticeService.UpdatePublicInfo(Ewide.Core.SysNotice)">
             <summary>
             更新发布信息

Api/Ewide.Core/Service/Notice/SysNoticeService.cs

@@ -1,4 +1,6 @@
-using Furion.DatabaseAccessor;
+using Dapper;
+using Ewide.Core.Extension;
+using Furion.DatabaseAccessor;
 using Furion.DatabaseAccessor.Extensions;
 using Furion.DependencyInjection;
 using Furion.DynamicApiController;
@@ -9,6 +11,7 @@ using Microsoft.EntityFrameworkCore;
 using System;
 using System.Collections.Generic;
 using System.Linq;
+using System.Text.RegularExpressions;
 using System.Threading.Tasks;
 
 namespace Ewide.Core.Service.Notice
@@ -26,15 +29,20 @@ namespace Ewide.Core.Service.Notice
 
         private readonly ISysNoticeUserService _sysNoticeUserService;
 
+        private readonly IDapperRepository _dapperRepository;
+
+
         public SysNoticeService(IRepository<SysNotice> sysNoticeRep,
                                 IRepository<SysNoticeUser> sysNoticeUserRep,
                                 IUserManager userManager,
-                                ISysNoticeUserService sysNoticeUserService)
+                                ISysNoticeUserService sysNoticeUserService, IDapperRepository dapperRepository)
         {
             _sysNoticeRep = sysNoticeRep;
             _sysNoticeUserRep = sysNoticeUserRep;
             _userManager = userManager;
             _sysNoticeUserService = sysNoticeUserService;
+
+            _dapperRepository = dapperRepository;
         }
 
         /// <summary>
@@ -150,7 +158,6 @@ namespace Ewide.Core.Service.Notice
                     var noticeUserRead = new NoticeUserRead
                     {
                         UserId = u.UserId,
-                        UserName = _userManager.Name,
                         ReadStatus = u.ReadStatus,
                         ReadTime = u.ReadTime
                     };
@@ -158,18 +165,17 @@ namespace Ewide.Core.Service.Notice
                 });
             }
             var noticeResult = notice.Adapt<NoticeDetailOutput>();
-            noticeResult.NoticeUserIdList = noticeUserIdList;
+            if (_userManager.SuperAdmin)
-            noticeResult.NoticeUserReadInfoList = noticeUserReadInfoList;
+            {
+                noticeResult.NoticeUserIdList = noticeUserIdList;
+                noticeResult.NoticeUserReadInfoList = noticeUserReadInfoList;
+            }
             // 如果该条通知公告为已发布，则将当前用户的该条通知公告设置为已读
             if (notice.Status == (int)NoticeStatus.PUBLIC)
                 await _sysNoticeUserService.Read(notice.Id, _userManager.UserId, (int)NoticeUserStatus.READ);
             return noticeResult;
         }
-        [HttpGet("/sysNotice/detailById")]
+
-        public async Task<SysNotice> GetNotice(string id)
-        {
-            return await _sysNoticeRep.FirstOrDefaultAsync(u => u.Id == id);
-        }
         /// <summary>
         /// 修改通知公告状态
         /// </summary>
@@ -201,18 +207,45 @@ namespace Ewide.Core.Service.Notice
         /// </summary>
         /// <param name="input"></param>
         /// <returns></returns>
-        [HttpGet("/sysNotice/received")]
+        [HttpPost("/sysNotice/received")]
-        public async Task<dynamic> ReceivedNoticePageList([FromQuery] NoticeInput input)
+        public async Task<dynamic> ReceivedNoticePageList([FromBody] NoticeInput input)
         {
-            var searchValue = !string.IsNullOrEmpty(input.SearchValue?.Trim());
+            var sql = @"SELECT 
-            var notices = await _sysNoticeRep.DetachedEntities.Join(_sysNoticeUserRep.DetachedEntities, u => u.Id, e => e.NoticeId, (u, e) => new { u, e })
+SN.*,
-                                             .Where(u => u.e.UserId == _userManager.UserId)
+SU.Avatar
-                                             .Where(searchValue, u => EF.Functions.Like(u.u.Title, $"%{input.SearchValue.Trim()}%") || EF.Functions.Like(u.u.Content, $"%{input.SearchValue.Trim()}%"))
+FROM sys_notice SN 
-                                             .Where(input.Type > 0, u => u.u.Type == input.Type)
+LEFT JOIN sys_notice_user SNU ON SN.Id = SNU.NoticeId
-                                             .Where(u => u.u.Status != (int)NoticeStatus.DELETED)
+LEFT JOIN sys_user SU ON SN.PublicUserId = SU.Id
-                                             .Select(u => u.u.Adapt<NoticeReceiveOutput>())
+WHERE SNU.UserId = @UserId AND SN.Status <> @Status";
-                                             .ToPagedListAsync(input.PageIndex, input.PageSize);
+
-            return PageDataResult<NoticeReceiveOutput>.PageResult(notices);
+            var data = await _dapperRepository.QueryPageDataDynamic(
+                sql,
+                input,
+                new
+                {
+                    _userManager.UserId,
+                    Status = (int)NoticeStatus.DELETED
+                }
+            );
+
+            data.Items = data.Items.Select(p => {
+                var r = p.Adapt<dynamic>();
+                r.Content = Regex.Replace(r.Content, @"<\/?.+?\/?>", "").Replace("\r\n", "");
+                return r;
+            });
+
+            return data;
+
+        }
+
+        /// <summary>
+        /// 获取接收到的通知公告总数
+        /// </summary>
+        /// <returns></returns>
+        [HttpGet("/sysNotice/unread")]
+        public async Task<int> GetUnreadCount()
+        {
+            return await _sysNoticeUserRep.Where(u => u.UserId == _userManager.UserId && u.ReadStatus == (int)NoticeUserStatus.UNREAD).CountAsync();
         }
 
         /// <summary>

Api/Ewide.Core/Service/Notice/SysNoticeUserService.cs

@@ -48,18 +48,7 @@ namespace Ewide.Core.Service.Notice
                 }.InsertAsync();
             }
         }
-        [HttpGet("/NoticeUser/getCount")]
-        public async Task<int> GetCount()
-        {
-            return await _sysNoticeUserRep.Where(u => u.UserId == _userManager.UserId && u.ReadStatus == (int)NoticeUserStatus.UNREAD).CountAsync();
-        }
-        [HttpGet("/NoticeUser/GetNoticeInfo")]
-        public async Task<List<SysNotice>> GetNoticeInfo()
-        {
-            var noticeIdList = await _sysNoticeUserRep.Where(u => u.UserId == _userManager.UserId && u.ReadStatus == (int)NoticeUserStatus.UNREAD).Select(p => p.NoticeId).ToListAsync();
 
-            return await _sysNoticeRep.Where(s => noticeIdList.Contains(s.Id)).ToListAsync();
-        }
         /// <summary>
         /// 更新
         /// </summary>

Api/Ewide.Core/applicationconfig.json

@@ -97,7 +97,10 @@
       "sysFileInfo:preview",
       "sysUser:updateInfo",
       "sysUser:updatePwd",
-      "sysUser:updateAvatar"
+      "sysUser:updateAvatar",
+      "sysNotice:received",
+      "sysNotice:unread",
+      "sysNotice:detail"
     ]
   }
 }

web-react/craco.config.js

@@ -29,7 +29,7 @@ module.exports = {
     ],
     webpack: {
         plugins: [
-            new MonacoWebpackPlugin()
+            //new MonacoWebpackPlugin()
         ]
     }
 }

web-react/package.json

@@ -23,6 +23,7 @@
     "react-color": "^2.19.3",
     "react-cropper": "^2.1.8",
     "react-dom": "^17.0.2",
+    "react-infinite-scroller": "^1.2.4",
     "react-json-view": "^1.21.3",
     "react-monaco-editor": "^0.43.0",
     "react-router": "^5.2.0",

web-react/src/assets/style/dark/lib/form.less

@@ -151,6 +151,8 @@
       flex: 0 0 100%;
 
       width: 100%;
+
+      text-align: inherit;
     }
   }
   .yo-form--short {

web-react/src/assets/style/dark/lib/visibility.less

@@ -21,26 +21,25 @@
   display: flex;
 }
 .ellipsis {
+  display: block;
   overflow: hidden;
 
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.ellipsis-2 {
+.ellipsis-line(@line) {
   display: -webkit-box;
   overflow: hidden;
   -webkit-box-orient: vertical;
 
   text-overflow: ellipsis;
+  word-break: break-all;
 
-  -webkit-line-clamp: 2;
+  -webkit-line-clamp: @line;
+}
+.ellipsis-2 {
+  .ellipsis-line(2);
 }
 .ellipsis-3 {
-  display: -webkit-box;
+  .ellipsis-line(3);
-  overflow: hidden;
-  -webkit-box-orient: vertical;
-
-  text-overflow: ellipsis;
-
-  -webkit-line-clamp: 3;
 }

web-react/src/assets/style/dark/main.less

@@ -94,44 +94,76 @@
 
         transition: @animation-duration-slow;
         transition-property: color;
-        // 特殊工具按钮
-        .theme-toggle {
-          position: relative;
-
-          overflow: hidden;
-
-          width: 20px;
-          height: 20px;
-          margin: 7px 0;
-
-          border-radius: 50%;
-          &--real {
-            width: 100%;
-            height: 100%;
-
-            border-radius: 50%;
-            background-color: #fff;
-          }
-          &--imaginary {
-            position: absolute;
-            top: 6px;
-            left: -6px;
-
-            width: 18px;
-            height: 18px;
-
-            transform: @animation-duration-slow transform;
-            transform: rotate(45deg) scaleY(1);
-            transform-origin: top right;
-
-            border-radius: 50%;
-            background-color: fade(@layout-header-background, 70%);
-          }
-        }
       }
       &:active {
         box-shadow: inset 1px 1px 10px rgba(0, 0, 0, .05);
       }
+      // 特殊工具按钮
+      .theme-toggle {
+        position: relative;
+
+        overflow: hidden;
+
+        width: 20px;
+        height: 20px;
+        margin: 7px 0;
+
+        border-radius: 50%;
+        &--real {
+          position: relative;
+
+          width: 20px;
+          height: 20px;
+
+          transition: @animation-duration-slow background-color;
+
+          border-radius: 50%;
+          background-color: fade(@white, 60%);
+          &::before {
+            position: absolute;
+            top: 5px;
+            left: 5px;
+
+            width: 10px;
+            height: 10px;
+
+            content: '';
+            transition: @animation-duration-slow transform;
+            transform: scale(0);
+
+            border: 2px solid @layout-header-background;
+            border-radius: 50%;
+          }
+        }
+        &--imaginary {
+          position: absolute;
+          top: 6px;
+          right: -6px;
+
+          width: 18px;
+          height: 18px;
+
+          transition: @animation-duration-slow transform;
+          transform: rotate(45deg) scaleY(1);
+          transform-origin: top right;
+
+          border-radius: 50%;
+          background-color: @layout-header-background;
+        }
+      }
+      &:hover {
+        .theme-toggle {
+          &--real {
+            background-color: @white;
+            &::before {
+              transform: scale(1);
+            }
+          }
+          &--imaginary {
+            transform: rotate(45deg) scaleY(0);
+          }
+        }
+      }
     }
     .ant-select-auto-complete {
       margin: (@layout-header-height - 10px - 30px) / 2 @padding-md;

web-react/src/assets/style/default/lib/form.less

@@ -151,6 +151,8 @@
       flex: 0 0 100%;
 
       width: 100%;
+
+      text-align: inherit;
     }
   }
   .yo-form--short {

web-react/src/assets/style/default/lib/visibility.less

@@ -21,26 +21,25 @@
   display: flex;
 }
 .ellipsis {
+  display: block;
   overflow: hidden;
 
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.ellipsis-2 {
+.ellipsis-line(@line) {
   display: -webkit-box;
   overflow: hidden;
   -webkit-box-orient: vertical;
 
   text-overflow: ellipsis;
+  word-break: break-all;
 
-  -webkit-line-clamp: 2;
+  -webkit-line-clamp: @line;
+}
+.ellipsis-2 {
+  .ellipsis-line(2);
 }
 .ellipsis-3 {
-  display: -webkit-box;
+  .ellipsis-line(3);
-  overflow: hidden;
-  -webkit-box-orient: vertical;
-
-  text-overflow: ellipsis;
-
-  -webkit-line-clamp: 3;
 }

web-react/src/assets/style/default/main.less

@@ -98,6 +98,72 @@
       &:active {
         box-shadow: inset 1px 1px 10px rgba(0, 0, 0, .05);
       }
+      // 特殊工具按钮
+      .theme-toggle {
+        position: relative;
+
+        overflow: hidden;
+
+        width: 20px;
+        height: 20px;
+        margin: 7px 0;
+
+        border-radius: 50%;
+        &--real {
+          position: relative;
+
+          width: 100%;
+          height: 100%;
+
+          transition: @animation-duration-slow background-color;
+
+          border-radius: 50%;
+          background-color: fade(@white, 60%);
+          &::before {
+            position: absolute;
+            top: 5px;
+            left: 5px;
+
+            width: 10px;
+            height: 10px;
+
+            content: '';
+            transition: @animation-duration-slow transform;
+            transform: scale(1);
+
+            border: 2px solid @layout-header-background;
+            border-radius: 50%;
+          }
+        }
+        &--imaginary {
+          position: absolute;
+          top: 6px;
+          right: -6px;
+
+          width: 18px;
+          height: 18px;
+
+          transition: @animation-duration-slow transform;
+          transform: rotate(45deg) scaleY(0);
+          transform-origin: top right;
+
+          border-radius: 50%;
+          background-color: #334454;
+        }
+      }
+      &:hover {
+        .theme-toggle {
+          &--real {
+            background-color: @white;
+            &::before {
+              transform: scale(0);
+            }
+          }
+          &--imaginary {
+            transform: rotate(45deg) scaleY(1);
+          }
+        }
+      }
     }
     .ant-select-auto-complete {
       margin: (@layout-header-height - 10px - 30px) / 2 @padding-md;

web-react/src/common/api/requests/sys/index.js

@@ -9,6 +9,7 @@ import logManage from './logManage'
 import machineManage from './machineManage'
 import menuManage from './menuManage'
 import noticeManage from './noticeManage'
+import noticeReceiveManage from './noticeReceiveManage'
 import onlineUserManage from './onlineUserManage'
 import orgManage from './orgManage'
 import posManage from './posManage'
@@ -31,6 +32,7 @@ const urls = {
     ...machineManage,
     ...menuManage,
     ...noticeManage,
+    ...noticeReceiveManage,
     ...onlineUserManage,
     ...orgManage,
     ...posManage,

web-react/src/common/api/requests/sys/noticeManage.js

@@ -28,20 +28,6 @@ const urls = {
      * 修改状态
      */
     sysNoticeChangeStatus: ['/sysNotice/changeStatus', 'post'],
-
-    /**
-     * 获取Notice总数
-     */
-    sysNoticeGetCount: ['/NoticeUser/getCount', 'get'],
-
-    /**
-     * 获取Notice详细
-     */
-    sysNoticeInfo: ['/NoticeUser/GetNoticeInfo', 'get'],
-    /**
-     * 获取Notice详细ByID
-     */
-    sysNoticeShow: ['/sysNotice/detailById', 'get'],
 }
 
 export default urls

web-react/src/common/api/requests/sys/noticeReceiveManage.js

@@ -1,8 +1,12 @@
 const urls = {
     /**
+ * 获取接收到的通知公告总数
+ */
+    sysNoticeUnread: ['/sysNotice/unread', 'get'],
+    /**
  * 查询我收到的系统通知公告
  */
-    sysNoticeReceived: ['/sysNotice/received', 'get'],
+    sysNoticeReceived: ['/sysNotice/received', 'post'],
 }
 
 export default urls

web-react/src/components/form/braft-editor/index.jsx

@@ -7,7 +7,7 @@ import 'braft-editor/dist/index.css'
 export default class index extends Component {
     state = {
         editorState: BraftEditor.createEditorState(this.props.value), // 设置编辑器初始内容
-        outputHTML: '<p></p>',
+        outputHTML: '',
     }
     /**
      * mount后回调
@@ -43,7 +43,7 @@ export default class index extends Component {
         const { editorState, outputHTML } = this.state
 
         //localStorage.setItem('props', JSON.stringify(this.props))
-        const controls = ['bold', 'italic', 'underline', 'text-color', 'separator', 'media']
+        const controls = ['bold', 'italic', 'underline', 'text-color', 'separator']
         return (
             <BraftEditor
                 value={editorState}

web-react/src/components/index.js

@@ -1,6 +1,7 @@
 export { default as AntIcon } from './ant-icon'
 export { default as AuthorityView } from './authority-view'
 export { default as Auth } from './authorized'
+export { default as BraftEditor } from './form/braft-editor'
 export { default as ColorSelector } from './form/color-selector'
 export { default as ComponentDynamic } from './component-dynamic'
 export { default as Container } from './container'
@@ -13,4 +14,3 @@ export { default as QueryList } from './query-list'
 export { default as QueryTable } from './query-table'
 export { default as QueryTableActions } from './query-table-actions'
 export { default as QueryTreeLayout } from './query-tree-layout'
-export { default as BraftEditor } from './form/braft-editor'

web-react/src/pages/system/notice/form.jsx

@@ -96,13 +96,13 @@ export default class form extends Component {
         return (
             <Form initialValues={initialValues} ref={this.form} className="yo-form">
                 <Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
-                    <div className="yo-form-group">
+                    <div className="yo-form-group yo-form--fluid">
                         <Form.Item
                             label="标题"
                             name="title"
                             rules={[{ required: true, message: '请输入标题', trigger: 'blur' }]}
                         >
-                            <Input autoComplete="off" placeholder="请输入标题" className="w-300" />
+                            <Input autoComplete="off" placeholder="请输入标题" />
                         </Form.Item>
                         <Form.Item
                             label="类型"
@@ -120,7 +120,17 @@ export default class form extends Component {
                         <Form.Item
                             label="内容"
                             name="content"
-                            // rules={[{ required: true, message: '请输入内容' }]}
+                            rules={[
+                                { required: true, message: '请输入内容' },
+                                {
+                                    validator: async (field, value) => {
+                                        const v = value.replace(/<\/?.+?\/?>/g, '')
+                                        if (!v) {
+                                            throw Error('请输入内容')
+                                        }
+                                    },
+                                },
+                            ]}
                         >
                             <BraftEditor />
                         </Form.Item>

web-react/src/pages/system/notice/index.jsx

@@ -28,7 +28,7 @@ const apiAction = {
  * 用于弹窗标题
  * [必要]
  */
-const name = '啥玩意'
+const name = '通知公告'
 
 /**
  * 统一配置权限标识
@@ -253,6 +253,7 @@ export default class index extends Component {
                 <Auth auth={{ [authName]: 'add' }}>
                     <ModalForm
                         title={`新增${name}`}
+                        width={800}
                         action={apiAction.add}
                         ref={this.addForm}
                         onSuccess={() => this.table.current.onReloadData()}
@@ -264,6 +265,7 @@ export default class index extends Component {
                 <Auth auth={{ [authName]: 'edit' }}>
                     <ModalForm
                         title={`编辑${name}`}
+                        width={800}
                         action={apiAction.edit}
                         ref={this.editForm}
                         onSuccess={() => this.table.current.onReloadData()}

web-react/src/views/main/_layout/header/index.jsx

@@ -1,23 +1,19 @@
 import React, { Component, useState } from 'react'
-import { Layout, Badge, Popover, Menu, Modal } from 'antd'
+import { Layout, Badge, Popover, Menu, Modal, Tooltip, Popconfirm } from 'antd'
 import { AntIcon, Container } from 'components'
-import Logo from '../logo'
-import User from './user'
-import Search from './search'
 import store from 'store'
 import { api } from 'common/api'
 
+import Logo from '../logo'
+import Search from './search'
+import Notice from './notice'
+import User from './user'
+
 const { getState, subscribe, dispatch } = store
 
 export default class index extends Component {
     state = {
         ...getState('layout'),
-        notice: {
-            count: 0,
-            data: [],
-        },
-        modalVisible: false,
-        currentNotice: {},
     }
 
     constructor(props) {
@@ -28,10 +24,6 @@ export default class index extends Component {
         })
     }
 
-    componentDidMount() {
-        this.loadNotice()
-    }
-
     componentWillUnmount() {
         this.unsubscribe()
     }
@@ -43,27 +35,8 @@ export default class index extends Component {
         })
     }
 
-    async loadNotice() {
-        const { data } = await api.sysNoticeGetCount()
-        const items = await api.sysNoticeInfo()
-        this.setState({
-            notice: {
-                count: data,
-                data: items.data,
-            },
-        })
-    }
-    async showDetail(params, visible) {
-        this.setState({ currentNotice: params })
-
-        if (visible) {
-            this.setState({ modalVisible: visible })
-        } else {
-            this.setState({ modalVisible: visible })
-        }
-    }
     render() {
-        const { allowSiderCollapsed, notice, currentNotice } = this.state
+        const { allowSiderCollapsed, theme } = this.state
         return (
             <Layout.Header>
                 <Container mode="fluid">
@@ -80,57 +53,38 @@ export default class index extends Component {
                         <Search />
                     </div>
                     <div className="header-actions">
-                        <span
+                        <Tooltip placement="bottom" title="重新加载框架">
-                            className="header-action"
+                            <span
-                            onClick={() => window.realodContentWindow()}
+                                className="header-action"
-                        >
+                                onClick={() => window.realodContentWindow()}
-                            <AntIcon type="reload" />
-                        </span>
-                        <Popover
-                            arrowPointAtCenter={true}
-                            overlayClassName="yo-user-popover"
-                            placement="bottomRight"
-                            content={
-                                <Menu selectable={false}>
-                                    <Menu.Divider />
-                                    {notice.data.map(item => (
-                                        <Menu.Item
-                                            onClick={() => this.showDetail(item, true)}
-                                            key={item.id}
-                                        >
-                                            {item.title}
-                                        </Menu.Item>
-                                    ))}
-                                </Menu>
-                            }
-                        >
-                            <span className="header-action">
-                                <Badge count={notice.count}>
-                                    <AntIcon type="bell" />
-                                </Badge>
-                            </span>
-
-                            <Modal
-                                title={currentNotice.title}
-                                width={1000}
-                                style={{ top: 120 }}
-                                visible={this.state.modalVisible}
-                                onOk={() => this.showDetail(false)}
-                                onCancel={() => this.showDetail(false)}
-                                style={{ zIndex: 1000 }}
                             >
-                                <div style={{ textAlign: 'center', fontSize: '30px' }}>
+                                <AntIcon type="reload" />
-                                    <div
+                            </span>
-                                        dangerouslySetInnerHTML={{ __html: currentNotice.content }}
+                        </Tooltip>
-                                    ></div>
+                        <Notice />
-                                </div>
+                        <Tooltip
-                                <div style={{ textAlign: 'right', fontSize: '10px' }}>
+                            placement="bottom"
-                                    <span>发布人：{currentNotice.createdUserName}</span>
+                            title={`切换到${{ default: '夜间', dark: '默认' }[theme]}模式`}
-                                    {'  '}
+                        >
-                                    <span>发布时间：{currentNotice.createdTime} </span>
+                            <Popconfirm
-                                </div>
+                                placement="bottomRight"
-                            </Modal>
+                                title="切换模式将刷新整个页面,是否继续?"
-                        </Popover>
+                                onConfirm={() => {
+                                    dispatch({
+                                        type: 'SET_THEME',
+                                        theme: { default: 'dark', dark: 'default' }[theme],
+                                    })
+                                    window.location.reload()
+                                }}
+                            >
+                                <span className="header-action">
+                                    <div className="theme-toggle">
+                                        <div className="theme-toggle--real" />
+                                        <div className="theme-toggle--imaginary" />
+                                    </div>
+                                </span>
+                            </Popconfirm>
+                        </Tooltip>
                         <User />
                     </div>
                 </Container>

web-react/src/views/main/_layout/header/notice.jsx

@@ -0,0 +1,145 @@
+import React, { Component } from 'react'
+import { Badge, Divider, List, Menu, Modal, Popover, Row, Spin } from 'antd'
+import { AntIcon, Image } from 'components'
+import { api } from 'common/api'
+import InfiniteScroll from 'react-infinite-scroller'
+import moment from 'moment'
+
+export default class notice extends Component {
+    state = {
+        count: 0,
+        list: [],
+
+        loading: false,
+        hasMore: true,
+
+        detailVisible: false,
+        detailLoading: false,
+        detailData: {},
+    }
+
+    async componentDidMount() {
+        const { data: count } = await api.sysNoticeUnread()
+        this.setState({ count })
+    }
+
+    finish() {
+        this.setState({ loading: false, hasMore: false })
+    }
+
+    async onInfiniteOnLoad(pageIndex) {
+        this.setState({ loading: true })
+        const { list } = this.state
+        if (list.length >= 30) {
+            return this.finish()
+        }
+
+        const {
+            data: { items },
+        } = await api.sysNoticeReceived({
+            pageIndex,
+            pageSize: 5,
+            sortField: 'createdTime',
+            sortOrder: 'descend',
+        })
+
+        if (!items.length) {
+            return this.finish()
+        }
+
+        this.setState({
+            list: [...list, ...items],
+            loading: false,
+        })
+    }
+
+    async onOpenDetail(id) {
+        this.setState({ detailLoading: true, detailVisible: true })
+        const { data } = await api.sysNoticeDetail({ id })
+        this.setState({
+            detailLoading: false,
+            detailData: data,
+        })
+    }
+
+    renderList() {
+        const { list, loading, hasMore } = this.state
+        return (
+            <InfiniteScroll
+                loadMore={pageIndex => this.onInfiniteOnLoad(pageIndex)}
+                hasMore={!loading && hasMore}
+                useWindow={false}
+                threshold={100}
+            >
+                <List
+                    itemLayout="vertical"
+                    dataSource={list}
+                    renderItem={item => (
+                        <List.Item key={item.id}>
+                            <List.Item.Meta
+                                avatar={<Image id={item.avatar} type="avatar" />}
+                                title={
+                                    <a
+                                        className="ellipsis"
+                                        onClick={() => this.onOpenDetail(item.id)}
+                                    >
+                                        {item.title}
+                                    </a>
+                                }
+                                description={moment(item.createdTime || item.publicTime).fromNow()}
+                            />
+                            <div className="ellipsis-3 text-gray">{item.content}</div>
+                        </List.Item>
+                    )}
+                >
+                    {loading && hasMore && (
+                        <div className="pt-md pb-md text-center">
+                            <Spin indicator={<AntIcon type="loading" />} />
+                        </div>
+                    )}
+                </List>
+            </InfiniteScroll>
+        )
+    }
+
+    render() {
+        const { count, detailLoading, detailVisible, detailData } = this.state
+
+        return (
+            <Popover
+                arrowPointAtCenter={true}
+                placement="bottomRight"
+                content={this.renderList()}
+                overlayInnerStyle={{ width: 300, maxHeight: 300, overflowY: 'auto' }}
+                overlayStyle={{ zIndex: 999 }}
+            >
+                <span className="header-action">
+                    <Badge count={count}>
+                        <AntIcon type="bell" />
+                    </Badge>
+                </span>
+
+                <Modal
+                    width={1000}
+                    footer={false}
+                    visible={detailVisible}
+                    onCancel={() => this.setState({ detailVisible: false, detailData: {} })}
+                >
+                    <Spin spinning={detailLoading} indicator={<AntIcon type="loading" />}>
+                        <div className="h3 mt-lg">{detailData.title}</div>
+                        <Divider />
+                        <div
+                            className="pt-lg pb-lg"
+                            dangerouslySetInnerHTML={{ __html: detailData.content }}
+                        ></div>
+                        <Divider />
+                        <Row justify="space-between" className="text-gray">
+                            <span>发布人：{detailData.publicUserName}</span>
+                            <span>发布时间：{detailData.publicTime} </span>
+                        </Row>
+                    </Spin>
+                </Modal>
+            </Popover>
+        )
+    }
+}

web-react/yarn.lock

@@ -9285,7 +9285,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.5.10, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.npm.taobao.org/prop-types/download/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha1-UsQedbjIfnK52TYOAga5ncv/psU=
@@ -9877,6 +9877,13 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.nlark.com/react-error-overlay/download/react-error-overlay-6.0.9.tgz?cache=0&sync_timestamp=1618847933355&other_urls=https%3A%2F%2Fregistry.nlark.com%2Freact-error-overlay%2Fdownload%2Freact-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha1-PHQwEMk1lgjDdezWvHbzXZOZWwo=
 
+react-infinite-scroller@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.npm.taobao.org/react-infinite-scroller/download/react-infinite-scroller-1.2.4.tgz#f67eaec4940a4ce6417bebdd6e3433bfc38826e9"
+  integrity sha1-9n6uxJQKTOZBe+vdbjQzv8OIJuk=
+  dependencies:
+    prop-types "^15.5.8"
+
 react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.nlark.com/react-is/download/react-is-16.13.1.tgz?cache=0&sync_timestamp=1623273254569&other_urls=https%3A%2F%2Fregistry.nlark.com%2Freact-is%2Fdownload%2Freact-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"