feat: 添加公告

Author: alvin0216

README.md

@@ -1,3 +1,7 @@
+## 声明
+
+本项目已不再维护，项目已经升级到 ssr 版本，沿用并改进了 UI。新项目地址 [remix-ssr-blog](https://github.com/alvin0216/remix-ssr-blog)。欢迎继续关注！
+
 ## react hooks + koa + mysql
 
 > 一个及其简洁的个人博客系统、即插即用，如果你想使用这个博客、动动手改改配置即可使用！！

src/components/Public/index.jsx

@@ -10,12 +10,15 @@ import { getTagList, getCategoryList } from '@/redux/article/actions'
 // components
 import SignModal from '@/components/Public/SignModal'
 import UploadModal from '@/components/Public/UploadModal'
+import { Modal } from 'antd'
+import useModal from 'hooks/useModal'
 
 /**
  * @component Public 公共组件，挂在在 APP.jsx 中，用于存放初始化的组件/方法 或者公用的 modal 等
  */
 function PublicComponent(props) {
   const dispatch = useDispatch() // dispatch hooks
+  const { modalProps } = useModal()
 
   useMount(() => {
     dispatch(getTagList())
@@ -26,6 +29,13 @@ function PublicComponent(props) {
     <>
       <SignModal />
       <UploadModal />
+      <Modal {...modalProps} title='公告'>
+        <h4>本博客已不再维护！，该项目已升级为 ssr 版本，项目地址为{' '}
+          <a href='https://github.com/alvin0216/remix-ssr-blog/' target='_blank'>remix-ssr-blogs</a>，
+          访问地址 <a href='https://remix.alvin.run/' target='_blank'>remix.alvin.run</a>。
+          多谢关注与支持！
+        </h4>
+      </Modal>
     </>
   )
 }

src/hooks/useModal.js

@@ -0,0 +1,19 @@
+import { useCallback, useState } from 'react'
+
+export default function useModal() {
+  const [visible, setVisible] = useState(true)
+  const show = useCallback(() => setVisible(true), [visible])
+  const close = useCallback(() => setVisible(false), [visible])
+
+  const modalProps = {
+    visible,
+    onCancel: close
+  }
+
+  return {
+    visible,
+    show,
+    close,
+    modalProps
+  }
+}