调试按钮

components/DebugButton.js

@@ -0,0 +1,50 @@
+import { useGlobal } from '@/lib/global'
+import { ThemeMap } from '@/themes'
+import { useState } from 'react'
+
+/**
+ *
+ * @returns 调试面板
+ */
+export function DebugButton () {
+  const [show, setShow] = useState(false)
+  const GlobalConfig = useGlobal()
+  const { theme, setTheme } = GlobalConfig
+  const allThemes = Object.keys(ThemeMap)
+  function toggleShow () {
+    setShow(!show)
+  }
+
+  /**
+   * 切换主题
+   */
+  function changeTheme () {
+    const currentIndex = allThemes.indexOf(theme)
+    const newIndex = currentIndex < allThemes.length - 1 ? currentIndex + 1 : 0
+    setTheme(allThemes[newIndex])
+  }
+
+  return <>
+  <div className={`w-full text-sm font-sans h-72 p-5 bg-white fixed right-0 bottom-0 z-40 shadow-card duration-200 ${show ? '' : '-bottom-72'}`}>
+    <div className='flex space-x-1'>
+        <div className='font-bold'>当前主题:</div>
+        <div>{theme}</div>
+    </div>
+    <div className='flex space-x-1'>
+        <div className='font-bold'>所有主题:</div>
+        <div>{allThemes.join(',')}</div>
+    </div>
+    <div className='flex space-x-1'>
+        <div className='bg-blue-500 text-white p-2 cursor-pointer' onClick={changeTheme}>更换主题</div>
+    </div>
+    <div>
+        <div className='font-bold w-18'>所有配置:</div>
+        <div><p>{JSON.stringify(GlobalConfig)}</p></div>
+    </div>
+  </div>
+
+  <div className="fixed right-14 bottom-12 z-50">
+        <div className="bg-blue-500 text-white p-3 rounded-xl cursor-pointer" onClick={toggleShow}>调试按钮</div>
+    </div>
+  </>
+}

pages/_app.js

@@ -14,6 +14,7 @@ import 'prismjs/themes/prism-okaidia.css'
 import 'katex/dist/katex.min.css'
 import dynamic from 'next/dynamic'
 import { GlobalContextProvider } from '@/lib/global'
+import { DebugButton } from '@/components/DebugButton'
 
 const Ackee = dynamic(() => import('@/components/Ackee'), { ssr: false })
 const Gtag = dynamic(() => import('@/components/Gtag'), { ssr: false })
@@ -23,6 +24,7 @@ const GoogleAdsense = dynamic(() => import('@/components/GoogleAdsense'), { ssr:
 const MyApp = ({ Component, pageProps }) => {
   return (
     <GlobalContextProvider>
+        {BLOG.DEBUG_BUTTON && <DebugButton/>}
         {BLOG.ANALYTICS_ACKEE_TRACKER && <Ackee />}
         {BLOG.ANALYTICS_GOOGLE_ID && <Gtag />}
         {JSON.parse(BLOG.ANALYTICS_BUSUANZI_ENABLE) && <Busuanzi/>}