动画

index.html

@@ -72,14 +72,77 @@
                     }
                 }
             </style>
-            <div class="loading-wrap">
+            <!-- <div class="loading-wrap">
                 <div class="balls">
                     <div></div>
                     <div></div>
                     <div></div>
                 </div>
-            </div>
+            </div> -->
         </div>
+        <div id="splash-screen">
+            <img src="/img1.png" class="img1" alt="" />
+            <img src="/img2.png" class="img2" alt="" />
+            <img src="/img-logo.png" class="img-logo" alt="" />
+        </div>
+        <style>
+            #splash-screen {
+                position: fixed;
+                width: 100vw;
+                height: 100vh;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                z-index: 9999;
+                object-fit: cover;
+                opacity: 1;
+                transition: opacity 0.8s ease-in-out;
+                background-color: #090a20;
+            }
+
+            #splash-screen .img1 {
+                width: 100%;
+                height: auto;
+                display: block;
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: 999;
+            }
+
+            #splash-screen .img2 {
+                width: 100%;
+                height: auto;
+                display: block;
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                z-index: 999;
+            }
+            #splash-screen .img-logo {
+                width: 110px;
+                height: 20px;
+                position: absolute;
+                bottom: 40px;
+                left: 50%;
+                transform: translateX(-50%);
+                z-index: 999;
+            }
+        </style>
         <script type="module" src="/src/main.ts"></script>
+        <script
+            src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.11.0/lottie.min.js"
+            type="text/javascript"
+        ></script>
+        <script>
+            var animation = bodymovin.loadAnimation({
+                container: document.getElementById('splash-screen'),
+                renderer: 'svg',
+                loop: true,
+                autoplay: true,
+                path: '/splash.json'
+            })
+        </script>
     </body>
 </html>

package.json

@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@traptitech/markdown-it-katex": "^3.6.0",
+    "@vicons/fa": "^0.12.0",
     "@vicons/tabler": "^0.12.0",
     "@vueuse/core": "^9.13.0",
     "date-fns": "^2.29.3",
@@ -35,6 +36,8 @@
     "markdown-it": "^13.0.1",
     "mitt": "^3.0.0",
     "naive-ui": "^2.34.3",
+    "phaser": "^3.60.0",
+    "phavuer": "^0.12.1",
     "pinia": "^2.0.33",
     "qrcode.vue": "^3.3.4",
     "qs": "^6.11.1",

src/api/index.ts

@@ -1,5 +1,5 @@
 import type { AxiosProgressEvent, GenericAbortSignal } from 'axios'
-import { post, get } from '@/utils/request'
+import { post, get, put } from '@/utils/request'
 import { useAuthStore, useSettingStore } from '@/store'
 
 export function fetchChatAPI<T = any>(
@@ -203,4 +203,17 @@ export function fetchGetChatRole<T>(id: any) {
     return get<T>({
         url: '/chatRole/get/' + id
     })
+}
+export function fetchSendComment<T>(data: any) {
+    return put<T>({
+        url: '/comment',
+        data: data
+    })
+}
+
+export function fetchComments<T>(data: any) {
+    return post<T>({
+        url: '/comment',
+        data: data
+    })
 }

src/components/common/CommentInfo.vue

@@ -2,13 +2,13 @@
     <div class="px-5 py-2">
         <n-thing>
             <template #avatar>
-                <n-avatar class="!block" round :size="40"> 醉 </n-avatar>
+                <n-avatar class="!block" round :size="40" :src="avatar"> </n-avatar>
             </template>
             <template #header-extra>
-                <div class="text-xs text-[#797A8A]">晋思宁</div>
+                <div class="text-xs text-[#797A8A]">{{ info.userName }}</div>
             </template>
             <template #description>
-                <div class="text-sm">新角色聊天感觉还不错，很有趣，新角色聊天感觉还不错，很有趣</div>
+                <div class="text-sm">{{ info.content }}</div>
                 <div class="flex mt-1 items-center">
                     <span class="text-xs text-[#797A8A]">16:00</span>
                     <span class="flex-1"></span>
@@ -23,4 +23,14 @@
 <script setup lang="ts">
 import { NThing, NAvatar } from 'naive-ui'
 import { LikeBtn } from '@/components/common'
+import avatar from '@/assets/common-avatar.png'
+
+const props = defineProps({
+    info: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    }
+})
 </script>

