feat(home): 实现首页直播间全屏功能

- 新增 fullLive 全局状态管理直播间的全屏状态
- 修改 AppHeader组件，根据 fullLive 状态控制返回按钮的显示
- 更新 default 布局，根据 fullLive 状态控制 AppFooter 的显示- 调整 LiveRoom组件，支持全屏模式下的布局变化
- 修改 home 页面，实现直播间全屏和列表之间的切换

app/components/AppHeader.vue

@@ -1,10 +1,15 @@
 <script setup>
 import { useAppFooterRouteNames as routeWhiteList } from '~/config'
-
+import { homeStore } from "@/stores/home/index.js";
+const { fullLive } = homeStore()
 const route = useRoute()
 const router = useRouter()
 
 function onBack() {
+  if (fullLive.value){
+    fullLive.value=false
+    return
+  }
   if (window.history.state.back)
     history.back()
   else
@@ -25,12 +30,13 @@ const subTitle = computed(() => {
   return route.meta.subTitle ? t(route.meta.subTitle) : ''
 })
 const showLeftArrow = computed(() => route.name && routeWhiteList.includes(route.name))
+
 </script>
 
 <template>
   <VanNavBar
     :title="title"
-    :left-arrow="!showLeftArrow"
+    :left-arrow="!showLeftArrow||fullLive"
     placeholder clickable fixed
     @click-left="onBack"
   >

app/components/liveBroadcast/index.vue

@@ -3,8 +3,7 @@
 </script>
 
 <template>
-<div class="w-full h-[188px] bg-[] bg-#606165">
-
+<div class="w-full h-full bg-[] bg-#606165">
 </div>
 </template>
 

app/layouts/default.vue

@@ -1,13 +1,13 @@
 <template>
   <main class="flex flex-col min-h-svh">
     <AppHeader class="h-[var(--van-nav-bar-height)]" />
-
     <div class="flex-1 flex flex-col">
       <slot />
     </div>
-
-    <AppFooter />
+    <AppFooter v-if="!fullLive" />
   </main>
 </template>
-<script setup lang="ts">
+<script setup >
+import { homeStore } from "@/stores/home/index.js";
+const { fullLive } = homeStore()
 </script>

app/pages/LiveRoom/index.client.vue

@@ -8,7 +8,12 @@ const player = ref(null)
 const quoteStatus = ref(false)
 const isPlayerReady = ref(false)
 const config = useRuntimeConfig()
-console.log('config', config)
+const props = defineProps({
+  fullLive: {
+    type: Boolean,
+    default: false,
+  },
+})
 const playerConfig = {
   id: 'J_prismPlayer',
   source: 'artc://live-pull-sh-01.szjixun.cn/live/live?auth_key=1736748343-0-0-feef65166e5cc62957c35b6e3eec82a1',
@@ -56,8 +61,9 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="relative">
-    <div id="J_prismPlayer" class="w-screen" style="height: calc(100vh - var(--van-nav-bar-height))"></div>
+  <div class="relative h-full" >
+    <div id="J_prismPlayer" class="w-screen" :style="fullLive?'height: calc(100vh - var(--van-nav-bar-height))':'height:100%'"></div>
+    <template v-if="fullLive">
       <div class="absolute bg-#fff w-60px top-196px right-0 z-999 rounded-l-4px">
         <div
             class="w-full h-60px text-#7D7D7F text-12px flex flex-col justify-center items-center border-b-1px border-b-#D3D3D3">
@@ -76,7 +82,6 @@ onBeforeUnmount(() => {
           </div>
         </div>
       </div>
-
       <div class="absolute top-505px left-1/2 transform -translate-x-1/2 flex flex-col items-center">
         <div class="text-16px text-#FFB25F font-600">
           当前价：RMB
@@ -93,6 +98,8 @@ onBeforeUnmount(() => {
         <div class="w-344px h-86px bg-#fff rounded-4px">
         </div>
       </div>
+    </template>
+
   </div>
 </template>
 
@@ -108,4 +115,7 @@ onBeforeUnmount(() => {
   --van-rolling-text-font-size: 16px;
   --van-rolling-text-color: #FFF;
 }
+:deep(.prism-license-watermark){
+  display: none!important;
+}
 </style>

app/pages/home/index.vue

@@ -1,9 +1,11 @@
 <script setup>
 import liveBroadcast from '@/components/liveBroadcast/index.vue'
 import {useRect} from '@vant/use';
-
+import LiveRoom  from '@/pages/LiveRoom/index.client.vue'
 import itemDetail from '@/components/itemDetail/index.vue'
 
+import { homeStore } from "@/stores/home/index.js";
+const { fullLive } = homeStore()
 definePageMeta({
   layout: 'default',
   i18n: 'menu.home',
@@ -94,12 +96,29 @@ const openShow = () => {
     show.value = true
   })
 }
-
+const changeLive=()=>{
+  fullLive.value= true
+}
 </script>
 
 <template>
   <div class="bg-#fff flex-grow-1">
-    <liveBroadcast ref="liveRef"/>
+    <div
+        ref="liveRef"
+        @click="changeLive"
+        :class="[
+          'transform transition-all duration-500 origin-top ease-out ease-in',
+          fullLive ? 'scale-100 h-[calc(100vh-var(--van-nav-bar-height))]' : 'scale-100 h-188px'
+        ]"
+    >
+      <client-only>
+        <LiveRoom :fullLive="fullLive" />
+      </client-only>
+    </div>
+    <div v-show="!fullLive" :class="[
+        'bg-white transform transition-all duration-500 ease-out',
+        fullLive ? 'translate-y-full' : 'translate-y-0'
+      ]">
       <van-tabs sticky animated>
         <van-tab title="拍品列表">
           <div class="px-[16px] pt-[16px]">
@@ -202,12 +221,15 @@ const openShow = () => {
         </div>
       </van-action-sheet>
     </div>
+  </div>
 </template>
+
 <style>
 :root:root {
   --van-action-sheet-header-height: 39px;
 }
 </style>
+
 <style scoped lang="scss">
 :deep(.van-swipe__indicator) {
   width: 8px;
@@ -218,3 +240,6 @@ const openShow = () => {
   background: rgba(0, 0, 0, 0.8);
 }
 </style>
+
+<style scoped>
+</style>

app/stores/home/index.js

@@ -0,0 +1,7 @@
+import { createGlobalState } from '@vueuse/core'
+export const homeStore = createGlobalState(() => {
+    const fullLive=ref(false)
+    return{
+        fullLive
+    }
+})