|
1 | 1 | import { useGlobal } from '@/lib/global' |
2 | | -import { useState } from 'react' |
3 | | -import { Draggable } from './Draggable' |
| 2 | +import LANGS from '@/lib/lang' |
| 3 | +import { getQueryParam } from '@/lib/utils' |
4 | 4 | import { THEMES } from '@/themes/theme' |
5 | 5 | import { useRouter } from 'next/router' |
| 6 | +import { useState } from 'react' |
6 | 7 | import DarkModeButton from './DarkModeButton' |
7 | | -import { getQueryParam } from '@/lib/utils' |
8 | | -import LANGS from '@/lib/lang' |
| 8 | +import { Draggable } from './Draggable' |
9 | 9 | /** |
10 | 10 | * |
11 | 11 | * @returns 主题切换 |
12 | 12 | */ |
13 | 13 | const ThemeSwitch = () => { |
14 | | - const { theme, lang, changeLang, locale, isDarkMode, toggleDarkMode } = useGlobal() |
| 14 | + const { theme, lang, changeLang, locale, isDarkMode, toggleDarkMode } = |
| 15 | + useGlobal() |
15 | 16 | const router = useRouter() |
16 | 17 | const currentTheme = getQueryParam(router.asPath, 'theme') || theme |
17 | 18 | // const currentLang = getQueryParam(router.asPath, 'lang') || lang |
18 | 19 | const [isLoading, setIsLoading] = useState(false) |
19 | 20 |
|
20 | 21 | // 修改当前路径url中的 theme 参数 |
21 | 22 | // 例如 http://localhost?theme=hexo 跳转到 http://localhost?theme=newTheme |
22 | | - const onThemeSelectChange = (e) => { |
23 | | - document.ontouchmove = document.ontouchend = document.onmousemove = document.onmouseup = null |
| 23 | + const onThemeSelectChange = e => { |
| 24 | + document.ontouchmove = |
| 25 | + document.ontouchend = |
| 26 | + document.onmousemove = |
| 27 | + document.onmouseup = |
| 28 | + null |
24 | 29 | setIsLoading(true) |
25 | 30 | const newTheme = e.target.value |
26 | 31 | const query = router.query |
27 | 32 | query.theme = newTheme |
28 | 33 | router.push({ pathname: router.pathname, query }).then(() => { |
29 | 34 | setTimeout(() => { |
30 | 35 | setIsLoading(false) |
31 | | - }, 500); |
| 36 | + }, 500) |
32 | 37 | }) |
33 | 38 | } |
34 | 39 |
|
35 | | - const onLangSelectChange = (e) => { |
36 | | - document.ontouchmove = document.ontouchend = document.onmousemove = document.onmouseup = null |
| 40 | + const onLangSelectChange = e => { |
| 41 | + document.ontouchmove = |
| 42 | + document.ontouchend = |
| 43 | + document.onmousemove = |
| 44 | + document.onmouseup = |
| 45 | + null |
37 | 46 | const newLang = e.target.value |
38 | 47 | changeLang(newLang) |
39 | 48 | } |
40 | 49 |
|
41 | | - return (<> |
42 | | - <Draggable> |
43 | | - <div id="draggableBox" style={{ left: '0px', top: '80vh' }} className="fixed group space-y-2 overflow-hidden z-50 p-3 flex flex-col items-start dark:text-white bg-white dark:bg-black rounded-xl shadow-lg "> |
44 | | - {/* 深色按钮 */} |
45 | | - <div className="text-sm flex items-center w-0 group-hover:w-32 transition-all duration-200"> |
46 | | - <DarkModeButton /> |
47 | | - <div onClick={toggleDarkMode} className='cursor-pointer w-0 group-hover:w-24 transition-all duration-200 overflow-hidden whitespace-nowrap pl-1 h-auto'>{isDarkMode ? locale.MENU.DARK_MODE : locale.MENU.LIGHT_MODE}</div> |
48 | | - </div> |
| 50 | + return ( |
| 51 | + <> |
| 52 | + <Draggable> |
| 53 | + <div |
| 54 | + id='draggableBox' |
| 55 | + style={{ left: '0px', top: '80vh' }} |
| 56 | + className='fixed group flex flex-col items-start space-y-2 overflow-hidden z-50 p-3 |
| 57 | + dark:text-white bg-white dark:bg-black |
| 58 | + rounded-xl shadow-lg hover:scale-105 hover:shadow-2xl '> |
| 59 | + {/* 主题切换按钮 */} |
| 60 | + <div className='text-sm flex items-center group-hover:w-32 duration-200'> |
| 61 | + <i className='fa-solid fa-palette w-5' /> |
| 62 | + <div className='w-0 group-hover:w-24 duration-200 overflow-hidden'> |
| 63 | + <label htmlFor='themeSelect' className='sr-only'> |
| 64 | + {locale.COMMON.THEME} |
| 65 | + </label> |
| 66 | + <select |
| 67 | + id='themeSelect' |
| 68 | + value={currentTheme} |
| 69 | + onChange={onThemeSelectChange} |
| 70 | + name='themes' |
| 71 | + className='pl-1 bg-gray-50 dark:bg-black appearance-none outline-none dark:text-white uppercase cursor-pointer'> |
| 72 | + {THEMES?.map(t => { |
| 73 | + return ( |
| 74 | + <option key={t} value={t}> |
| 75 | + {t} |
| 76 | + </option> |
| 77 | + ) |
| 78 | + })} |
| 79 | + </select> |
| 80 | + </div> |
| 81 | + </div> |
49 | 82 |
|
50 | | - {/* 翻译按钮 */} |
51 | | - <div className="text-sm flex items-center group-hover:w-32 transition-all duration-200"> |
52 | | - <i className="fa-solid fa-language w-5" /> |
53 | | - <div className='w-0 group-hover:w-24 transition-all duration-200 overflow-hidden'> |
54 | | - <label htmlFor="langSelect" className="sr-only">选择语言：</label> |
55 | | - <select id="langSelect" value={lang} onChange={onLangSelectChange} name="themes" className='pl-1 bg-gray-50 dark:bg-black appearance-none outline-none dark:text-white uppercase cursor-pointer'> |
56 | | - {Object.keys(LANGS)?.map(t => { |
57 | | - return <option key={t} value={t}>{LANGS[t].LOCALE}</option> |
58 | | - })} |
59 | | - </select> |
60 | | - </div> |
61 | | - </div> |
| 83 | + {/* 深色按钮 */} |
| 84 | + <div className='text-sm flex items-center w-0 group-hover:w-32 duration-200'> |
| 85 | + <DarkModeButton /> |
| 86 | + <div |
| 87 | + onClick={toggleDarkMode} |
| 88 | + className='cursor-pointer w-0 group-hover:w-24 duration-200 overflow-hidden whitespace-nowrap pl-1 h-auto'> |
| 89 | + {isDarkMode ? locale.MENU.DARK_MODE : locale.MENU.LIGHT_MODE} |
| 90 | + </div> |
| 91 | + </div> |
62 | 92 |
|
63 | | - {/* 主题切换按钮 */} |
64 | | - <div className="text-sm flex items-center group-hover:w-32 transition-all duration-200"> |
65 | | - <i className="fa-solid fa-palette w-5" /> |
66 | | - <div className='w-0 group-hover:w-24 transition-all duration-200 overflow-hidden'> |
67 | | - <label htmlFor="themeSelect" className="sr-only">选择主题：</label> |
68 | | - <select id="themeSelect" value={currentTheme} onChange={onThemeSelectChange} name="themes" className='pl-1 bg-gray-50 dark:bg-black appearance-none outline-none dark:text-white uppercase cursor-pointer'> |
69 | | - {THEMES?.map(t => { |
70 | | - return <option key={t} value={t}>{t}</option> |
71 | | - })} |
72 | | - </select> |
73 | | - </div> |
74 | | - </div> |
| 93 | + {/* 翻译按钮 */} |
| 94 | + <div className='text-sm flex items-center group-hover:w-32 duration-200'> |
| 95 | + <i className='fa-solid fa-language w-5' /> |
| 96 | + <div className='w-0 group-hover:w-24 duration-200 overflow-hidden'> |
| 97 | + <label htmlFor='langSelect' className='sr-only'> |
| 98 | + Language Select |
| 99 | + </label> |
| 100 | + <select |
| 101 | + id='langSelect' |
| 102 | + value={lang} |
| 103 | + onChange={onLangSelectChange} |
| 104 | + name='themes' |
| 105 | + className='pl-1 bg-gray-50 dark:bg-black appearance-none outline-none dark:text-white uppercase cursor-pointer'> |
| 106 | + {Object.keys(LANGS)?.map(t => { |
| 107 | + return ( |
| 108 | + <option key={t} value={t}> |
| 109 | + {LANGS[t].LOCALE} |
| 110 | + </option> |
| 111 | + ) |
| 112 | + })} |
| 113 | + </select> |
75 | 114 | </div> |
76 | | - </Draggable> |
| 115 | + </div> |
| 116 | + </div> |
| 117 | + </Draggable> |
77 | 118 |
|
78 | | - {/* 切换主题加载时的全屏遮罩 */} |
79 | | - <div className={`${isLoading ? 'opacity-90 ' : 'opacity-0'} |
| 119 | + {/* 切换主题加载时的全屏遮罩 */} |
| 120 | + <div |
| 121 | + className={`${isLoading ? 'opacity-90 ' : 'opacity-0'} |
80 | 122 | w-screen h-screen glassmorphism bg-black text-white shadow-text flex justify-center items-center |
81 | | - transition-all fixed top-0 left-0 pointer-events-none duration-1000 z-50 shadow-inner`}> |
82 | | - <i className='text-3xl mr-5 fas fa-spinner animate-spin' /> |
83 | | - </div> |
| 123 | + fixed top-0 left-0 pointer-events-none duration-1000 z-50 shadow-inner`}> |
| 124 | + <i className='text-3xl mr-5 fas fa-spinner animate-spin' /> |
| 125 | + </div> |
84 | 126 | </> |
85 | 127 | ) |
86 | 128 | } |
|
0 commit comments