Merge branch 'main' into fix/invisible-tag

Author: tangly1024

components/CursorDot.js

@@ -0,0 +1,107 @@
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+/**
+ * 白点鼠标跟随
+ * @returns 
+ */
+const CursorDot = () => {
+    const router = useRouter();
+    useEffect(() => {
+        // 创建小白点元素
+        const dot = document.createElement('div');
+        dot.classList.add('cursor-dot');
+        document.body.appendChild(dot);
+
+        // 鼠标坐标和缓动目标坐标
+        let mouse = { x: -100, y: -100 }; // 初始位置在屏幕外
+        let dotPos = { x: mouse.x, y: mouse.y };
+
+        // 监听鼠标移动
+        const handleMouseMove = (e) => {
+            mouse.x = e.clientX;
+            mouse.y = e.clientY;
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+
+        // 监听鼠标悬停在可点击对象上的事件
+        const handleMouseEnter = () => {
+            dot.classList.add('cursor-dot-hover'); // 添加放大样式
+        };
+        const handleMouseLeave = () => {
+            dot.classList.remove('cursor-dot-hover'); // 移除放大样式
+        };
+
+
+        // 为所有可点击元素和包含 hover 或 group-hover 类名的元素添加事件监听
+        setTimeout(() => {
+            const clickableElements = document.querySelectorAll(
+                'a, button, [role="button"], [onclick], [cursor="pointer"], [class*="hover"], [class*="group-hover"], [class*="cursor-pointer"]'
+            );
+            clickableElements.forEach((el) => {
+                el.addEventListener('mouseenter', handleMouseEnter);
+                el.addEventListener('mouseleave', handleMouseLeave);
+            });
+        }, 200); // 延时 200ms 执行
+
+        // 动画循环：延迟更新小白点位置
+        const updateDotPosition = () => {
+            const damping = 0.2; // 阻尼系数，值越小延迟越明显
+            dotPos.x += (mouse.x - dotPos.x) * damping;
+            dotPos.y += (mouse.y - dotPos.y) * damping;
+
+            // 更新DOM
+            dot.style.left = `${dotPos.x}px`;
+            dot.style.top = `${dotPos.y}px`;
+
+            requestAnimationFrame(updateDotPosition);
+        };
+
+        // 启动动画
+        updateDotPosition();
+
+        // 清理函数
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            const clickableElements = document.querySelectorAll(
+                'a, button, [role="button"], [onclick], [cursor="pointer"], [class*="hover"], [class*="group-hover"], [class*="cursor-pointer"]'
+            );
+            clickableElements.forEach((el) => {
+                el.removeEventListener('mouseenter', handleMouseEnter);
+                el.removeEventListener('mouseleave', handleMouseLeave);
+            });
+            document.body.removeChild(dot);
+        };
+    }, [router]);
+
+    return (
+        <style jsx global>{`
+            .cursor-dot {
+                position: fixed;
+                width: 12px;
+                height: 12px;
+                background: white;
+                border-radius: 50%;
+                pointer-events: none;
+                transform: translate(-50%, -50%);
+                z-index: 9999;
+                transition: transform 100ms ease-out, width 200ms ease, height 200ms ease; /* 添加尺寸平滑过渡 */
+                mix-blend-mode: difference; /* 可选：增强对比度 */
+            }
+
+            .cursor-dot-hover {
+                border: 1px solid rgba(167, 167, 167, 0.14); /* 鼠标悬停时的深灰色边框，厚度为1px */
+                width: 60px; /* 放大 */
+                height: 60px; /* 放大 */
+                background: hsla(0, 0%, 100%, 0.04); /* 半透明背景 */
+                -webkit-backdrop-filter: blur(5px); /* 毛玻璃效果 */
+                backdrop-filter: blur(5px);
+            }
+
+            .dark .cursor-dot-hover {
+                border: 1px solid rgba(66, 66, 66, 0.66); /* 鼠标悬停时的深灰色边框，厚度为1px */
+            }
+        `}</style>
+    );
+};
+
+export default CursorDot;

components/ExternalPlugins.js

@@ -10,8 +10,10 @@ import { initGoogleAdsense } from './GoogleAdsense'
 import Head from 'next/head'
 import ExternalScript from './ExternalScript'
 import WebWhiz from './Webwhiz'
+import { useGlobal } from '@/lib/global'
 import IconFont from './IconFont'
 