src/components/common/MomentsDetailPannel.vue

@@ -8,35 +8,128 @@
 
         <div class="title px-5 py-4 flex items-center relative">
             <span class="text-base font-medium">全部评论</span>
-            <span class="text-xs text-[#797A8A] ml-[2px]">(1356)</span>
+            <span class="text-xs text-[#797A8A] ml-[2px]">({{ totals }})</span>
             <img class="absolute bottom-2 left-[38px] w-[28px]" src="@/assets/png-xian.png" alt="" />
         </div>
 
         <div class="overflow-hidden pb-11">
             <div
-                v-for="(i, index) in 10"
+                v-for="(item, index) in list"
                 class="comment-box"
                 :class="{ 'comment-center': showList[index] }"
-                :key="i"
+                :key="index"
                 ref="commentRef"
             >
-                <comment-info></comment-info>
+                <comment-info :info="item"></comment-info>
+            </div>
+
+            <div class="loading flex items-center justify-center opacity-0" ref="loadingRef">加载中</div>
+
+            <div class="empty py-6" v-if="!loading && !totals">
+                <img class="w-3/5 block mx-[auto]" :src="isDark ? emptyDarkImg : emptyImg" alt="" />
+                <div class="text-sm text-[#939599] text-center py-3">暂无评论</div>
             </div>
         </div>
+
+        <div class="bottom bg-white px-[10px] py-[6px]">
+            <NConfigProvider
+                :theme-overrides="{
+                    Button: {
+                        fontSizeLarge: '24px',
+                        heightLarge: '40px'
+                    },
+                    Input: {
+                        color: '#F5F6F8',
+                        colorFocus: '#F5F6F8'
+                    }
+                }"
+            >
+                <div class="flex">
+                    <n-input
+                        size="large"
+                        v-model:value="msg"
+                        type="text"
+                        @keydown.enter="send"
+                        clearable
+                        placeholder="来说点什么…"
+                        maxlength="200"
+                    />
+                    <n-button class="!ml-4" type="primary" size="large" @click="send">
+                        <template #icon>
+                            <n-icon><telegram-plane /></n-icon>
+                        </template>
+                    </n-button>
+                </div>
+            </NConfigProvider>
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
 import { MomentInfo, CommentInfo } from '@/components/common'
 import { ref, watch, nextTick } from 'vue'
-import { useWindowScroll, useElementBounding, useWindowSize, useScroll } from '@vueuse/core'
-import { fetchGetMomentsDetail } from '@/api'
+import { useWindowScroll, useElementBounding, useWindowSize, useScroll, useIntersectionObserver } from '@vueuse/core'
+import { fetchGetMomentsDetail, fetchSendComment, fetchComments } from '@/api'
 import { useRoute } from 'vue-router'
+import { NInput, NButton, NIcon, NConfigProvider, useMessage, NSpin } from 'naive-ui'
+import { TelegramPlane } from '@vicons/fa'
+import { useUserStore } from '@/store'
+import emptyImg from '@/assets/empty.png'
+import emptyDarkImg from '@/assets/empty-dark.png'
+import { useTheme } from '@/hooks/useTheme'
+
+const { isDark } = useTheme()
 
+
+const route = useRoute()
+const momentsId = route.query.id
 const commentRef = ref([])
 const showList = ref([] as any)
 const { y } = useWindowScroll()
 const { width, height } = useWindowSize()
