From acaf488759ea18f4b136895d57310bcb2b169cee Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Fri, 30 Jun 2023 17:22:53 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8B=96=E6=8B=BD=E6=8C=89=E9=92=AE=E9=BC=A0?=
 =?UTF-8?q?=E6=A0=87=E6=A0=B7=E5=BC=8F=E5=BE=AE=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 blog.config.js            | 2 +-
 components/Draggable.js   | 8 ++++++--
 components/Live2D.js      | 8 ++++++--
 components/ThemeSwitch.js | 5 ++---
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/blog.config.js b/blog.config.js
index 6e2ff263..9ee86fbd 100644
--- a/blog.config.js
+++ b/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, // 是否使用音乐播放插件
diff --git a/components/Draggable.js b/components/Draggable.js
index 397d584d..44d565b8 100644
--- a/components/Draggable.js
+++ b/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>
 }
diff --git a/components/Live2D.js b/components/Live2D.js
index 2fc6327f..6a2fc624 100644
--- a/components/Live2D.js
+++ b/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')}
+    />
 }
diff --git a/components/ThemeSwitch.js b/components/ThemeSwitch.js
index 8fba9304..c0e4b1c2 100644
--- a/components/ThemeSwitch.js
+++ b/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>