File size: 4,774 Bytes
1b72d7e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 |
import { useEffect, useState } from 'react'
import Select from './Select'
import { useGlobal } from '@/lib/global'
import { THEMES } from '@/themes/theme'
import { useRouter } from 'next/router'
import { siteConfigMap } from '@/lib/config'
import { getQueryParam } from '@/lib/utils'
/**
*
* @returns 调试面板
*/
const DebugPanel = () => {
const [show, setShow] = useState(false)
const { theme, switchTheme, locale } = useGlobal()
const router = useRouter()
const currentTheme = getQueryParam(router.asPath, 'theme') || theme
const [siteConfig, updateSiteConfig] = useState({})
// 主题下拉框
const themeOptions = THEMES?.map(t => ({ value: t, text: t }))
useEffect(() => {
updateSiteConfig(Object.assign({}, siteConfigMap()))
}, [])
function toggleShow() {
setShow(!show)
}
function handleChangeDebugTheme() {
switchTheme()
}
function handleUpdateDebugTheme(newTheme) {
const query = { ...router.query, theme: newTheme }
router.push({ pathname: router.pathname, query })
}
function filterResult(text) {
switch (text) {
case 'true':
return <span className='text-green-500'>true</span>
case 'false':
return <span className='text-red-500'>false</span>
case '':
return '-'
}
return text
}
return (
<>
{/* 调试按钮 */}
<div>
<div
style={{ writingMode: 'vertical-lr' }}
className={`bg-black text-xs text-white shadow-2xl p-1.5 rounded-l-xl cursor-pointer ${show ? 'right-96' : 'right-0'} fixed bottom-72 duration-200 z-50`}
onClick={toggleShow}
>
{show
? <i className="fas fa-times"> {locale.COMMON.DEBUG_CLOSE}</i>
: <i className="fas fa-tools"> {locale.COMMON.DEBUG_OPEN}</i>}
</div>
</div>
{/* 调试侧拉抽屉 */}
<div
className={` ${show ? 'shadow-card w-96 right-0 ' : '-right-96 invisible w-0'} overflow-y-scroll h-full p-5 bg-white fixed bottom-0 z-50 duration-200`}
>
<div className="flex justify-between space-x-1 my-5">
<div className='flex'>
<Select
label={locale.COMMON.THEME_SWITCH}
value={currentTheme}
options={themeOptions}
onChange={handleUpdateDebugTheme}
/>
<div className="p-2 cursor-pointer" onClick={handleChangeDebugTheme}>
<i className="fas fa-sync" />
</div>
</div>
<div className='p-2'>
<i className='fas fa-times' onClick={toggleShow}/>
</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>
</>
)
}
export default DebugPanel
|