feat: 增加通知提醒与帮助按钮

packages/admin/src/pages/index.tsx

-import React, { useState } from 'react'
-import { PlusSquareTwoTone } from '@ant-design/icons'
+import React, { useState, useEffect } from 'react'
+import { PlusSquareTwoTone, BellOutlined, MessageTwoTone } from '@ant-design/icons'
 import {
   Card,
   Row,
@@ -14,13 +14,20 @@ import {
   Skeleton,
   Tooltip,
   Typography,
+  Badge,
+  Drawer,
+  Switch,
+  Timeline,
+  Popover,
 } from 'antd'
+import moment from 'moment'
 import { useConcent } from 'concent'
 import { history, useRequest, useAccess } from 'umi'
 import AvatarDropdown from '@/components/AvatarDropdown'
 import { getProjects, createProject } from '@/services/project'
 import logo from '@/assets/logo.svg'
 import './index.less'
+import { getCmsNotices } from '@/services/notice'
 
 const { Header, Content, Footer } = Layout
 
@@ -78,9 +85,12 @@ const ContentWrapper: React.FC<{ loading: boolean }> = ({ children, loading }) =
   return (
     <Layout className="home">
       <Header className="header">
-        <img className="logo" src={logo} alt="logo" />
-        <h1 className="title">CloudBase CMS</h1>
-        <div className="account">
+        <div className="left">
+          <img className="logo" src={logo} alt="logo" />
+          <h1 className="title">CloudBase CMS</h1>
+        </div>
+        <div className="right">
+          {window.TcbCmsConfig.disableNotice ? null : <NoticeRender />}
           <AvatarDropdown />
         </div>
       </Header>
@@ -100,10 +110,129 @@ const ContentWrapper: React.FC<{ loading: boolean }> = ({ children, loading }) =
         </Row>
       </Content>
       <Footer className="footer">CloudBase CMS 2.0.0</Footer>
+      {window.TcbCmsConfig.disableHelpButton ? null : (
+        <Popover
+          placement="topLeft"
+          title="帮助"
+          content={
+            <Space>
+              <Button type="primary">
+                <a href="https://docs.cloudbase.net/cms/intro.html" target="_blank">
+                  文档
+                </a>
+              </Button>
+              <Button type="primary">
+                <a href="https://support.qq.com/products/148793" target="_blank">
+                  反馈
+                </a>
+              </Button>
+            </Space>
+          }
+          trigger="click"
+        >
+          <Button
+            size="large"
+            type="primary"
+            shape="circle"
+            className="help-btn"
+            icon={<MessageTwoTone />}
+          />
+        </Popover>
+      )}
     </Layout>
   )
 }
 
+const startTimeKey = 'noticeStartTime'
+
+export const NoticeRender: React.FC = () => {
+  const [noticeVisible, setNoticeVisible] = useState(false)
+  const [notices, setNotices] = useState<any>([])
+  const [unReadNoticeCount, setUnreadNoticeCount] = useState(0)
+
+  // 设置全部已读
+  const readAllNotices = () => {
+    // 全部已读后，不可回退
+    if (unReadNoticeCount === 0) {
+      return
+    }
+    // 更新未读消息数量
+    setUnreadNoticeCount(0)
+    // 使用最新消息的时间作为开始时间戳
+    localStorage.setItem(startTimeKey, new Date(notices[0]?.noticeTime).getTime().toString())
+  }
+
+  // 获取未读消息
+  const getNotices = async () => {
+    let startTime = parseInt(localStorage.getItem(startTimeKey) || '0', 10)
+    if (isNaN(startTime)) {
+      // 默认拉取过去2个月的未读消息
+      startTime = Date.now() - 1000 * 60 * 60 * 24 * 60
+    }
+
+    const { notices } = await getCmsNotices(startTime)
+    setNotices(notices)
+    setUnreadNoticeCount(notices.length)
+  }
+
+  useEffect(() => {
+    getNotices()
+  }, [])
+
+  return (
+    <>
+      <Button
+        style={{
+          marginRight: '10px',
+        }}
+        type="text"
+        onClick={() => {
+          if (notices.length) {
+            setNoticeVisible(true)
+          } else {
+            message.info('没有新消息')
+          }
+        }}
+      >
+        <Badge count={unReadNoticeCount} overflowCount={10}>
+          <BellOutlined
+            style={{
+              fontSize: '1.8em',
+              fontWeight: 'bold',
+              color: '#fff',
+            }}
+          />
+        </Badge>
+      </Button>
+      <Drawer
+        width={550}
+        title={
+          <Switch
+            checkedChildren="全部已读"
+            unCheckedChildren="标记为已读"
+            checked={unReadNoticeCount === 0}
+            onChange={readAllNotices}
+          />
+        }
+        placement="right"
+        closable={true}
+        onClose={() => setNoticeVisible(false)}
+        visible={noticeVisible}
+      >
+        <Timeline mode="left">
+          {notices.map((notice: any) => (
+            <Timeline.Item key={notice._id} color="blue">
+              <h3>{moment(notice.noticeTime).format('YYYY-MM-DD')}</h3>
+              <h3>{notice.noticeTitle}</h3>
+              <p>{notice.noticeContent}</p>
+            </Timeline.Item>
+          ))}
+        </Timeline>
+      </Drawer>
+    </>
+  )
+}
+
 export const CreateProject: React.FC<{
   onReload: () => void
 }> = ({ onReload }) => {

packages/admin/src/services/notice.ts

+import { request } from 'umi'
+
+export async function getCmsNotices(startTime: number) {
+  return request(`https://tcli.service.tcloudbase.com/cms-notice?startTime=${startTime}`, {
+    prefix: '',
+  })
+}

packages/admin/typings/typings.d.ts

@@ -33,8 +33,13 @@ interface Window {
     history: 'hash' | 'browser'
     envId: string
     cloudAccessPath: string
+    // 禁用帮助按钮
+    disableHelpButton: boolean
+    // 禁用通知提示
+    disableNotice: boolean
   }
   tinymce: any
+  // 禁用帮助按钮
 }
 
 declare let ga: Function