+
 /**
  * 各种插件脚本
  * @param {*} props
@@ -20,6 +22,7 @@ import IconFont from './IconFont'
 const ExternalPlugin = props => {
   // 读取自Notion的配置
   const { NOTION_CONFIG } = props
+  const {lang} = useGlobal()
   const DISABLE_PLUGIN = siteConfig('DISABLE_PLUGIN', null, NOTION_CONFIG)
   const THEME_SWITCH = siteConfig('THEME_SWITCH', null, NOTION_CONFIG)
   const DEBUG = siteConfig('DEBUG', null, NOTION_CONFIG)
@@ -168,8 +171,8 @@ const ExternalPlugin = props => {
     }
 
     setTimeout(() => {
-      // 将notion-id格式的url转成自定义slug
-      convertInnerUrl(props?.allNavPages)
+      // 映射url
+      convertInnerUrl({ allPages:props?.allNavPages, lang:lang })
     }, 500)
   }, [router])
 

components/IconFont.js

@@ -10,30 +10,34 @@ export default function IconFont() {
     const router = useRouter()
 
     useEffect(() => {
-        loadExternalResource('/webfonts/iconfont.js').then(u => {
-            console.log('iconfont loaded')
+        loadExternalResource('/webfonts/iconfont.js')
+            .then(u => {
+                console.log('iconfont loaded:', u);
 
-            // 查找所有 <i> 标签且 class 包含 'icon-'
-            const iElements = document.querySelectorAll('i[class*="icon-"]');
-            iElements.forEach(element => {
-                const className = Array.from(element.classList).find(cls => cls.startsWith('icon-'));
-                if (className) {
-                    // 创建新的 <svg> 元素
-                    const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-                    svgElement.setAttribute('class', 'icon');
-                    svgElement.setAttribute('aria-hidden', 'true');
+                // 查找所有 <i> 标签且 class 包含 'icon-'
+                const iElements = document.querySelectorAll('i[class*="icon-"]');
+                iElements.forEach(element => {
+                    const className = Array.from(element.classList).find(cls => cls.startsWith('icon-'));
+                    if (className) {
+                        // 创建新的 <svg> 元素
+                        const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+                        svgElement.setAttribute('class', 'icon');
+                        svgElement.setAttribute('aria-hidden', 'true');
 
-                    const useElement = document.createElementNS('http://www.w3.org/2000/svg', 'use');
-                    useElement.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', `#${className}`);
-                    svgElement.appendChild(useElement);
+                        const useElement = document.createElementNS('http://www.w3.org/2000/svg', 'use');
+                        useElement.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', `#${className}`);
+                        svgElement.appendChild(useElement);
 
-                    // 替换原来的 <i> 元素
-                    element.replaceWith(svgElement);
-                    console.log(`Replaced <i> with class "${className}" to <svg>`);
-                }
+                        // 替换原来的 <i> 元素
+                        element.replaceWith(svgElement);
+                        // console.log(`Replaced <i> with class "${className}" to <svg>`);
+                    }
+                });
+            })
+            .catch(error => {
+                console.warn('Failed to load iconfont.js:', error);
             });
-        })
-    }, [router])
+    }, [router]);
 
     return <style jsx global>
         {`
@@ -43,12 +47,10 @@ export default function IconFont() {
             vertical-align: -0.15em;
             fill: currentColor;
             overflow: hidden;
-            
         }
 
         svg.icon {
             display: inline;
         }
-        
         `}</style>
 }

components/LazyImage.js

@@ -129,20 +129,6 @@ export default function LazyImage({
           <link rel='preload' as='image' href={adjustImgSize(src, maxWidth)} />
         </Head>
       )}
-      <style>
-        {` 
-        .lazy-image-placeholder{
-            background: 
-                linear-gradient(90deg,#0001 33%,#0005 50%,#0001 66%)
-                #f2f2f2;
-            background-size:300% 100%;
-            animation: l1 1s infinite linear;
-            }
-            @keyframes l1 {
-            0% {background-position: right}
-        }
-        `}
-      </style>
     </>
   )
 }

components/Lenis.js

@@ -0,0 +1,69 @@
+import { useEffect, useRef } from 'react'
+import { loadExternalResource } from '@/lib/utils'
+
+/**
+ * 滚动阻尼特效
+ * 目前只用在proxio主题
+ * @returns
+ */
+const Lenis = () => {
+  const lenisRef = useRef(null) // 用于存储 Lenis 实例
+
+  useEffect(() => {
+    // 异步加载
+    async function loadLenis() {
+      loadExternalResource('/js/lenis.js', 'js').then(() => {
+        // console.log('Lenis', window.Lenis)
+        if (!window.Lenis) {
+          console.error('Lenis not loaded')
+          return
+        }
+        const Lenis = window.Lenis
+
+        // 创建 Lenis 实例
+        const lenis = new Lenis({
+          duration: 1.2,
+          easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // https://www.desmos.com/calculator/brs54l4xou
+          direction: 'vertical', // vertical, horizontal
+          gestureDirection: 'vertical', // vertical, horizontal, both
+          smooth: true,
+          mouseMultiplier: 1,
+          smoothTouch: false,
+          touchMultiplier: 2,
+          infinite: false,
+        })
+
+        // 存储实例到 ref
+        lenisRef.current = lenis
+
+        // 监听滚动事件
+        // lenis.on('scroll', ({ scroll, limit, velocity, direction, progress }) => {
+        //   // console.log({ scroll, limit, velocity, direction, progress })
+        // })
+
+        // 动画帧循环
+        function raf(time) {
+          lenis.raf(time)
+          requestAnimationFrame(raf)
+        }
+
+        requestAnimationFrame(raf)
+      })
+    }
+
+    loadLenis()
+
+    return () => {
+      // 在组件卸载时清理资源
+      if (lenisRef.current) {
+        lenisRef.current.destroy() // 销毁 Lenis 实例
+        lenisRef.current = null
+        // console.log('Lenis instance destroyed')
+      }
+    }
+  }, [])
+
+  return <></>
+}
+
+export default Lenis

