游戏视频组件不支持大中小切换

src/layout/grid/BlockWrapper.tsx

@@ -42,6 +42,9 @@ export default defineComponent({
           transition: 'border .3s, transform .2s'
           // border: hover.value ? '2px solid rgba(255,255,255,.5)' : '2px solid rgba(255,255,255,0)'
         }}
+        onDblclick={e=> {
+          e.stopPropagation()
+        }}
         data-transportable={props.block.link && !props.block.link.startsWith('id:') ? '1' : ''}
         onDragover={(e) => {
           e.preventDefault()

src/layout/grid/index.tsx

@@ -51,7 +51,8 @@ export default defineComponent(() => {
           layout.isCompact = false
         }
       }}
-      onDblclick={() => {
+      onDblclick={(e) => {
+        e.stopPropagation()
         layout.state.simple = !layout.state.simple
       }}
       onDragover={(e) => e.preventDefault()}

src/widgets/gameVideo/Middle.tsx

@@ -0,0 +1,115 @@
+import useLayoutStore from '@/layout/useLayoutStore'
+import request from '@/utils/request'
+import { addIcons, OhVueIcon } from 'oh-vue-icons'
+import { computed, defineComponent, onMounted, ref, watch, type CSSProperties } from 'vue'
+import { FaChevronLeft } from 'oh-vue-icons/icons'
+import PlayImg from '~/icons/game_video_bg_play.png'
+import type { CarouselRef } from 'ant-design-vue/es/carousel'
+import { randomNum } from '@/utils/tool'
+import jump from '@/utils/jump'
+addIcons(FaChevronLeft)
+interface Owner {
+  face: string
+  mid: number
+  name: string
+}
+
+interface GameData {
+  _id: string
+  aid: number
+  ctime: number
+  duration: number
+  owner: Owner
+  pic: string
+  rid: string
+  time: string
+  title: string
+  type: string
+}
+export default defineComponent(() => {
+  const list = ref<GameData[]>([])
+  const currentIndex = ref(-1)
+
+  const current = computed(() => {
+    if (currentIndex.value === -1) {
+      return null
+    } else {
+      return list.value[currentIndex.value]
+    }
+  })
+  watch(
+    () => useLayoutStore().state.current,
+    (val) => {
+      const type = val === 0 ? 'game' : val === 1 ? 'know' : 'ent'
+      request<GameData[]>('GET', `/api/hotVideo?type=${type}`).then((res) => {
+        list.value = res
+        currentIndex.value = randomNum(0, res.length)
+      })
+    },
+    {
+      immediate: true
+    }
+  )
+  onMounted(() => {
+    setInterval(() => {
+      currentIndex.value = currentIndex.value === list.value.length - 1 ? 0 : currentIndex.value + 1
+    }, 7000)
+  })
+  return () => (
+    <div class="w-full h-full p-2  bg-[#17212d] relative  flex flex-col ">
+      <img
+        src={PlayImg}
+        class={
+          'absolute z-10 w-[40px] bg-[#ffffff24] rounded-lg backdrop-blur-sm left-1/2 top-10 -translate-x-1/2'
+        }
+      ></img>
+
+      {
+        <div
+          class={'w-full h-[92px] rounded-xl relative group'}
+          onClick={() => {
+            jump('https://www.bilibili.com/video/av' + current.value?.aid)
+          }}
+          style={{
+            backgroundImage: `url('${current.value?.pic}')`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+            backgroundRepeat: 'no-repeat'
+          }}
+        >
+          <div
+            class={
+              'absolute bottom-0 left-1/2 -translate-x-1/2 pb-2 w-[300px] flex flex-col text-white '
+            }
+          ></div>
+          <div
+            onClick={(e) => {
+              e.stopPropagation()
+
+              currentIndex.value =
+                currentIndex.value === 0 ? list.value.length - 1 : currentIndex.value - 1
+            }}
+            class="absolute hidden bottom-[20px] group-hover:flex items-center justify-center  left-[0px] w-[22px] h-[22px] bg-white/30 rounded"
+          >
+            <OhVueIcon name={FaChevronLeft.name} class={'text-white/80'}></OhVueIcon>
+          </div>
+          <div
+            onClick={(e) => {
+              e.stopPropagation()
+              currentIndex.value =
+                currentIndex.value === list.value.length - 1 ? 0 : currentIndex.value + 1
+            }}
+            class="absolute hidden bottom-[20px] group-hover:flex items-center justify-center  right-[0px] rotate-180 w-[22px] h-[22px] bg-white/30 rounded"
+          >
+            <OhVueIcon name={FaChevronLeft.name} class={'text-white/80'}></OhVueIcon>
+          </div>
+        </div>
+      }
+
+      <span class="text-[14px] mt-2 text-ellipsis overflow-hidden text-white line-clamp-2">
+        {current.value?.title}
+      </span>
+      <span class="text-[12px] opacity-60 text-white">{current.value?.owner.name}</span>
+    </div>
+  )
+})

src/widgets/gameVideo/Small.tsx

@@ -0,0 +1,42 @@
+import useLayoutStore from '@/layout/useLayoutStore'
+import jump from '@/utils/jump'
+import { defineComponent } from 'vue'
+
+export default defineComponent(() => {
+  const layout = useLayoutStore()
+  return () => (
+    <div
+      class="w-full h-full flex items-center px-3"
+      style={{
+        background: `rgb(23,33,46)`,
+        backgroundSize: 'cover'
+      }}
+      onClick={() => {
+        jump(
+          'https://www.bilibili.com/v' +
+            (layout.state.current === 0 ? '/game' : layout.state.current === 1 ? '/knowledge' : '/ent')
+        )
+      }}
+    >
+      <img class={'w-[58px] h-[58px]'} src={'/tab/icons/game_video.png'}></img>
+      <div class={'flex-1 flex justify-center'}>
+        <div class="flex-col flex">
+          <span class={'text-[16px] text-white'}>
+            {useLayoutStore().state.current === 0
+              ? '游戏'
+              : useLayoutStore().state.current === 1
+                ? '学习'
+                : '娱乐'}
+            视频
+          </span>
+          <div class={'flex items-center text-[#fffc] text-[12px] '}>
+            立即查看
+            <div>
+              <img src="/tab/icons/gt.png"></img>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+})

src/widgets/gameVideo/index.ts

@@ -13,6 +13,18 @@ export default {
       h: 2,
       label: '大',
       component: asyncLoader(() => import('./Large'))
+    },
+    {
+      w: 2,
+      h: 2,
+      label: '中',
+      component: asyncLoader(() => import('./Middle'))
+    },
+    {
+      w: 2,
+      h: 1,
+      label: '小',
+      component: asyncLoader(() => import('./Small'))
     }
   ]
 } as Widget