+const list = ref([] as any)
+const totals = ref(0)
+const page = ref(1)
+const finish = ref(false)
+
+function getComments(isSend = false) {
+    loading.value = true
+    let data = {
+        page: {
+            page: page.value,
+            limit: 20
+        },
+        search: {
+            where: {
+                momentsId: momentsId
+            },
+            order: {
+                createdAt: 'DESC'
+            }
+        }
+    }
+    if (isSend) {
+        data.page = {
+            page: 1,
+            limit: 1
+        }
+    }
+    fetchComments(data).then((res: any) => {
+        loading.value = false
+        if (isSend) {
+            list.value = [...res.items, ...list.value]
+        } else {
+            list.value = [...list.value, ...res.items]
+        }
+        totals.value = res.meta.totalItems
+        if (res.meta.totalPages <= res.meta.currentPage) {
+            finish.value = true
+        } else {
+            finish.value = false
+            page.value = page.value + 1
+        }
+    })
+}
 watch(
     y,
     () => {
@@ -51,11 +144,54 @@ watch(
     }
 )
 
-const route = useRoute()
+watch(
+    list,
+    () => {
+        nextTick(() => {
+            showList.value = commentRef.value.map((item: any) => {
+                return useElementBounding(item).top.value < height.value - 30
+            })
+        })
+    },
+    {
+        immediate: true
+    }
+)
+
 const moments = ref({})
-fetchGetMomentsDetail(route.query.id).then((res: any) => {
+
+fetchGetMomentsDetail(momentsId).then((res: any) => {
     moments.value = res
 })
+
+const msg = ref('')
+const message = useMessage()
+const userStore = useUserStore()
+function send() {
+    if (!msg.value) {
+        message.info('评论不能为空')
+        return
+    }
+    fetchSendComment({
+        content: msg.value,
+        userId: userStore.userInfo.id,
+        userName: userStore.userInfo.name,
+        momentsId: momentsId
+    }).then(res => {
+        message.success('发送成功')
+        msg.value = ''
+        getComments(true)
+        window.scrollTo(0, 0)
+    })
+}
+
+const loadingRef = ref(null)
+const loading = ref(false)
+useIntersectionObserver(loadingRef, ([{ isIntersecting }]) => {
+    if (isIntersecting && !loading.value && !finish.value) {
+        getComments()
+    }
+})
 </script>
 
 <style lang="less" scoped>
@@ -73,4 +209,12 @@ fetchGetMomentsDetail(route.query.id).then((res: any) => {
         opacity: 1;
     }
 }
+
+.bottom {
+    position: fixed;
+    bottom: 0;
+    z-index: 20;
+    left: 0;
+    right: 0;
+}
 </style>

src/components/common/MomentsPannel.vue

@@ -11,7 +11,7 @@
                     @click="goAgent(item.id)"
                 >
                     <n-avatar round :size="60" :src="item.pic"></n-avatar>
-                    <div class="text-xs leading-6 mt-1 truncate w-full">{{ item.name }}</div>
+                    <div class="text-xs leading-6 mt-1 truncate w-full text-center">{{ item.name }}</div>
                 </div>
             </div>
         </div>
@@ -26,6 +26,7 @@
         >
             <moment-info @goDetail="goDetail" :info="item"></moment-info>
         </div>
+        <div class="loading flex items-center justify-center opacity-0" ref="loadingRef">加载中</div>
     </div>
 </template>
 
@@ -34,7 +35,7 @@ import { NScrollbar, NAvatar, NList, NListItem, NThing, NSpace, NTag, NIcon, NIm
 import { useRouter } from 'vue-router'
 import { MomentInfo } from '@/components/common'
 import { fetchGetMoments, fetchChatRoles } from '@/api'
-import { useWindowScroll, useElementVisibility, useElementBounding, useWindowSize, useScroll } from '@vueuse/core'
+import { useWindowScroll, useIntersectionObserver, useElementBounding, useWindowSize, useScroll } from '@vueuse/core'
 import { ref, watch, computed, nextTick } from 'vue'
 
 const router = useRouter()
@@ -46,13 +47,17 @@ function goDetail(id: any) {
         }
     })
 }
-getMoments()
 
 const list = ref(<any>[])
+const page = ref(1)
+const finish = ref(false)
+const loading = ref(false)
+
 function getMoments() {
-    fetchGetMoments({
+    loading.value = true
+    let data = {
         page: {
-            page: 1,
+            page: page.value,
             limit: 20
         },
         search: {
@@ -60,16 +65,27 @@ function getMoments() {
                 createdAt: 'DESC'
             }
         }
-    }).then((res: any) => {
-        list.value = [...res.items, ...res.items, ...res.items]
-    })
+    }
+    fetchGetMoments(data)
+        .then((res: any) => {
+            list.value = [...list.value, ...res.items]
+            if (res.meta.totalPages <= res.meta.currentPage) {
+                finish.value = true
+            } else {
+                finish.value = false
+                page.value = page.value + 1
+            }
+        })
+        .finally(() => {
+            loading.value = false
+        })
 }
 
 getRoles()
 const chatRoles = ref(<any>[])
 function getRoles() {
     fetchChatRoles(20).then((res: any) => {
-        chatRoles.value = [...res, ...res, ...res]
+        chatRoles.value = res
     })
 }
 const target = ref([])
@@ -126,6 +142,14 @@ function goAgent(id: any) {
         }
     })
 }
