refactor(liveRoom): 重构直播室功能

- 移除不必要的导入和未使用的变量
- 优化拍卖数据获取逻辑
- 添加 WebSocket 连接和消息处理功能
- 更新侧边按钮组件，显示实时拍卖数据
-增加拍品详情弹窗功能

app/components/x-popup/index.vue

@@ -18,10 +18,13 @@ const close=()=>{
 <template>
   <van-popup
       :show="show"
+      :transition-appear="true"
       teleport="#__nuxt"
       position="bottom"
+      @click-overlay="close"
       :style="{ height: '74%' }"
       v-bind="{...$attrs,...$props}"
+      :safe-area-inset-bottom="true"
   >
     <div class="flex flex-col h-full">
       <!-- 标题栏 -->

app/pages/liveRoom/components/SideButton/index.vue

@@ -6,21 +6,22 @@ import { liveStore } from "@/stores/live/index.js";
 import xButton from '@/components/x-button/index.vue'
 import tangPopup from './tangPopup.vue'
 import {goodStore} from "~/stores/goods/index.js";
-const { quoteStatus, changeStatus,show } = liveStore();
+const { quoteStatus, changeStatus,show,auctionData ,getSocketData} = liveStore();
 const {pageRef} = goodStore();
 const showTang=ref(false)
 const openOne=()=>{
   showTang.value=true
 }
+getSocketData()
 </script>
 
 <template>
   <div class="bg-white w-60px rounded-l-4px overflow-hidden">
     <!-- 拍品信息 -->
-    <x-button @click="openOne">
-      <div class="w-60px h-60px text-center border-b border-gray-300 flex flex-col justify-center items-center text-#7D7D7F text-12px">
+    <x-button>
+      <div @click="openOne" class="w-60px h-60px text-center border-b border-gray-300 flex flex-col justify-center items-center text-#7D7D7F text-12px">
         <div>拍品</div>
-        <div>(1/{{pageRef.itemCount??0}})</div>
+        <div>({{auctionData?.artwork?.index}}/{{pageRef.itemCount??0}})</div>
       </div>
     </x-button>
     <tangPopup v-model:show="showTang"></tangPopup>

app/pages/liveRoom/components/SideButton/tangPopup.vue

@@ -2,7 +2,9 @@
 import xPopup from '@/components/x-popup/index.vue'
 import {goodStore} from "~/stores/goods/index.js";
 import xImage from '@/components/x-image/index.vue'
+import DetailPopup from '@/pages/home/components/DetailPopup/index.vue'
 const {pageRef,itemList} = goodStore();
+const showDetail=ref(false)
 const props = defineProps({
   show: Boolean,
   title: {
@@ -13,7 +15,9 @@ const props = defineProps({
 const emit = defineEmits(['update:show'])
 
 const close = () => emit('update:show', false);
-
+const openShow=()=>{
+  showDetail.value=true
+}
 </script>
 
 <template>
@@ -27,11 +31,13 @@ const close = () => emit('update:show', false);
           v-for="(item,index) of itemList"
           :key="item.uuid"
           class="flex mb-21px"
+          @click="openShow"
       >
         <div
             class="mr-10px flex-shrink-0 rounded-4px overflow-hidden cursor-pointer"
         >
           <xImage
+              :preview="false"
               class="w-80px h-80px"
               :src="item.artwork?.hdPic"
               :alt="item?.artworkTitle"
@@ -48,6 +54,7 @@ const close = () => emit('update:show', false);
       </div>
     </div>
   </x-popup>
+  <DetailPopup v-model:show="showDetail"></DetailPopup>
 </template>
 
 <style scoped>

app/pages/liveRoom/index.client.vue

@@ -9,9 +9,7 @@ import paymentResults from '~/pages/liveRoom/components/PaymentResults/index.vue
 import paymentInput from '~/pages/liveRoom/components/PaymentInput/index.vue'
 import xButton from '@/components/x-button/index.vue'
 import {goodStore} from "~/stores/goods/index.js";
-import {authStore} from "~/stores/auth/index.js";
 const {auctionDetail,getAuctionDetail} = goodStore();
-const { token } = authStore()
 const player = ref(null)
 const {quoteStatus, changeStatus, show, playerId, show1} = liveStore()
 const isPlayerReady = ref(false)
@@ -21,7 +19,6 @@ const props = defineProps({
     default: true,
   },
 })
-
 definePageMeta({
   title: '主页',
   i18n: 'login.title',
@@ -59,25 +56,10 @@ const initializePlayer = () => {
     console.error('播放器初始化失败:', error)
   }
 }
-
+const auctionData=ref({})
 
 onMounted(async () => {
-  if (!auctionDetail.value.uuid){
-    await getAuctionDetail()
-  }
   /*  initializePlayer()*/
-  const { ws, messages, onMessage } = useWebSocket()
-
-// 连接
-  ws.connect('/api/v1/m/auction/live',{auctionUuid: auctionDetail.value.uuid,token:token.value})
-
-/*// 发送消息
-  ws.send({ type: 'chat', content: 'Hello!' })*/
-
-// 监听消息
-  onMessage((data) => {
-    console.log('收到消息:', data)
-  })
 })
 onBeforeUnmount(() => {
   if (player.value) {

app/stores/live/index.js

@@ -1,14 +1,39 @@
 import { createGlobalState } from '@vueuse/core'
 import {ref} from "vue";
+import {goodStore} from "@/stores/goods/index.js";
+import {authStore} from "@/stores/auth/index.js";
+
 export const liveStore = createGlobalState(() => {
+    const {auctionDetail,getAuctionDetail} = goodStore();
+    const { token } = authStore()
     const quoteStatus = ref(false)
     const show = ref(false)
     const show1=ref(false)
     const playerId=ref('J_prismPlayer')
+    const auctionData=ref({})
+    const getSocketData=async ()=>{
+        if (!auctionDetail.value.uuid){
+            await getAuctionDetail()
+        }
+        const { ws, messages, onMessage } = useWebSocket()
+
+// 连接
+        ws.connect('/api/v1/m/auction/live',{auctionUuid: auctionDetail.value.uuid,token:token.value})
+
+        /*// 发送消息
+          ws.send({ type: 'chat', content: 'Hello!' })*/
+// 监听消息
+        onMessage((data) => {
+            console.log('收到消息:', data)
+            auctionData.value = data
+        })
+    }
     const changeStatus = () => {
         quoteStatus.value = !quoteStatus.value
     }
     return{
+        auctionData,
+        getSocketData,
         show1,
         playerId,
         show,