Merge branch 'master'

yc-2018 · Aug 20, 2024 · ea85137 · ea85137
2 parents faa894a + 31515de
commit ea85137
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 34 deletions.
diff --git a/src/compontets/common/LoaderWhite.jsx b/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>
   )
 }
diff --git a/src/pages/Blog/index.jsx b/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>
 
       {/*------ 页面右侧 -------*/}

diff --git a/src/pages/MemoDrawer/compontets/FormModal.jsx b/src/pages/MemoDrawer/compontets/FormModal.jsx
@@ -7,6 +7,11 @@ import modalStyle from './formModal.module.css'
 import CommonStore from "../../../store/CommonStore";
 
 const {TextArea} = Input;
+/** 外部图片链接列表 */
+const externalImgBedList = [
+  {src: 'https://playground.z.wiki/img-cloud/index.html', title: '外部图床1(可能失效,注意信息安全)'},
+  {src: 'https://ycimg.pages.dev/', title: '外部图床2(加载缓慢,最大支持5M)'},
+]
 /**
  * 新增/编辑备忘录弹窗
  *
@@ -125,7 +130,26 @@ const FormModal = ({isOpen, setOpen, data, reList, currentMemoType}) => {
       }
     }, 100)
   }
-
+
+  /** 打开外部图床弹窗 */
+  const openExternalImgModel = (title, src) =>
+    modal.info({
+      title,
+      style: {top: 20},
+      wrapClassName:modalStyle.externalImgModel,
+      width: '100vh',
+      okText: '关闭',
+      maskClosable: true,
+      content:
+        <iframe
+          src={src}
+          title={title}
+          allow="clipboard-read; clipboard-write"
+          style={{width: '100%', height: '100%'}}
+        />
+    })
+
+  /** 帮助按钮气泡 */
   const help =
     <div>
       <p>● 点击插入时间/段,可插入时间/段在输入框光标所在位置</p>
@@ -145,6 +169,12 @@ const FormModal = ({isOpen, setOpen, data, reList, currentMemoType}) => {
 
   /** 自定义底部按钮 */
   const footerButtons = [
+    ...externalImgBedList.map(({title, src}, index) =>
+      <Button
+        key={index}
+        onClick={() => openExternalImgModel(title, src)}>
+        外部图床{index + 1}
+      </Button>),
     <Popover key="help" content={help} title="帮助"><Button icon={<QuestionCircleTwoTone/>} shape="circle"/></Popover>,
     <Popover key="insertSymbol" content={signs} title="插入符号"><Button icon={<SmileTwoTone/>}
                                                                          shape="circle"/></Popover>,

diff --git a/src/pages/MemoDrawer/compontets/formModal.module.css b/src/pages/MemoDrawer/compontets/formModal.module.css
@@ -8,3 +8,6 @@
     background-color: #f5f5f5;              /*鼠标放上去背景变浅色*/
 }
 
+.externalImgModel [class="ant-modal-confirm-content"] {
+    height: 75vh;
+}
diff --git a/src/pages/Mobile/Blog.jsx b/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>