+const loadingRef = ref(null)
+const isBottom = ref(false)
+useIntersectionObserver(loadingRef, ([{ isIntersecting }]) => {
+    if (isIntersecting && !loading.value && !finish.value) {
+        getMoments()
+    }
+    isBottom.value = isIntersecting
+})
 </script>
 
 <style lang="less" scoped>
@@ -174,7 +198,7 @@ function goAgent(id: any) {
 
 .roles-list {
     &::-webkit-scrollbar {
-        height: 5px;
+        height: 0px;
     }
 }
 </style>

src/components/game/Game.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import PhaserContainer from '@/components/game/PhaserContainer.vue'
+</script>
+
+<template>
+  <Suspense>
+    <PhaserContainer />
+
+    <template #fallback>
+      <div class="placeholder">
+        Downloading ...
+      </div>
+    </template>
+  </Suspense>
+</template>
+
+<style scoped>
+.placeholder {
+  font-size: 2rem;
+  font-family: 'Courier New', Courier, monospace;
+}
+</style>

src/components/game/PhaserContainer.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted } from 'vue'
+import type { Game } from 'phaser'
+
+let gameInstance: Game | null = null
+const containerId = 'game-container'
+const game = await import('@/game/game')
+
+onMounted(() => {
+  gameInstance = game.launch(containerId)
+})
+
+onUnmounted(() => {
+  gameInstance?.destroy(false)
+})
+</script>
+
+<template>
+  <div :id="containerId" />
+</template>

src/game/game.ts

@@ -0,0 +1,23 @@
+import Phaser from 'phaser'
+import BootScene from '@/game/scenes/BootScene'
+import PlayScene from '@/game/scenes/PlayScene'
+
+function launch(containerId: string) {
+  return new Phaser.Game({
+    type: Phaser.CANVAS,
+    width: window.innerWidth,
+    height: window.innerHeight,
+    parent: containerId,
+    physics: {
+      default: 'arcade',
+      arcade: {
+        gravity: { y: 300 },
+        debug: false
+      }
+    },
+    scene: [BootScene, PlayScene]
+  })
+}
+
+export default launch
+export { launch }

src/game/scenes/BootScene.ts

@@ -0,0 +1,21 @@
+import { Scene } from 'phaser'
+import sky from '@/game/assets/sky.png'
+import bomb from '@/game/assets/bomb.png'
+import thudMp3 from '@/game/assets/thud.mp3'
+import thudOgg from '@/game/assets/thud.ogg'
+
+export default class BootScene extends Scene {
+  constructor () {
+    super({ key: 'BootScene' })
+  }
+
+  preload () {
+    this.load.image('sky', sky)
+    this.load.image('bomb', bomb)
+    this.load.audio('thud', [thudMp3, thudOgg])
+  }
+
+  create () {
+    this.scene.start('PlayScene')
+  }
+}

