右键菜单多语言

components/CustomContextMenu.js

@@ -12,7 +12,7 @@ import { saveDarkModeToCookies, THEMES } from '@/themes/theme'
 export default function CustomContextMenu(props) {
   const [position, setPosition] = useState({ x: '0px', y: '0px' })
   const [show, setShow] = useState(false)
-  const { isDarkMode, updateDarkMode } = useGlobal()
+  const { isDarkMode, updateDarkMode, locale } = useGlobal()
   const menuRef = useRef(null)
 
   const { latestPosts } = props
@@ -97,7 +97,7 @@ export default function CustomContextMenu(props) {
         <div
             ref={menuRef}
             style={{ top: position.y, left: position.x }}
-            className={`${show ? '' : 'invisible opacity-0'} transition-opacity duration-200 fixed z-50`}
+            className={`${show ? '' : 'invisible opacity-0'} select-none transition-opacity duration-200 fixed z-50`}
         >
 
             {/* 菜单内容 */}
@@ -115,19 +115,19 @@ export default function CustomContextMenu(props) {
                 {/* 跳转导航按钮 */}
                 <div className='w-full px-2'>
 
-                    <div onClick={handleJumpToRandomPost} title={'随机前往一篇文章'} className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
+                    <div onClick={handleJumpToRandomPost} title={locale.MENU.WALK_AROUND} className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
                         <i className="fa-solid fa-podcast mr-2" />
-                        <div className='whitespace-nowrap'> 随便逛逛</div>
+                        <div className='whitespace-nowrap'>{locale.MENU.WALK_AROUND}</div>
                     </div>
 
-                    <Link href='/category' title={'博客分类'} className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
+                    <Link href='/category' title={locale.MENU.CATEGORY} className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
                         <i className="fa-solid fa-square-minus mr-2" />
-                        <div className='whitespace-nowrap'> 博客分类</div>
+                        <div className='whitespace-nowrap'>{locale.MENU.CATEGORY}</div>
                     </Link>
 
-                    <Link href='/tag' title={'文章标签'} className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
+                    <Link href='/tag' title={locale.MENU.TAGS} className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
                         <i className="fa-solid fa-tag mr-2" />
-                        <div className='whitespace-nowrap'> 文章标签</div>
+                        <div className='whitespace-nowrap'>{locale.MENU.TAGS}</div>
                     </Link>
 
                 </div>
@@ -137,18 +137,18 @@ export default function CustomContextMenu(props) {
                 {/* 功能按钮 */}
                 <div className='w-full px-2'>
 
-                    <div onClick={handleCopyLink} title={'复制地址'} className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
+                    <div onClick={handleCopyLink} title={locale.MENU.COPY_URL} className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
                         <i className="fa-solid fa-arrow-up-right-from-square mr-2" />
-                        <div className='whitespace-nowrap'> 复制地址</div>
+                        <div className='whitespace-nowrap'>{locale.MENU.COPY_URL}</div>
                     </div>
 
-                    <div onClick={handleChangeDarkMode} title={'深色模式'} className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
+                    <div onClick={handleChangeDarkMode} title={isDarkMode ? locale.MENU.LIGHT_MODE : locale.MENU.DARK_MODE} className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
                         {isDarkMode ? <i className="fa-regular fa-sun mr-2" /> : <i className="fa-regular fa-moon mr-2" />}
-                        <div className='whitespace-nowrap'> {isDarkMode ? '浅色模式' : '深色模式'}</div>
+                        <div className='whitespace-nowrap'> {isDarkMode ? locale.MENU.LIGHT_MODE : locale.MENU.DARK_MODE}</div>
                     </div>
-                    <div onClick={handeChangeTheme} title={'切换主题'} className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
+                    <div onClick={handeChangeTheme} title={locale.MENU.THEME_SWITCH} className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
                         <i className="fa-solid fa-palette mr-2" />
-                        <div className='whitespace-nowrap'> 切换主题</div>
+                        <div className='whitespace-nowrap'>{locale.MENU.THEME_SWITCH}</div>
                     </div>
                 </div>
 

lib/lang/en-US.js

@@ -1,5 +1,14 @@
 export default {
   LOCALE: 'en-US',
+  MENU: {
+    WALK_AROUND: 'Walk Around',
+    CATEGORY: 'Category',
+    TAGS: 'Tags',
+    COPY_URL: 'Copy URL',
+    DARK_MODE: 'Dark Mode',
+    LIGHT_MODE: 'Light Mode',
+    THEME_SWITCH: 'Theme Switch'
+  },
   NAV: {
     INDEX: 'Home',
     RSS: 'RSS',

lib/lang/zh-CN.js

@@ -1,5 +1,14 @@
 export default {
   LOCALE: 'zh-CN',
+  MENU: {
+    WALK_AROUND: '随便逛逛',
+    CATEGORY: '博客分类',
+    TAGS: '博客标签',
+    COPY_URL: '复制地址',
+    DARK_MODE: '深色模式',
+    LIGHT_MODE: '浅色模式',
+    THEME_SWITCH: '主题切换'
+  },
   NAV: {
     INDEX: '首页',
     RSS: '订阅',

themes/heo/components/Catalog.js

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
 import { useGlobal } from '@/lib/global'
@@ -12,7 +12,7 @@ import { useGlobal } from '@/lib/global'
 const Catalog = ({ toc }) => {
   const { locale } = useGlobal()
   // 监听滚动事件
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('scroll', actionSectionScrollSpy)
     actionSectionScrollSpy()
     return () => {
@@ -25,10 +25,10 @@ const Catalog = ({ toc }) => {
   const tocIds = []
 
   // 同步选中目录事件
-  const [activeSection, setActiveSection] = React.useState(null)
+  const [activeSection, setActiveSection] = useState(null)
 
   const throttleMs = 200
-  const actionSectionScrollSpy = React.useCallback(throttle(() => {
+  const actionSectionScrollSpy = useCallback(throttle(() => {
     const sections = document.getElementsByClassName('notion-h')
     let prevBBox = null
     let currentSectionId = activeSection