forked from tangly1024/NotionNext
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' of https://github.com/tangly1024/NotionNext
- Loading branch information
Showing
9 changed files
with
166 additions
and
38 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import { useState } from 'react' | ||
|
|
||
| const useNotification = () => { | ||
| const [message, setMessage] = useState('') | ||
| const [isVisible, setIsVisible] = useState(false) | ||
|
|
||
| const showNotification = msg => { | ||
| setMessage(msg) | ||
| setIsVisible(true) | ||
| setTimeout(() => { | ||
| setIsVisible(false) | ||
| }, 3000) | ||
| } | ||
|
|
||
| const closeNotification = () => { | ||
| setIsVisible(false) | ||
| } | ||
|
|
||
| // 测试通知效果 | ||
| // const toggleVisible = () => { | ||
| // setIsVisible(prev => !prev) // 使用函数式更新 | ||
| // } | ||
| // useEffect(() => { | ||
| // document?.addEventListener('click', toggleVisible) | ||
| // return () => { | ||
| // document?.removeEventListener('click', toggleVisible) | ||
| // } | ||
| // }, []) | ||
|
|
||
| /** | ||
| * 通知组件 | ||
| * @returns | ||
| */ | ||
| const Notification = () => { | ||
| return ( | ||
| <div | ||
| className={`notification fixed left-0 w-full px-2 z-50 transform transition-all duration-300 ${ | ||
| isVisible ? 'bottom-20 animate__animated animate__fadeIn' : '' | ||
| } `}> | ||
| <div className='max-w-3xl mx-auto bg-green-500 flex items-center justify-between px-4 py-2 text-white rounded-lg shadow-lg'> | ||
| {message} | ||
| <button | ||
| onClick={closeNotification} | ||
| className='ml-4 p-2 cursor-pointer bg-transparent text-white border-none'> | ||
| <i className='fas fa-times' /> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| return { | ||
| showNotification, | ||
| closeNotification, | ||
| Notification | ||
| } | ||
| } | ||
|
|
||
| export default useNotification |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import { isBrowser } from './utils' | ||
|
|
||
| /** | ||
| * 获取默认密码 | ||
| * 用户可以通过url中拼接参数，输入密码 | ||
| * 输入过一次的密码会被存储在浏览器中，便于下一次免密访问 | ||
| * 返回的是一组历史密码，便于客户端多次尝试 | ||
| */ | ||
| export const getPasswordQuery = path => { | ||
| // 使用 URL 对象解析 URL | ||
| const url = new URL(path, isBrowser ? window.location.origin : '') | ||
|
|
||
| // 获取查询参数 | ||
| const queryParams = Object.fromEntries(url.searchParams.entries()) | ||
|
|
||
| // 请求中带着密码 | ||
| if (queryParams.password) { | ||
| // 将已输入密码作为默认密码存放在 localStorage，便于下次读取并自动尝试 | ||
| localStorage.setItem('password_default', queryParams.password) | ||
| } | ||
|
|
||
| // 获取路径部分 | ||
| const cleanedPath = url.pathname | ||
|
|
||
| // 从 localStorage 中获取相关密码 | ||
| const storedPassword = localStorage.getItem('password_' + cleanedPath) | ||
| const defaultPassword = localStorage.getItem('password_default') | ||
|
|
||
| // 将所有密码存储在一个数组中，并过滤掉无效值 | ||
| const passwords = [ | ||
| queryParams.password, | ||
| storedPassword, | ||
| defaultPassword | ||
| ].filter(Boolean) | ||
|
|
||
| return passwords | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters