From 9dd1cb6eebf85c272b8518eb9503e763aa853203 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Thu, 3 Mar 2022 21:28:16 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E8=AF=95=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/DebugButton.js | 50 +++++++++++++++++++++++++++++++++++++++
 pages/_app.js             |  2 ++
 2 files changed, 52 insertions(+)
 create mode 100644 components/DebugButton.js

diff --git a/components/DebugButton.js b/components/DebugButton.js
new file mode 100644
index 00000000..064d1991
--- /dev/null
+++ b/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>
+  </>
+}
diff --git a/pages/_app.js b/pages/_app.js
index e5b63150..0f0948ed 100644
--- a/pages/_app.js
+++ b/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/>}