theme-game 列表效果微调; + LazyImage; +阴影+hover动效*Ad遮罩+边距+历史记录移除

themes/game/components/GameListRecent.js

@@ -1,7 +1,7 @@
 /* eslint-disable @next/next/no-img-element */
 import { siteConfig } from '@/lib/config'
 import { checkContainHttp, deepClone, sliceUrlFromHttp } from '@/lib/utils'
-import Link from 'next/link'
+import { useRouter } from 'next/router'
 import { useState } from 'react'
 import { useGameGlobal } from '..'
 
@@ -32,7 +32,7 @@ export const GameListRecent = ({ maxCount = 14 }) => {
 
   return (
     <>
-      <div className='game-list-recent-wrapper w-full max-w-full overflow-x-auto pt-4 px-2'>
+      <div className='game-list-recent-wrapper w-full max-w-full overflow-x-auto pt-4 px-2 md:px-0'>
         <div className='game-grid md:flex grid grid-flow-col gap-2'>
           {components?.map((ItemComponent, index) => {
             return ItemComponent
@@ -49,17 +49,43 @@ export const GameListRecent = ({ maxCount = 14 }) => {
  * @returns
  */
 const GameItem = ({ item }) => {
+  const router = useRouter()
+  const { recentGames, setRecentGames } = useGameGlobal()
   const { title } = item || {}
   const [showType, setShowType] = useState('img') // img or video
   const url = checkContainHttp(item.slug)
     ? sliceUrlFromHttp(item.slug)
     : `${siteConfig('SUB_PATH', '')}/${item.slug}`
 
+  const [isClockVisible, setClockVisible] = useState(true)
+  const toggleIcons = () => {
+    setClockVisible(!isClockVisible)
+  }
+  /**
+   * 移除最近
+   */
+  const removeRecent = () => {
+    const updatedRecentGames = deepClone(recentGames) // 创建一个 recentGames 的副本
+    const indexToRemove = updatedRecentGames.findIndex(
+      game => game?.title === item.title
+    ) // 找到要移除的项的索引
+    if (indexToRemove !== -1) {
+      updatedRecentGames.splice(indexToRemove, 1) // 使用 splice 方法删除项
+      setRecentGames(updatedRecentGames) // 更新 recentGames 状态
+      localStorage.setItem('recent_games', JSON.stringify(updatedRecentGames))
+    }
+  }
+
+  const handleButtonClick = () => {
+    router.push(url) // 如果是 Next.js
+  }
+
   const img = item?.pageCoverThumbnail
   const video = item?.ext?.video
+
   return (
-    <Link
-      href={`${url}`}
+    <div
+      onClick={handleButtonClick}
       onMouseOver={() => {
         setShowType('video')
       }}
@@ -67,11 +93,23 @@ const GameItem = ({ item }) => {
         setShowType('img')
       }}
       title={title}
-      className={`card-single h-28 w-28 relative shadow rounded-md overflow-hidden flex justify-center items-center 
-                group   hover:border-purple-400`}>
-      <div className='absolute right-0.5 top-1 z-20'>
-        <i className='fas fa-clock-rotate-left w-6 h-6 flex items-center justify-center shadow rounded-full bg-white text-blue-500 text-sm' />
-      </div>
+      className={`cursor-pointer card-single h-28 w-28 relative shadow rounded-md overflow-hidden flex justify-center items-center 
+                group hover:border-purple-400`}>
+      <button
+        className='absolute right-0.5 top-1 z-20'
+        onClick={e => {
+          e.stopPropagation() // 阻止事件冒泡，防止触发父级元素的点击事件
+          removeRecent()
+        }}
+        onMouseEnter={toggleIcons}
+        onMouseLeave={toggleIcons}>
+        {isClockVisible ? (
+          <i className='fas fa-clock-rotate-left w-6 h-6 flex items-center justify-center shadow rounded-full bg-white text-blue-500 text-sm'></i>
+        ) : (
+          <i className='fas fa-trash-can w-6 h-6 flex items-center justify-center shadow rounded-full bg-white text-red-500 text-sm'></i>
+        )}
+      </button>
+
       <div className='absolute text-sm bottom-2 transition-all duration-200 text-white z-30'>
         {title}
       </div>
@@ -93,6 +131,6 @@ const GameItem = ({ item }) => {
         src={img}
         alt={title}
       />
-    </Link>
+    </div>
   )
 }