Merge remote-tracking branch 'origin/master'

src/compontets/common/LoaderWhite.jsx

@@ -1,13 +1,13 @@
 import styles from './LoaderWhite.module.css'
 
 /** 自定义 加载动画 白色圈圈*/
-export default () => {
+export default ({loadName = '正在玩命加载中...'}) => {
   return (
     <div className={styles.loader}>
       <div className={styles.item1}/>
       <div className={styles.item2}/>
       <div className={styles.item3}/>
-      <div className={styles.text}>正在玩命加载中...</div>
+      <div className={styles.text}>{loadName}</div>
     </div>
   )
 }

src/pages/Blog/index.jsx

@@ -34,7 +34,8 @@ const {Content, Sider} = Layout
  * */
 const Blog = () => {
   const [content, setContent] = useState('# 欢迎来到仰晨博客');
-  const [loading, setLoading] = useState(false)   // 加载状态
+  const [loading, setLoading] = useState(false)     // 加载状态
+  const [initLoad, setInitLoad] = useState(true)    // 初始加载菜单状态
   const [menu, setMenu] = useState(items(blogMenu))                  // 菜单项
   const [selectKey, setSelectKey] = useState([])     // 菜单选中项【子，父】
 
@@ -44,14 +45,15 @@ const Blog = () => {
 
   /** 页面加载菜单 (和读取URL的菜单) */
   useEffect(() => {
-    (()=> init())()
+    init()
   }, [])
 
   /** 初始化页面加载菜单 (和读取URL的菜单) */
   const init = async () => {
     const blogIconObj = await getBlogItemIconObj(); // 请求获取图标
     const blogList = await getBlogList();           // 请求获取最新菜单
     setMenu(items(blogList, blogIconObj))           // 生成菜单并设置到state
+    setInitLoad(false)
 
     // ——————————————————————🟡处理带URL进来的情况🟡————————————————————————
     const params = window.location.href.split('?')?.[1];
@@ -81,8 +83,8 @@ const Blog = () => {
     }).finally(() => setLoading(false))
 
   }
-
-
+  
+  
   return (
     <Layout style={{maxHeight: 'calc(100vh - 64px)'}}>
       {/*------- 页面左侧 -------*/}
@@ -92,14 +94,17 @@ const Blog = () => {
              style={{overflow: 'auto'}}
              collapsible
       >
-        <Menu
-          selectedKeys={[selectKey[0]]}   // 当前选中的菜单项 key 数组
-          openKeys={[selectKey[1]]}       // 当前展开的 SubMenu 菜单项 key 数组
-          mode="inline"
-          items={menu}
-          onClick={handleMenuClick}       // 点击菜单子项
-          onOpenChange={v => setSelectKey(l => v.length > 0 ? [l[0], v[1]] : [l[0], null])}  // 点击展开菜单
-        />
+        {initLoad ?
+          <LoaderWhite loadName="获取菜单中..."/>
+          :
+          <Menu
+            selectedKeys={[selectKey[0]]}   // 当前选中的菜单项 key 数组
+            openKeys={[selectKey[1]]}       // 当前展开的 SubMenu 菜单项 key 数组
+            mode="inline"
+            items={menu}
+            onClick={handleMenuClick}       // 点击菜单子项
+            onOpenChange={v => setSelectKey(l => v.length > 0 ? [l[0], v[1]] : [l[0], null])}  // 点击展开菜单
+          />}
       </Sider>
 
       {/*------ 页面右侧 -------*/}

src/pages/Mobile/Blog.jsx

@@ -1,32 +1,41 @@
-import React, {useEffect, useRef, useState} from "react";
-import {Collapse, DotLoading, Toast} from 'antd-mobile'
+import React, {useEffect, useState} from "react";
+import {Collapse, DotLoading} from 'antd-mobile'
 
 import Md from "../../compontets/Md";
 import {blogMenu} from "../../store/NoLoginData";
 import {blogBaseURL, getBlogItemIconObj, getBlogList, getBlogMd} from "../../request/blogRequest";
+import LoaderWhite from "../../compontets/common/LoaderWhite";
 
+let menu = blogMenu;  // 菜单项
+let icon = {}                            // 图标
+let initLoad = true                 // 初始加载菜单状态
+let sxIndex = 0                     // 刷新页面状态变量
 export default () => {
-  const [menu, setMenu] = useState(blogMenu)  // 菜单项
-  const [icon, setIcon] = useState({})                 // 图标
-
-  const loading = useRef()          // 显示加载中
-
+  const [, setSxYm] = useState(0)   // 刷新页面状态
+  const sxYm = () => setSxYm(++sxIndex)
+
+
   /** 初始化获取最新菜单和图标 */
   useEffect(() => {
-    loading.current = Toast.show({icon: 'loading', content: '数据加载中...', duration: 0})
-    getBlogItemIconObj().then(obj => {
-      setIcon(obj)
-      loading.current?.close()    // 关闭加载蒙版
-      getBlogList().then(data => setMenu(data))
-    }).catch(() => Toast.show({icon: 'fail', content: '数据加载失败'}))
+    init()
   }, [])
-
+
+  const init = async () => {
+    try {
+      icon = await getBlogItemIconObj();
+      menu = await getBlogList();
+    } finally {
+      sxYm(initLoad = false)
+    }
+  }
+
   /** 构建菜单 */
   const buildMenu = blogMenu =>
     <Collapse accordion>
       {
         blogMenu.map(itemList =>
-          <Collapse.Panel key={itemList[0]} title={<> <img src={`${blogBaseURL}/icon/${icon[itemList[0]]}`} alt="图标"/> {itemList[0]}</>}>
+          <Collapse.Panel key={itemList[0]} title={<> <img src={`${blogBaseURL}/icon/${icon[itemList[0]]}`}
+                                                           alt="图标"/> {itemList[0]}</>}>
             <Collapse accordion>
               {itemList.slice(1).map(item =>
                 <Collapse.Panel key={item} title={item}>
@@ -38,23 +47,23 @@ export default () => {
         )
       }
     </Collapse>
-
-  return buildMenu(menu)
+  
+  return initLoad ? <LoaderWhite loadName="获取菜单中..."/> : buildMenu(menu)
 }
 
 /** 异步内容组件 */
 const DynamicContent = ({keyPath}) => {
   const [finished, setFinished] = useState(false)
   const [content, setContent] = useState('# 欢迎来到仰晨博客');
-
+  
   useEffect(() => {
     getBlogMd(keyPath).then(data => {
       setContent(data)
     }).catch(() => {
       setContent(`请求失败，请检查网络连接`)
     }).finally(() => setFinished(true))
   }, [])
-
+  
   return finished ?
     <div style={{width: '94vw', wordBreak: 'break-all'}}>
       <Md>{content}</Md>