src/game/scenes/PlayScene.ts

@@ -0,0 +1,24 @@
+import { Scene } from 'phaser'
+
+export default class PlayScene extends Scene {
+    constructor() {
+        super({ key: 'PlayScene' })
+    }
+
+    create() {
+        this.add.image(200, 300, 'sky')
+
+        const bomb = this.physics.add.image(400, 200, 'bomb')
+        bomb.setCollideWorldBounds(true)
+        bomb.body.onWorldBounds = true // enable worldbounds collision event
+        bomb.setBounce(1)
+        bomb.setVelocity(200, 20)
+
+        this.sound.add('thud')
+        this.physics.world.on('worldbounds', () => {
+            this.sound.play('thud', { volume: 0.75 })
+        })
+    }
+
+    update() {}
+}

src/main.ts

@@ -20,7 +20,7 @@ const invitor = query.get('invitor')
 if (invitor) {
     useStorage('invitor', '', sessionStorage).value = invitor as string
 }
-// const 
+// const
 
 const isWechat = /micromessenger/i.test(navigator.userAgent)
 
@@ -40,6 +40,30 @@ if (isWechat) {
     }
 }
 
+const loadSplash = (onload?: any, onerror?: any) =>
+    new Promise((resolve, reject) => {
+        let isHide = false
+        function hideSplash() {
+            if (isHide) return
+            isHide = true
+            if (splash) {
+                splash.style.opacity = '0'
+                setTimeout(() => {
+                    splash.style.display = 'none'
+                }, 800)
+            }
+            resolve('')
+        }
+        const splash = document.getElementById('splash-screen')
+        if (splash) {
+            splash.style.opacity = '1'
+            splash.style.display = 'block'
+        }
+        setTimeout(() => {
+            hideSplash()
+        }, 1000)
+    })
+
 async function bootstrap() {
     const app = createApp(App)
     setupAssets()
@@ -51,6 +75,7 @@ async function bootstrap() {
     setupI18n(app)
 
     await setupRouter(app)
+    await loadSplash()
 
     app.mount('#app')
 }

src/router/index.ts

@@ -50,6 +50,14 @@ const routes: RouteRecordRaw[] = [
             public: true
         }
     },
