完成游戏添加，接入第三方游戏列表

src/layout/adder/GameAdder.tsx

@@ -7,6 +7,11 @@ import useLayoutStore from '../useLayoutStore'
 import { AddToToken } from './AdderPage'
 import { v4 as uuid } from 'uuid'
 import { Button } from 'ant-design-vue'
+import { frontAddress, ossBase } from '@/config'
+import dayjs from 'dayjs'
+import { generateRandomString } from '@/utils/tool'
+import MD5 from 'crypto-js/md5'
+const SECRET = 'A1Cv12olxT12dOE3xA1vPA=='
 const URL_ADDRESS = 'http://newfatfox.oss-cn-beijing.aliyuncs.com'
 interface GameType {
   id: string
@@ -18,6 +23,18 @@ interface GameType {
   despt: string
   icon: string
 }
+interface OtherGame {
+  id: number // 游戏ID
+  category_ids: number[] // 分类ID数组
+  rank: number // 排名
+  name: string // 游戏名称
+  short_description: string // 简短描述
+  description: string // 详细描述
+  url: string // 游戏详情链接
+  icon: string // 图标URL
+  cover_url: string // 封面URL
+  corner_mark: number // 角标标识
+}
 export const GameItem = defineComponent({
   props: {
     content: {
@@ -31,7 +48,7 @@ export const GameItem = defineComponent({
     const addTo = inject(AddToToken)
     return () => (
       <div
-        class={clsx(' w-full h-full rounded-lg flex flex-col justify-between shadow p-4', {
+        class={clsx(' w-full h-full rounded-lg flex flex-col justify-between shadow p-4 relative', {
           'bg-white/20': isGame.value,
           'bg-white/80': !isGame.value
         })}
@@ -39,7 +56,12 @@ export const GameItem = defineComponent({
       >
         <div class="flex">
           <img
-            src={props.content.icon.replace('res/game', URL_ADDRESS)}
+            loading="lazy"
+            src={
+              props.content.icon.startsWith('http')
+                ? props.content.icon
+                : URL_ADDRESS + '/' + props.content.icon
+            }
             class="w-[58px] h-[58px] bg-cover rounded-lg shadow-lg"
             style={{
               background: props.content.icon
@@ -48,7 +70,7 @@ export const GameItem = defineComponent({
 
           <div class="px-2 w-0 flex-grow">
             <div
-              class={clsx('text text-sm', {
+              class={clsx('text text-sm text-ellipsis overflow-hidden whitespace-nowrap', {
                 'text-white': isGame.value,
                 'text-black/80': !isGame.value
               })}
@@ -78,14 +100,21 @@ export const GameItem = defineComponent({
               layout.addBlock(
                 {
                   id: uuid(),
-                  link: '',
+                  link: !props.content.rom.startsWith('http')
-                  name: props.content.name,
+                    ? `${frontAddress}/emu/#/home?params=${JSON.stringify({
+                        ...props.content,
+                        rom: ossBase + '/' + props.content.rom
+                      })}`
+                    : props.content.rom,
+                  name: '',
                   label: props.content.name,
-                  icon: '',
+                  icon: props.content.icon.startsWith('http')
+                    ? props.content.icon
+                    : URL_ADDRESS + '/' + props.content.icon,
                   text: '',
                   background: '',
                   color: '',
-                  w: 1,
+                  w: props.content.rom.startsWith('http') ? 1 : 2,
                   h: 1
                 },
                 addTo?.value
@@ -106,12 +135,20 @@ export default defineComponent(() => {
   const isGame = computed(() => layout.state.current === 0)
   const appList = ref<GameType[]>([])
   const selectType = ref('fc')
-
+  const fetchGame = async (page: number) => {
+    const parems = `nonce=${generateRandomString(8)}&pid=PIDc8uT24mpo&timestamp=${dayjs().unix()}`
+    const sign = MD5(parems + SECRET).toString()
+    const response = await fetch(
+      `https://ge.yiqiyoo.com/game/v2/third-part/games?${parems}&sign=${sign}&paginate.limit=99&paginate.page=${page}`
+    )
+    const res = await response.json()
+    return res.data.items
+  }
   watch(
     selectType,
     (val) => {
       loading.value = true
-
+      if (val !== 'yiqiyoo') {
         request<GameType[]>('GET', `/api/games?type=${val}`)
           .then((res) => {
             appList.value = res
@@ -121,6 +158,30 @@ export default defineComponent(() => {
               loading.value = false
             }, 200)
           })
+      } else {
+        try {
+          Promise.all([fetchGame(1), fetchGame(2), fetchGame(3)]).then((res) => {
+            console.log(res.flat())
+            const resData = res.flat() as OtherGame[]
+            appList.value = resData.map((el) => ({
+              id: el.id.toString(),
+              name: el.name,
+              despt: el.short_description,
+              icon: el.icon,
+              rom: el.url,
+              playstation: el.url,
+              hot: el.rank,
+              category: el.category_ids[0].toString()
+            }))
+          })
+        } catch (err) {
+          console.error(err)
+        } finally {
+          setTimeout(() => {
+            loading.value = false
+          }, 200)
+        }
+      }
     },
     {
       immediate: true
@@ -144,7 +205,13 @@ export default defineComponent(() => {
               oridinal: 1
             },
             {
-              id: 'gma',
+              id: 'yiqiyoo',
+              type: '休闲游戏',
+              attr: 1,
+              oridinal: 2
+            },
+            {
+              id: 'gba',
               type: '经典GBA',
               attr: 3,
               oridinal: 3
@@ -158,10 +225,10 @@ export default defineComponent(() => {
             select: (text: string) => (
               <button
                 class={clsx(
-                  'px-[20px] py-1 items-center justify-center duration-75 shrink-0 flex rounded-2xl whitespace-nowrap ',
+                  'px-[20px] text-[14px] py-1 items-center justify-center duration-75 shrink-0 flex rounded-2xl whitespace-nowrap ',
                   isGame.value
                     ? 'bg-white/30 text-white bg-gradient-to-b  from-[#ffaa4e] to-[#ff6227]'
-                    : 'text-[#000] bg-[#D6D6D6]'
+                    : 'text-white  bg-[#D6D6D6] bg-gradient-to-b  from-[#ffaa4e] to-[#ff6227]'
                 )}
               >
                 {text}
@@ -170,10 +237,10 @@ export default defineComponent(() => {
             unSelect: (text: string) => (
               <button
                 class={clsx(
-                  'px-[20px] py-1 items-center justify-center duration-75 shrink-0 flex rounded-2xl whitespace-nowrap',
+                  'px-[20px] text-[14px] py-1 items-center justify-center duration-75 shrink-0 flex rounded-2xl whitespace-nowrap',
                   isGame.value
                     ? ' text-[#999] bg-white/10 hover:bg-white/20'
-                    : 'text-[#000] hover:bg-[#f0ecec]'
+                    : 'text-[#666] hover:bg-black/10 bg-black/[0.05] hover:bg-[#f0ecec]'
                 )}
               >
                 {text}
@@ -196,9 +263,10 @@ export default defineComponent(() => {
                 .fill(0)
                 .map((el, idx) => (
                   <div
-                    class={
+                    class={clsx(
-                      ' relative cursor-pointer bg-gray-500 group w-full  flex-grow-0 rounded-xl overflow-hidden'
+                      ' relative cursor-pointer bg-white/20 group w-full  flex-grow-0 rounded-lg overflow-hidden',
-                    }
+                      isGame.value ? 'bg-white/30 ' : ' bg-[#fff]/70'
+                    )}
                     key={idx}
                   />
                 ))}

src/utils/tool.ts

@@ -7,3 +7,19 @@
 export function randomNum(min: number, max: number) {
   return Math.floor(Math.random() * (max - min + 1)) + min;
 }
+/**
+ * 生成一个长度在 0 到 n 之间的随机字符串。
+ * @param n 最大字符串长度。
+ * @returns 随机生成的字符串。
+ */
+export function generateRandomString(n: number): string {
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  const length = Math.floor(Math.random() * (n + 1));
+  let result = '';
+
+  for (let i = 0; i < length; i++) {
+    result += characters.charAt(Math.floor(Math.random() * characters.length));
+  }
+
+  return result;
+}