lib/cache/cache_manager.js

@@ -40,7 +40,7 @@ export async function getOrSetDataWithCustomCache(
 ) {
   const dataFromCache = await getDataFromCache(key)
   if (dataFromCache) {
-    console.log('[缓存-->>API]:', key)
+    // console.log('[缓存-->>API]:', key) // 避免过多的缓存日志输出
     return dataFromCache
   }
   const data = await getDataFunction(...getDataArgs)

lib/global.js

@@ -8,12 +8,7 @@ import {
 import { useUser } from '@clerk/nextjs'
 import { useRouter } from 'next/router'
 import { createContext, useContext, useEffect, useState } from 'react'
-import {
-  generateLocaleDict,
-  initLocale,
-  redirectUserLang,
-  saveLangToLocalStorage
-} from './lang'
+import { generateLocaleDict, initLocale, redirectUserLang } from './lang'
 
 /**
  * 全局上下文
@@ -81,7 +76,6 @@ export function GlobalContextProvider(props) {
 
   function changeLang(lang) {
     if (lang) {
-      saveLangToLocalStorage(lang)
       updateLang(lang)
       updateLocale(generateLocaleDict(lang))
     }

lib/lang.js

@@ -8,6 +8,7 @@ import zhCN from './lang/zh-CN'
 import zhHK from './lang/zh-HK'
 import zhTW from './lang/zh-TW'
 import { extractLangPrefix } from './utils/pageId'
+import { useRouter } from 'next/router'
 
 /**
  * 在这里配置所有支持的语言
@@ -70,15 +71,9 @@ export function generateLocaleDict(langString) {
  */
 export function initLocale(locale, changeLang, updateLocale) {
   if (isBrowser) {
-    // 根据router中的locale对象判断当前语言：表现为前缀中包含 zh、en 等。
-    let pathLocaleLang = null
-    if (locale === 'en' || locale === 'zh') {
-      pathLocaleLang = locale === 'en' ? 'en-US' : 'zh-CN'
-    }
     // 如果有query参数切换语言则优先
     const queryLang =
-      getQueryVariable('locale') || getQueryVariable('lang') || pathLocaleLang
-
+      getQueryVariable('locale') || getQueryVariable('lang') || locale
     if (queryLang) {
       const match = queryLang.match(/[a-zA-Z]{2}(?:-[a-zA-Z]{2})?/)
       if (match) {
@@ -91,22 +86,6 @@ export function initLocale(locale, changeLang, updateLocale) {
   }
 }
 
-/**
- * 读取语言
- * @returns {*}
- */
-export const loadLangFromLocalStorage = () => {
-  return localStorage.getItem('lang')
-}
-
-/**
- * 保存语言
- * @param newTheme
- */
-export const saveLangToLocalStorage = lang => {
-  localStorage.setItem('lang', lang)
-}
-
 /**
  *  检测用户的预研偏好，跳转至对应的多语言网站
  * @param {*} lang
@@ -142,4 +121,4 @@ export const redirectUserLang = (lang, pageId) => {
       }
     }
   }
-}
+}