Gitbook 主题微调

components/ThemeSwitch.js

@@ -1,17 +1,18 @@
 import { useGlobal } from '@/lib/global'
-import { useState } from 'react'
-import { Draggable } from './Draggable'
+import LANGS from '@/lib/lang'
+import { getQueryParam } from '@/lib/utils'
 import { THEMES } from '@/themes/theme'
 import { useRouter } from 'next/router'
+import { useState } from 'react'
 import DarkModeButton from './DarkModeButton'
-import { getQueryParam } from '@/lib/utils'
-import LANGS from '@/lib/lang'
+import { Draggable } from './Draggable'
 /**
  *
  * @returns 主题切换
  */
 const ThemeSwitch = () => {
-  const { theme, lang, changeLang, locale, isDarkMode, toggleDarkMode } = useGlobal()
+  const { theme, lang, changeLang, locale, isDarkMode, toggleDarkMode } =
+    useGlobal()
   const router = useRouter()
   const currentTheme = getQueryParam(router.asPath, 'theme') || theme
   //   const currentLang = getQueryParam(router.asPath, 'lang') || lang
@@ -19,8 +20,12 @@ const ThemeSwitch = () => {
 
   // 修改当前路径url中的 theme 参数
   // 例如 http://localhost?theme=hexo 跳转到 http://localhost?theme=newTheme
-  const onThemeSelectChange = (e) => {
-    document.ontouchmove = document.ontouchend = document.onmousemove = document.onmouseup = null
+  const onThemeSelectChange = e => {
+    document.ontouchmove =
+      document.ontouchend =
+      document.onmousemove =
+      document.onmouseup =
+        null
     setIsLoading(true)
     const newTheme = e.target.value
     const query = router.query
@@ -28,59 +33,94 @@ const ThemeSwitch = () => {
     router.push({ pathname: router.pathname, query }).then(() => {
       setTimeout(() => {
         setIsLoading(false)
-      }, 500);
+      }, 500)
     })
   }
 
-  const onLangSelectChange = (e) => {
-    document.ontouchmove = document.ontouchend = document.onmousemove = document.onmouseup = null
+  const onLangSelectChange = e => {
+    document.ontouchmove =
+      document.ontouchend =
+      document.onmousemove =
+      document.onmouseup =
+        null
     const newLang = e.target.value
     changeLang(newLang)
   }
 
-  return (<>
-        <Draggable>
-            <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 ">
-                {/* 深色按钮 */}
-                <div className="text-sm flex items-center w-0 group-hover:w-32 transition-all duration-200">
-                    <DarkModeButton />
-                    <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>
-                </div>
-
-                {/* 翻译按钮 */}
-                <div className="text-sm flex items-center group-hover:w-32 transition-all duration-200">
-                    <i className="fa-solid fa-language w-5" />
-                    <div className='w-0 group-hover:w-24 transition-all duration-200 overflow-hidden'>
-                        <label htmlFor="langSelect" className="sr-only">选择语言：</label>
-                        <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'>
-                            {Object.keys(LANGS)?.map(t => {
-                              return <option key={t} value={t}>{LANGS[t].LOCALE}</option>
-                            })}
-                        </select>
-                    </div>
-                </div>
-
-                {/* 主题切换按钮 */}
-                <div className="text-sm flex items-center group-hover:w-32 transition-all duration-200">
-                    <i className="fa-solid fa-palette w-5" />
-                    <div className='w-0 group-hover:w-24 transition-all duration-200 overflow-hidden'>
-                        <label htmlFor="themeSelect" className="sr-only">选择主题：</label>
-                        <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'>
-                            {THEMES?.map(t => {
-                              return <option key={t} value={t}>{t}</option>
-                            })}
-                        </select>
-                    </div>
-                </div>
+  return (
+    <>
+      <Draggable>
+        <div
+          id='draggableBox'
+          style={{ left: '0px', top: '80vh' }}
+          className='fixed group hover:scale-105 transition-all 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 '>
+          {/* 主题切换按钮 */}
+          <div className='text-sm flex items-center group-hover:w-32 transition-all duration-200'>
+            <i className='fa-solid fa-palette w-5' />
+            <div className='w-0 group-hover:w-24 transition-all duration-200 overflow-hidden'>
+              <label htmlFor='themeSelect' className='sr-only'>
+                {locale.COMMON.THEME}
+              </label>
+              <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'>
+                {THEMES?.map(t => {
+                  return (
+                    <option key={t} value={t}>
+                      {t}
+                    </option>
+                  )
+                })}
+              </select>
             </div>
-        </Draggable>
+          </div>
 
-        {/* 切换主题加载时的全屏遮罩 */}
-        <div className={`${isLoading ? 'opacity-90 ' : 'opacity-0'} 
+          {/* 深色按钮 */}
+          <div className='text-sm flex items-center w-0 group-hover:w-32 transition-all duration-200'>
+            <DarkModeButton />
+            <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>
+          </div>
+
+          {/* 翻译按钮 */}
+          <div className='text-sm flex items-center group-hover:w-32 transition-all duration-200'>
+            <i className='fa-solid fa-language w-5' />
+            <div className='w-0 group-hover:w-24 transition-all duration-200 overflow-hidden'>
+              <label htmlFor='langSelect' className='sr-only'>
+                选择语言：
+              </label>
+              <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'>
+                {Object.keys(LANGS)?.map(t => {
+                  return (
+                    <option key={t} value={t}>
+                      {LANGS[t].LOCALE}
+                    </option>
+                  )
+                })}
+              </select>
+            </div>
+          </div>
+        </div>
+      </Draggable>
+
+      {/* 切换主题加载时的全屏遮罩 */}
+      <div
+        className={`${isLoading ? 'opacity-90 ' : 'opacity-0'} 
             w-screen h-screen glassmorphism bg-black text-white shadow-text flex justify-center items-center
             transition-all fixed top-0 left-0 pointer-events-none duration-1000 z-50 shadow-inner`}>
-            <i className='text-3xl mr-5 fas fa-spinner animate-spin' />
-        </div>
+        <i className='text-3xl mr-5 fas fa-spinner animate-spin' />
+      </div>
     </>
   )
 }