app/app.vue

@@ -9,7 +9,10 @@ useHead({
     {name: 'keywords', content: useI18n().t('appSetting.appKeyWords')},
   ],
 })
-
+const color = useColorMode()
+const mode = computed(() => {
+  return color.value
+})
 
 // 添加路由中间件来处理过渡方向
 const router = useRouter()
@@ -39,7 +42,7 @@ provide('slideDirection', slideDirection)
 </script>
 
 <template>
-  <VanConfigProvider>
+  <VanConfigProvider :theme="mode">
     <NuxtLoadingIndicator
         color="repeating-linear-gradient(to right,var(--c-primary) 0%,var(--c-primary-active) 100%)"/>
     <NuxtLayout>

app/components/AppFooter.vue

@@ -18,7 +18,7 @@ onMounted(()=>{
 </script>
 
 <template>
- <div v-if="show" v-memo="[active]" >
+ <div v-if="show">
    <van-tabbar  v-model="active" route placeholder fixed>
      <van-tabbar-item replace to="/">
        <span>{{ $t('tabbar.home') }}</span>

app/components/AppHeader.vue

@@ -30,12 +30,13 @@ const subTitle = computed(() => {
   return route.meta.subTitle ? t(route.meta.subTitle) : ''
 })
 const showLeftArrow = computed(() => route.name && routeWhiteList.includes(route.name))
-
+console.log('route.meta.i18n',route.meta.i18n)
+console.log('t(route.meta.i18n)',route.meta.i18n)
+console.log('route.meta.title',route.meta.title)
 </script>
 
 <template>
   <VanNavBar
-      v-memo="[title,fullLive,showLeftArrow,subTitle]"
     :title="title"
     :left-arrow="!showLeftArrow||fullLive"
     placeholder clickable fixed

app/components/itemDetail/index.vue

@@ -43,8 +43,8 @@ const props = defineProps({
   </div>
   <div class="px-[16px] bg-#fff pt-12px pb-18px">
     <div class="text-[#575757] text-[14px] mb-4px">竞价表：</div>
-    <div v-if="detailInfo?.priceRuleType!=='diy'">
+    <div>
-      <xImage :src="detailInfo?.priceRuleImage" alt=""/>
+      <img src="@/static/images/1981736313.png" alt="">
     </div>
   </div>
 </div>

app/components/x-image/index.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { showImagePreview } from 'vant';
+import { NuxtImg } from '#components'
 const props = defineProps({
   src: {
     type: String,
@@ -34,9 +35,7 @@ const showImage = () => {
 </script>
 
 <template>
-
   <nuxt-img
-      v-if="src"
       loading="lazy"
       v-bind="{ ...props, ...$attrs }"
       style="object-fit: cover"
@@ -47,7 +46,6 @@ const showImage = () => {
       :quality="quality"
       placeholder
   />
-  <van-empty v-else description="暂无" />
 </template>
 
 <style scoped>

app/composables/useWebSocket.ts

@@ -1,21 +0,0 @@
-export function useWebSocket() {
-  const { $ws } = useNuxtApp()
-  const messages = ref<any[]>([])
-
-  // 监听消息
-  const onMessage = (callback: (data: any) => void) => {
-    const handler = (event: CustomEvent) => callback(event.detail)
-    window.addEventListener('ws-message', handler as EventListener)
-    
-    // 返回清理函数
-    return () => {
-      window.removeEventListener('ws-message', handler as EventListener)
-    }
-  }
-
-  return {
-    ws: $ws,
-    messages,
-    onMessage
-  }
-} 

app/pages/home/components/Cescribe/index.vue

@@ -1,16 +1,12 @@
 <script setup>
-import {goodStore} from "~/stores/goods/index.js";
+
-import xImage from '@/components/x-image/index.vue'
-const {
-  auctionDetail
-} = goodStore()
 </script>
 
 <template>
   <div class="px-16px pt-14px">
-    <div class="text-#575757 text-14px" v-html="auctionDetail.info">
+    <div class="text-#575757 text-14px">
+      这里是后台富文本配置的说明，啊即可打开三等奖撒度老师的湿答答是快乐的阿四大皆空
     </div>
-    <xImage :src="auctionDetail.image" class="w-343px"></xImage>
   </div>
 </template>
 

app/pages/home/components/ItemList/index.vue

@@ -57,7 +57,7 @@ const openShow = async (item) => {
         @refresh="onRefresh"
     >
       <template #success>
-        <van-icon name="success" /> <span>刷新成功</span>
+        <van-icon name="success" /> 刷新成功
       </template>
       <van-list
           v-model:loading="storeLoading"
@@ -65,7 +65,7 @@ const openShow = async (item) => {
           finished-text="没有更多了"
           @load="loadMore"
       >
-        <div class="w-full flex gap-[16px]" v-memo="[itemList]">
+        <div class="w-full flex gap-[16px]">
           <masonry-wall :items="itemList" :ssr-columns="2" :maxColumns="2" :minColumns="2"  :gap="5">
             <template #default="{ item, index }">
             <div

app/pages/home/index.vue

@@ -3,18 +3,15 @@ import liveRoom from '@/pages/liveRoom/index.client.vue';
 import {goodStore} from "@/stores/goods/index.js";
 import ItemList from './components/ItemList/index.vue'
 import Cescribe from './components/Cescribe/index.vue'
-const {fullLive,getAuctionDetail,auctionDetail} = goodStore();
+const {fullLive, liveRef} = goodStore();
 const changeLive = () => {
   fullLive.value = true;
 };
-if (!auctionDetail.value.uuid){
-  await getAuctionDetail()
-}
 </script>
 <template>
   <div class="flex-grow-1">
     <client-only>
-      <liveRoom @click="changeLive" :class="['changeLive', fullLive ? 'expanded' : 'collapsed']"
+      <liveRoom @click="changeLive" :class="['changeLive', fullLive ? 'expanded' : 'collapsed']" ref="liveRef"
                 :fullLive="fullLive"/>
     </client-only>
     <div v-show="!fullLive" class="bg-#fff">

app/pages/liveRoom/index.client.vue

@@ -8,10 +8,6 @@ import {liveStore} from "~/stores/live/index.js";
 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)
@@ -61,23 +57,8 @@ const initializePlayer = () => {
 }
 
 
-onMounted(async () => {
+onMounted(() => {
-  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/pages/unocss/index.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+definePageMeta({
+  title: '🎨 Unocss 示例',
+  i18n: 'menu.unocssExample',
+})
+</script>
+
+<template>
+  <div>
+    <h1 class="text-6xl color-pink font-semibold">
+      {{ $t('unocss_page.hello', ['Unocss!']) }}
+    </h1>
+
+    <p class="mt-10 text-gray-700 dark:text-white">
+      {{ $t('unocss_page.desc') }}
+    </p>
+
+    <button class="mt-10 btn">
+      {{ $t('unocss_page.btn_txt') }}
+    </button>
+  </div>
+</template>

app/plugins/websocket.ts

@@ -1,86 +0,0 @@
-export default defineNuxtPlugin(() => {
-  const config = useRuntimeConfig()
-  const ws = reactive({
-    instance: null as WebSocket | null,
-    isConnected: false,
-
-    // 修改 connect 方法接收路径和数据对象
-    connect(path: string, data?: Record<string, any>) {
-      if (this.instance?.readyState === WebSocket.OPEN) {
-        this.instance.close()
-      }
-
-      // 构建查询字符串
-      const queryString = data
-          ? '?' + Object.entries(data)
-          .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
-          .join('&')
-          : ''
-
-      // 构建完整的 WebSocket URL
-      const wsUrl = `${config.public.NUXT_PUBLIC_SOCKET_URL}${path}${queryString}`
-      this.instance = new WebSocket(wsUrl)
-
-      this.instance.onopen = () => {
-        this.isConnected = true
-        console.log('WebSocket 已连接')
-      }
-
-      this.instance.onclose = () => {
-        this.isConnected = false
-        console.log('WebSocket 已断开')
- /*       this.reconnect(path, data)*/
-      }
-
-      this.instance.onerror = (error) => {
-        console.error('WebSocket 错误:', error)
-      }
-
-      this.instance.onmessage = (event) => {
-        try {
-          const data = JSON.parse(event.data)
-          this.handleMessage(data)
-        } catch (error) {
-          console.error('消息解析错误:', error)
-        }
-      }
-    },
-
-    // 更新重连方法以支持数据对象
-    reconnect(path: string, data?: Record<string, any>) {
-      setTimeout(() => {
-        console.log('尝试重新连接...')
-        this.connect(path, data)
-      }, 3000)
-    },
-    
-    // 发送消息
-    send(data: any) {
-      if (this.instance?.readyState === WebSocket.OPEN) {
-        this.instance.send(JSON.stringify(data))
-      } else {
-        console.warn('WebSocket 未连接，无法发送消息')
-      }
-    },
-    
-    // 关闭连接
-    disconnect() {
-      if (this.instance) {
-        this.instance.close()
-        this.instance = null
-      }
-    },
-    
-    // 消息处理
-    handleMessage(data: any) {
-      // 触发自定义事件，让组件可以监听
-      window.dispatchEvent(new CustomEvent('ws-message', { detail: data }))
-    }
-  })
-
-  return {
-    provide: {
-      ws
-    }
-  }
-}) 

app/stores/goods/index.js

@@ -6,6 +6,7 @@ export const goodStore = createGlobalState(() => {
     // 状态定义
     const actionDetails = ref({})
     const fullLive = ref(false)
+    const liveRef = ref(null)
     const currentItem = ref({})
     const myArtWorks = ref([])
     const pageRef = ref({
@@ -96,7 +97,7 @@ export const goodStore = createGlobalState(() => {
         // 状态
         actionDetails,
         fullLive,
-
+        liveRef,
         currentItem,
         myArtWorks,
         pageRef,

env/.env.test

@@ -2,6 +2,6 @@
 NUXT_PUBLIC_API_BASE=http://172.16.100.99:8005
 NUXT_PUBLIC_WS_URL=ws://test-ws.example.com
 NUXT_API_SECRET=test-secret
-NUXT_PUBLIC_SOCKET_URL=ws://172.16.100.99:8005
+
 # 阿里云播放器配置
 NUXT_PUBLIC_PLAYER_SOURCE=artc://live-pull-sh-01.szjixun.cn/live/live?auth_key=1737080180-0-0-42ad4cf26ba26eee78ca7de9c524d1e0

nuxt.config.js

@@ -12,18 +12,21 @@ const publicConfig = Object.entries(process.env)
     }, {})
 
 export default defineNuxtConfig({
+
   modules: [
     '@vant/nuxt',
     '@unocss/nuxt',
       '@nuxt/image',
+    '@nuxtjs/color-mode',
     '@nuxtjs/i18n',
   ],
   runtimeConfig: {
     // 私有配置，只有在服务端可用
-    apiSecret: process.env.NUXT_API_SECRET,
+    apiSecret: process.env.NUXT_API_SECRET || 'default_secret',
     // 公共配置，客户端和服务端都可用
     public: publicConfig,
   },
+
   css: [
     '@unocss/reset/tailwind.css',
     '@/static/styles/default-theme.css',
@@ -48,6 +51,14 @@ export default defineNuxtConfig({
       },
     },
   },
+
+  colorMode: {
+    classSuffix: '',
+    preference: 'system',
+    fallback: 'light',
+    storageKey: 'nuxt-color-mode',
+  },
+
   i18n: {
     locales: currentLocales,
     lazy: true,

package.json

@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@fingerprintjs/fingerprintjs": "^4.5.1",
+    "@nuxtjs/color-mode": "^3.5.2",
     "@nuxtjs/i18n": "^9.1.1",
     "@vueuse/core": "^12.4.0",
     "@yeger/vue-masonry-wall": "^5.0.17",