From 5fba670e8d11ab3be796d4d27d95d218352e9ec8 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Thu, 9 Feb 2023 11:38:35 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BB=E9=A2=98=E8=B0=83=E8=AF=95=E9=9D=A2?=
 =?UTF-8?q?=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/DebugPanel.js    | 175 +++++++++++++++++++-----------------
 lib/lang/en-US.js           |   5 +-
 lib/lang/zh-CN.js           |   5 +-
 themes/medium/LayoutSlug.js |   1 -
 4 files changed, 103 insertions(+), 83 deletions(-)

diff --git a/components/DebugPanel.js b/components/DebugPanel.js
index e2cf5748..bd8a9e17 100644
--- a/components/DebugPanel.js
+++ b/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>
+        </>
   )
 }
diff --git a/lib/lang/en-US.js b/lib/lang/en-US.js
index 464a79d7..b5438cde 100644
--- a/lib/lang/en-US.js
+++ b/lib/lang/en-US.js
@@ -35,7 +35,10 @@ export default {
     SUBMIT: 'Submit',
     POST_TIME: 'Post on',
     LAST_EDITED_TIME: 'Last edited',
-    RECENT_COMMENTS: 'Recent Comments'
+    RECENT_COMMENTS: 'Recent Comments',
+    DEBUG_OPEN: 'Debug',
+    DEBUG_CLOSE: 'Close',
+    THEME_SWITCH: 'Theme Switch'
   },
   PAGINATION: {
     PREV: 'Prev',
diff --git a/lib/lang/zh-CN.js b/lib/lang/zh-CN.js
index 43bb26c6..1ba84f91 100644
--- a/lib/lang/zh-CN.js
+++ b/lib/lang/zh-CN.js
@@ -37,7 +37,10 @@ export default {
     SUBMIT: '提交',
     POST_TIME: '发布于',
     LAST_EDITED_TIME: '最后更新',
-    RECENT_COMMENTS: '最新评论'
+    RECENT_COMMENTS: '最新评论',
+    DEBUG_OPEN: '开启调试',
+    DEBUG_CLOSE: '关闭调试',
+    THEME_SWITCH: '切换主题'
   },
   PAGINATION: {
     PREV: '上一页',
diff --git a/themes/medium/LayoutSlug.js b/themes/medium/LayoutSlug.js
index 6a416145..c3cc0423 100644
--- a/themes/medium/LayoutSlug.js
+++ b/themes/medium/LayoutSlug.js
@@ -3,7 +3,6 @@ import { useGlobal } from '@/lib/global'
 import React from 'react'
 import Catalog from './components/Catalog'
 import { ArticleLock } from './components/ArticleLock'
-import JumpToTopButton from './components/JumpToTopButton'
 import formatDate from '@/lib/formatDate'
 import BLOG from '@/blog.config'
 import Link from 'next/link'