+    {
+        path: '/home1',
+        name: 'home1',
+        component: () => import('@/views/page/LoginView.vue'),
+        meta: {
+            public: true
+        }
+    },
     {
         path: '/',
         name: 'Root',

src/styles/global.less

@@ -37,3 +37,4 @@ body {
 .text-color-3 {
     color: var(--text-color-3);
 }
+

src/utils/request/index.ts

@@ -45,7 +45,9 @@ function http<T = any>({
 
     return method === 'GET'
         ? request.get(url, { params, signal, onDownloadProgress }).then(successHandler, failHandler)
-        : request.post(url, params, { headers, signal, onDownloadProgress }).then(successHandler, failHandler)
+        : method === 'POST'
+        ? request.post(url, params, { headers, signal, onDownloadProgress }).then(successHandler, failHandler)
+        : request.put(url, params, { headers, signal, onDownloadProgress }).then(successHandler, failHandler)
 }
 
 export function get<T = any>({
@@ -90,4 +92,25 @@ export function post<T = any>({
     })
 }
 
+export function put<T = any>({
+    url,
+    data,
+    method = 'PUT',
+    headers,
+    onDownloadProgress,
+    signal,
+    beforeRequest,
+    afterRequest
+}: HttpOption): Promise<T> {
+    return http<T>({
+        url,
+        method,
+        data,
+        headers,
+        onDownloadProgress,
+        signal,
+        beforeRequest,
+        afterRequest
+    })
+}
 export default post

src/views/page/AgentView.vue

@@ -1,26 +1,93 @@
 <template>
     <div class="page flex min-h-full flex-col bg-contain bg-no-repeat bg-[#F5F6F8]">
-        <!-- <n-page-header
-            class="header"
-            :class="[scrollY ? 'bg-white dark:bg-black' : '']"
-            title="智能体"
-            @back="handleBack"
+        <NConfigProvider
+            :theme-overrides="{
+                PageHeader: {
+                    backColor: scrollY ? (isDark ? '#fff' : '#000') : '#fff'
+                }
+            }"
         >
-            <template #extra>
-                <div class="w-[22px]"></div>
-            </template>
-        </n-page-header> -->
-        <agent-pannel></agent-pannel>
+            <n-page-header
+                class="header"
+                :class="[scrollY ? 'bg-white dark:bg-black' : '']"
+                :title="scrollY ? chatRole.name : ''"
+                @back="handleBack"
+            >
+                <template #extra>
+                    <div class="w-[22px]"></div>
+                </template>
+            </n-page-header>
+        </NConfigProvider>
+        <div>
+            <div class="w-full">
+                <n-image class="!block" :src="chatRole['pic']" object-fit="scale-down" />
+            </div>
+            <div class="translate-y-[-16px]">
+                <div class="rounded-t-2xl overflow-hidden chat-info">
+                    <div class="px-5 py-4">
+                        <n-thing>
+                            <template #avatar>
+                                <n-avatar v-if="chatRole.pic" class="!block" round :size="60" :src="chatRole.pic">
+                                </n-avatar>
+                                <n-avatar v-else class="!block" round :size="60"> {{ chatRole.name?.[0] }} </n-avatar>
+                            </template>
+                            <template #header>
+                                <div class="text-lg font-semibold">{{ chatRole.name }}</div>
+                            </template>
+                            <template #header-extra> </template>
+                            <template #description>
+                                <div class="text-xs text-[#797A8A]">1.5w+人聊过｜20个动态</div>
+                            </template>
+                            <template #footer>
+                                <div>
+                                    {{ chatRole.describe }}
+                                </div>
+                            </template>
+                            <template #action>
+                                <n-space size="small" class="mt-2">
+                                    <n-tag
+                                        :bordered="false"
+                                        :color="{
+                                            color: '#D0FEFF',
+                                            textColor: '#000'
+                                        }"
+                                        round
+                                        size="small"
+                                        v-for="(item, index) in labels"
+                                        :key="index"
+                                    >
+                                        {{ item }}
+                                    </n-tag>
+                                </n-space>
+                            </template>
+                        </n-thing>
+                    </div>
+                </div>
+
+                <div class="title px-5 py-4 flex items-center relative">
+                    <span class="text-base font-medium">全部动态</span>
+                    <span class="text-xs text-[#797A8A] ml-[2px]">(1356)</span>
+                    <img class="absolute bottom-2 left-[38px] w-[28px]" src="@/assets/png-xian.png" alt="" />
+                </div>
+
+                <div>
+                    <comment-info v-for="i in 10" :key="i"></comment-info>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { NPageHeader } from 'naive-ui'
-import { useRouter } from 'vue-router'
+import { NPageHeader, NConfigProvider, NImage, NThing, NAvatar, NTag, NSpace } from 'naive-ui'
+import { useRouter, useRoute } from 'vue-router'
 import { AgentPannel } from '@/components/common'
 import bgImg from '@/assets/png-beij.png'
 import { useWindowScroll } from '@vueuse/core'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+import { useTheme } from '@/hooks/useTheme'
+import { MomentInfo, CommentInfo } from '@/components/common'
+import { fetchGetChatRole } from '@/api'
 
 const router = useRouter()
 function handleBack() {
@@ -31,6 +98,23 @@ const { y } = useWindowScroll()
 const scrollY = computed(() => {
     return y.value
 })
+
+const { isDark } = useTheme()
+
+const route = useRoute()
+const chatRole = ref({
+    pic: '',
+    name: '',
+    labels: [],
+    describe: ''
+})
+fetchGetChatRole(route.query.id).then((res: any) => {
+    chatRole.value = res
+})
+
+const labels = computed(() => {
+    return chatRole.value?.labels
+})
 </script>
 
 <style lang="less" scoped>
@@ -51,8 +135,18 @@ const scrollY = computed(() => {
 }
 
 .header {
-    position: sticky;
+    position: fixed;
     top: 0;
     z-index: 20;
+    width: 100%;
+    transition: all ease-in-out 0.3s;
+}
+
+.chat-info {
+    background: linear-gradient(180deg, #d0feff 0%, #ffffff 80px, #ffffff 100%);
+}
+
+.title {
+    background: linear-gradient(180deg, #ffffff 0%, #f5f6f8 100%);
 }
 </style>

src/views/page/HomeView.vue

@@ -259,7 +259,7 @@ const isLogin = computed(() => {
 const onLogin = () => {
     showLogin.value = false
     loading.value = true
-    router.replace({ name: 'Chat' })
+    router.replace({ name: 'moments' })
 }
 
 const loading = ref(false)
@@ -272,7 +272,7 @@ function goChat() {
         }
     } else {
         loading.value = true
-        router.push({ name: 'Chat' })
+        router.push({ name: 'moments' })
     }
 }
 

src/views/page/HomeView1.vue

@@ -0,0 +1,20 @@
+<template>
+    <game />
+</template>
+<script setup lang="ts">
+import robot1Img from '@/assets/robot1.gif'
+import Game from '@/components/game/Game.vue'
+</script>
+
+<style lang="less" scoped>
+.page {
+    width: 100vw;
+    height: 100vh;
+    position: relative;
+}
+
+#robot1 {
+    position: absolute;
+    right: 0;
+}
+</style>

yarn.lock

@@ -1843,6 +1843,11 @@
     "@typescript-eslint/types" "5.58.0"
     eslint-visitor-keys "^3.3.0"
 
+"@vicons/fa@^0.12.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@vicons/fa/-/fa-0.12.0.tgz#a5f92db45990f8a47b5eeedcdb9b673f0dababc8"
+  integrity sha512-g2PIeJLsTHUjt6bK63LxqC0uYQB7iu+xViJOxvp1s8b9/akpXVPVWjDTTsP980/0KYyMMe4U7F/aUo7wY+MsXA==
+
 "@vicons/tabler@^0.12.0":
   version "0.12.0"
   resolved "https://registry.npmjs.org/@vicons/tabler/-/tabler-0.12.0.tgz"
@@ -3855,6 +3860,11 @@ esutils@^2.0.2:
   resolved "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
+eventemitter3@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-5.0.1.tgz#53f5ffd0a492ac800721bb42c66b841de96423c4"
+  integrity sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==
+
 evtd@^0.2.2, evtd@^0.2.4:
   version "0.2.4"
   resolved "https://registry.npmjs.org/evtd/-/evtd-0.2.4.tgz"
@@ -6294,6 +6304,18 @@ pend@~1.2.0:
   resolved "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz"
   integrity sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==
 
+phaser@^3.60.0:
+  version "3.60.0"
+  resolved "https://registry.yarnpkg.com/phaser/-/phaser-3.60.0.tgz#8a555623e64c707482e6321485b4bda84604590d"
+  integrity sha512-IKUy35EnoEVcl2EmJ8WOyK4X8OoxHYdlhZLgRGpNrvD1fEagYffhVmwHcapE/tGiLgyrnezmXIo5RrH2NcrTHw==
+  dependencies:
+    eventemitter3 "^5.0.0"
+
+phavuer@^0.12.1:
+  version "0.12.1"
+  resolved "https://registry.yarnpkg.com/phavuer/-/phavuer-0.12.1.tgz#581869ac56e0a7c1973927d1dde47084ae1a7abb"
+  integrity sha512-G8Fe5tF00I2hH8riVE1x2319eEfhXc3QPpmO5X0XmLnkn334+hXrm1f8qvZ979ti4AyxpA+McAiV8QK10mhvLA==
+
 picocolors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz"