主题调试面板

components/DebugPanel.js

@@ -1,6 +1,6 @@
 import BLOG from '@/blog.config'
 import * as ThemeMap from '@/themes'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import Select from './Select'
 import { ALL_THEME } from '@/themes'
 import { useGlobal } from '@/lib/global'
@@ -8,20 +8,40 @@ import { useGlobal } from '@/lib/global'
  *
  * @returns 调试面板
  */
-export function DebugPanel () {
+export function DebugPanel() {
   const [show, setShow] = useState(false)
-  const { theme, changeTheme, switchTheme } = useGlobal()
+  const { theme, changeTheme, switchTheme, locale } = useGlobal()
+  const [siteConfig, updateSiteConfig] = useState({})
+  const [themeConfig, updateThemeConfig] = useState({})
+  const [debugTheme, updateDebugTheme] = useState(BLOG.THEME)
 
-  const themeOptions = []
-  ALL_THEME.forEach(t => {
-    themeOptions.push({ value: t, text: t })
-  })
+  // 主题下拉框
+  const themeOptions = ALL_THEME.map(t => ({ value: t, text: t }))
 
-  function toggleShow () {
+  useEffect(() => {
+    changeTheme(BLOG.THEME)
+    updateSiteConfig(Object.assign({}, BLOG))
+    updateThemeConfig(Object.assign({}, ThemeMap[BLOG.THEME].THEME_CONFIG))
+  }, [])
+
+  function toggleShow() {
     setShow(!show)
   }
 
-  function filterResult (text) {
+  function handleChangeDebugTheme() {
+    switchTheme()
+    updateThemeConfig(Object.assign({}, ThemeMap[theme].THEME_CONFIG))
+    updateDebugTheme(theme)
+    console.log('更换主题', debugTheme)
+  }
+
+  function handleUpdateDebugTheme(e) {
+    changeTheme(e)
+    updateThemeConfig(Object.assign({}, ThemeMap[theme].THEME_CONFIG))
+    updateDebugTheme(e)
+  }
+
+  function filterResult(text) {
     switch (text) {
       case 'true':
         return <span className='text-green-500'>true</span>
@@ -34,77 +54,72 @@ export function DebugPanel () {
   }
 
   return (
-    <>
-      {/* 调试按钮 */}
-      <div>
-        <div
-          style={{ writingMode: 'vertical-lr' }}
-          className={`bg-black text-white shadow-2xl p-2.5 rounded-l-xl cursor-pointer ${show ? 'right-96' : 'right-0'} fixed bottom-36 duration-200 z-50`}
-          onClick={toggleShow}
-        >
-          {show
-            ? (
-            <i className="fas fa-times">&nbsp;关闭调试</i>
-              )
-            : (
-            <i className="fas fa-tools">&nbsp;调试主题</i>
-              )}
-        </div>
-      </div>
-
-      {/* 调试侧拉抽屉 */}
-      <div
-        className={` ${
-          show ? 'shadow-card' : '-right-96'
-        } w-96 overflow-y-scroll h-full p-5 bg-white fixed right-0 bottom-0 z-50 duration-200`}
-      >
-        <div className="flex space-x-1 my-12">
-          <Select
-            label="主题切换"
-            value={theme}
-            options={themeOptions}
-            onChange={changeTheme}
-          />
-          <div className="p-2 cursor-pointer" onClick={switchTheme}>
-            <i className="fas fa-sync" />
-          </div>
-        </div>
-
-        <div>
-          <div className="font-bold w-18 border-b my-2">
-            站点配置[blog.config.js]
-          </div>
-          <div className="text-xs">
-            {Object.keys(BLOG).map(k => (
-              <div key={k} className="justify-between flex py-1">
-                <span className="bg-blue-400 p-0.5 rounded text-white mr-2">
-                  {k}
-                </span>
-                <span className="whitespace-nowrap">
-                  {filterResult(BLOG[k] + '')}
-                </span>
-              </div>
-            ))}
-          </div>
-        </div>
-        <div>
-          <div className="font-bold w-18 border-b my-2">
-            主题配置{'(config_' + theme + '.js)'}:
-          </div>
-          <div className="text-xs">
-            {Object.keys(ThemeMap[theme].THEME_CONFIG).map(k => (
-                <div key={k} className="justify-between flex py-1">
-                  <span className="bg-indigo-500 p-0.5 rounded text-white mr-2">
-                    {k}
-                  </span>
-                  <span className="whitespace-nowrap">
-                    {filterResult(ThemeMap[theme].THEME_CONFIG[k] + '')}
-                  </span>
+        <>
+            {/* 调试按钮 */}
+            <div>
+                <div
+                    style={{ writingMode: 'vertical-lr' }}
+                    className={`bg-black text-white shadow-2xl p-2.5 rounded-l-xl cursor-pointer ${show ? 'right-96' : 'right-0'} fixed bottom-56 duration-200 z-50`}
+                    onClick={toggleShow}
+                >
+                    {show
+                      ? <i className="fas fa-times">&nbsp;{locale.COMMON.DEBUG_CLOSE}</i>
+                      : <i className="fas fa-tools">&nbsp;{locale.COMMON.DEBUG_OPEN}</i>}
                 </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </>
+            </div>
+
+            {/* 调试侧拉抽屉 */}
+            <div
+                className={` ${show ? 'shadow-card' : '-right-96'} w-96 overflow-y-scroll h-full p-5 bg-white fixed right-0 bottom-0 z-50 duration-200`}
+            >
+                <div className="flex space-x-1 my-12">
+                    <Select
+                        label={locale.COMMON.THEME_SWITCH}
+                        value={debugTheme}
+                        options={themeOptions}
+                        onChange={handleUpdateDebugTheme}
+                    />
+                    <div className="p-2 cursor-pointer" onClick={handleChangeDebugTheme}>
+                        <i className="fas fa-sync" />
+                    </div>
+                </div>
+
+                <div>
+                    <div>
+                        <div className="font-bold w-18 border-b my-2">
+                            主题配置{`config_${debugTheme}.js`}:
+                        </div>
+                        <div className="text-xs">
+                            {Object.keys(themeConfig).map(k => (
+                                <div key={k} className="justify-between flex py-1">
+                                    <span className="bg-indigo-500 p-0.5 rounded text-white mr-2">
+                                        {k}
+                                    </span>
+                                    <span className="whitespace-nowrap">
+                                        {filterResult(themeConfig[k] + '')}
+                                    </span>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                    <div className="font-bold w-18 border-b my-2">
+                        站点配置[blog.config.js]
+                    </div>
+                    <div className="text-xs">
+                        {siteConfig && Object.keys(siteConfig).map(k => (
+                            <div key={k} className="justify-between flex py-1">
+                                <span className="bg-blue-500 p-0.5 rounded text-white mr-2">
+                                    {k}
+                                </span>
+                                <span className="whitespace-nowrap">
+                                    {filterResult(siteConfig[k] + '')}
+                                </span>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+
+            </div>
+        </>
   )
 }