xyyd-fatfox/src/layout/grid/WelcomePage.tsx

import { computed, defineComponent, onMounted, ref, Transition } from 'vue'
import WelcomeImg from '~/icons/welcome/welcomeTitle.png'
import DivBgImg from '~/icons/welcome/back.png'
import startUseImg from '~/icons/welcome/startUse.png'
import useLayoutStore from '../useLayoutStore'
import request from '@/utils/request'
import useStatisticStore from '@/utils/useStatisticStore'
export const DefaultPageSetting = [
  {
    name: '游戏',
    backgroundUrl:
      'https://newfatfox.oss-cn-beijing.aliyuncs.com/000/user_upload/1/resource/831a4d4c-61ff-4bae-ad31-9c0f4fa2db1c.webp',
    contentUrl:
      'https://newfatfox.oss-cn-beijing.aliyuncs.com/000/user_upload/1/resource/b2f3ed2f-f550-499b-8ea1-dfd192cfd388.webp',
    desct: '聚合多类游戏工具，以及 资讯、排行榜等'
  },
  {
    name: '工作台',
    backgroundUrl:
      'https://newfatfox.oss-cn-beijing.aliyuncs.com/000/user_upload/1/resource/b82fd47c-24c1-4f58-b0db-51414b3bdda4.webp',
    contentUrl:
      'https://newfatfox.oss-cn-beijing.aliyuncs.com/000/user_upload/1/resource/7e4cf74a-85cb-4e39-9e61-385b222ac8c4.webp',
    desct: '结合番茄计时法等效率工具，让您可以高效学'
  },
  {
    name: '轻娱',
    backgroundUrl:
      'https://newfatfox.oss-cn-beijing.aliyuncs.com/000/user_upload/1/resource/73164094-cb0d-4366-8d1a-afc84ac119cc.webp',
    contentUrl:
      'https://newfatfox.oss-cn-beijing.aliyuncs.com/000/user_upload/1/resource/bcbbffc6-c8a4-4c8e-8ba5-36fa1fbad4f9.webp',
    desct: '综合办公、学习、游戏等 属性，功能较为均勺'
  }
]
export default defineComponent(() => {
  const show = computed(() => true)
  const selectMode = ref(0)
  const layout = useLayoutStore()

  const isFirst = ref(false)
  onMounted(() => {
    // 检查 localStorage 是否已经有访问记录
    const visited = localStorage.getItem('hasVisited')

    if (!visited) {
      // 如果没有记录，说明是第一次访问
      isFirst.value = true
      useStatisticStore().send({
        widget: 'WELCOME',
        action: 'OPEN',
        space: 'TAB',
      })
    }
  })
  return () =>
    isFirst.value && (
      <div class="fixed left-0 top-0 z-50 w-full ">
        <Transition>
          {show.value && (
            <div
              class="w-full h-screen bg-black/60 "
              onClick={() => { }}
              style={{
                backgroundImage: `url('${DefaultPageSetting[selectMode.value].backgroundUrl}')`,
                backgroundSize: '100% 100%',
                backgroundPosition: 'center center',
                backgroundRepeat: 'no-repeat'
              }}
            >
              <div class="w-full h-screen bg-black/60 " onClick={() => { }}></div>
            </div>
          )}
        </Transition>
        <Transition name="modal">
          <div class="w-[1000px] items-center justify-center gap-y-2 flex flex-col z-30 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 ">
            <div
              class={'w-[812px] h-[46px] flex justify-center mb-[10px] '}
              style={{
                backgroundImage: `url('${WelcomeImg}')`,
                backgroundSize: '100% 100%',
                backgroundPosition: 'center center',
                backgroundRepeat: 'no-repeat'
              }}
            >
              <span class={'leading-[20px] -mt-2 text-[20px] text-white '}>请选择您的初始模式</span>
            </div>
            <div class={'w-full h-[370px] flex justify-center'}>
              <div class={'w-[868px] h-[370px] '}>
                <div class={'relative w-full h-full flex justify-center'}>
                  {DefaultPageSetting.map((item, idx) => (
                    <div
                      class={
                        ' w-[709px] h-[370px] cursor-pointer duration-150 absolute top-0 left-0 bg-[#2c2e3e] p-3 overflow-hidden rounded-2xl'
                      }
                      onClick={() => {
                        selectMode.value = idx

                      }}
                      style={{
                        transform: `translate(${idx === selectMode.value ? 80 : (((selectMode.value === 2 && idx === 0) || (selectMode.value + 1 === idx)) ? 219 : -52)}px) scale(${idx === selectMode.value ? 1 : 0.85
                          })`,
                        backgroundImage: `url('${DivBgImg}')`,
                        backgroundSize: '100% 100%',
                        zIndex: selectMode.value === idx ? 10 : 0
                      }}
                    >
                      <div
                        class={'w-full h-full rounded-2xl'}
                        style={{
                          backgroundImage: `url('${item.contentUrl}')`,
                          backgroundSize: '100% 100%',
                          backgroundPosition: 'center center',
                          backgroundRepeat: 'no-repeat'
                        }}
                      ></div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
            <div class={'flex flex-col items-center gap-y-1 text-white'}>
              <span>{DefaultPageSetting[selectMode.value].name}模式</span>
              <span class={'w-[180px]'}>{DefaultPageSetting[selectMode.value].desct}</span>
            </div>
            <div
              class={
                'w-[175px] h-[41px] mt-4 flex items-center justify-center text-[#333] cursor-pointer'
              }
              onClick={() => {
                localStorage.setItem('hasVisited', 'true')
                isFirst.value = false

                // 设置标记，后续访问不会再次显示
                // 获取默认界面
                request('GET', '/api/app/desktop').then((res: any) => {
                  if (!res) return
                  layout.state.dir = res.dir
                  layout.state.content = res.content

                })
                layout.state.current = selectMode.value as 0 | 1 | 2
                useStatisticStore().send({
                  widget: selectMode.value === 0 ? "WELCOME_GAME" : selectMode.value === 1 ? "WELCOME_WORK" : "WELCOME_RELAX",
                  action: 'CLICK',
                  space: 'TAB',
                })
              }}
              style={{
                backgroundImage: `url('${startUseImg}')`,
                backgroundSize: '100% 100%',
                backgroundPosition: 'center center',
                backgroundRepeat: 'no-repeat'
              }}
            >
              开始使用
            </div>
          </div>
        </Transition>
      </div>
    )
})