拖拽按钮鼠标样式微调

blog.config.js

@@ -154,7 +154,7 @@ const BLOG = {
   WIDGET_PET_LINK:
       process.env.NEXT_PUBLIC_WIDGET_PET_LINK ||
       'https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json', // 挂件模型地址 @see https://github.com/xiazeyu/live2d-widget-models
-  WIDGET_PET_SWITCH_THEME: true, // 点击宠物挂件切换博客主题
+  WIDGET_PET_SWITCH_THEME: process.env.NEXT_PUBLIC_WIDGET_PET_SWITCH_THEME || true, // 点击宠物挂件切换博客主题
 
   // 音乐播放插件
   MUSIC_PLAYER: process.env.NEXT_PUBLIC_MUSIC_PLAYER || false, // 是否使用音乐播放插件

components/Draggable.js

@@ -1,4 +1,4 @@
-import { useRef, useEffect } from 'react'
+import { useRef, useEffect, useState } from 'react'
 /**
  * 可拖拽组件
  */
@@ -7,6 +7,7 @@ export const Draggable = (props) => {
   const { children } = props
   const draggableRef = useRef(null)
   const rafRef = useRef(null)
+  const [moving, setMoving] = useState(false)
   let currentObj, offsetX, offsetY
 
   useEffect(() => {
@@ -54,6 +55,8 @@ export const Draggable = (props) => {
           event.preventDefault() // 阻止默认的滚动行为
           document.documentElement.style.overflow = 'hidden' // 防止页面一起滚动
         }
+
+        setMoving(true)
         offsetX = event.mx - currentObj.offsetLeft
         offsetY = event.my - currentObj.offsetTop
 
@@ -73,6 +76,7 @@ export const Draggable = (props) => {
       event = e(event)
       document.documentElement.style.overflow = 'auto' // 恢复默认的滚动行为
       cancelAnimationFrame(rafRef.current)
+      setMoving(false)
       currentObj = document.ontouchmove = document.ontouchend = document.onmousemove = document.onmouseup = null
     }
 
@@ -138,7 +142,7 @@ export const Draggable = (props) => {
     }
   }, [])
 
-  return <div className='draggable cursor-move select-none' ref={draggableRef}>
+  return <div className={`draggable ${moving ? 'cursor-grabbing' : 'cursor-grab'} select-none`} ref={draggableRef}>
      {children}
   </div>
 }

components/Live2D.js

@@ -26,7 +26,7 @@ export default function Live2D() {
   }, [theme])
 
   function handleClick() {
-    if (BLOG.WIDGET_PET_SWITCH_THEME) {
+    if (JSON.parse(BLOG.WIDGET_PET_SWITCH_THEME)) {
       switchTheme()
     }
   }
@@ -35,5 +35,9 @@ export default function Live2D() {
     return <></>
   }
 
-  return <canvas id="live2d" className='cursor-pointer' width="280" height="250" onClick={handleClick} alt='切换主题' title='切换主题' />
+  return <canvas id="live2d" width="280" height="250" onClick={handleClick}
+        className="cursor-grab"
+        onMouseDown={(e) => e.target.classList.add('cursor-grabbing')}
+        onMouseUp={(e) => e.target.classList.remove('cursor-grabbing')}
+    />
 }

components/ThemeSwitch.js

@@ -23,14 +23,13 @@ const ThemeSwitch = () => {
   return (<>
         <Draggable>
             <div id="draggableBox" style={{ left: '10px', top: '85vh' }} className="fixed text-white bg-black z-50 rounded-lg shadow-card">
-                <div className="py-2 flex items-center text-sm">
-                    <i className='fas fa-arrows cursor-move px-2' />
-                    {/* <div className='uppercase font-sans whitespace-nowrap cursor-pointer ' onClick={switchTheme}> {theme}</div> */}
+                <div className="py-2 flex items-center text-sm px-2">
                     <select value={theme} onChange={onSelectChange} name="cars" className='text-white bg-black uppercase cursor-pointer'>
                         {ALL_THEME.map(t => {
                           return <option key={t} value={t}>{t}</option>
                         })}
                     </select>
+                    <i className='fas fa-palette pl-1' />
                 </div>
             </div>
         </Draggable>