1231

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

app/app.vue

@@ -2,8 +2,8 @@
 import useKeepalive from '~/composables/keepalive'
 import { appName, appDescription } from '~/constants'
 import { useI18n } from 'vue-i18n'
-import {message} from '@/components/x-message/useMessage.js'
+/*import {message} from '@/components/x-message/useMessage.js'
-message.success('success')
+message.success('success')*/
 useHead({
   title: useI18n().t('appSetting.appName'),
   meta: [

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
@@ -14,26 +19,32 @@ function onBack() {
 const { t } = useI18n()
 
 const title = computed(() => {
+
   if (!route.meta)
     return ''
   return route.meta.i18n ? t(route.meta.i18n) : (route.meta.title || '')
 })
-
+const subTitle = computed(() => {
+  if (!route.meta)
+    return ''
+  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"
   >
     <template #title v-if="route.meta.i18n==='menu.home'">
 
       <div class="flex flex-col items-center justify-center">
-        <div class="text-#000000 text-17px mb-5px font-600">京都拍卖会</div>
+        <div class="text-#000000 text-17px mb-5px font-600">{{ title }}</div>
-        <div class="text-#939393 text-10px line-height-none font-100">2025.01.18 蒙娜丽莎的微笑</div>
+        <div class="text-#939393 text-10px line-height-none font-100">{{subTitle}}</div>
       </div>
     </template>
   </VanNavBar>

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/composables/counter.ts

@@ -1,18 +0,0 @@
-import { defineStore } from 'pinia'
-
-const useCounter = defineStore('counter', () => {
-  const count = ref(0)
-
-  function increment() {
-    count.value++
-  }
-
-  return {
-    count,
-    increment,
-  }
-}, {
-  persist: true,
-})
-
-export default useCounter

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 v-if="!fullLive" />
-    <AppFooter />
   </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

@@ -0,0 +1,121 @@
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import Aliplayer from 'aliyun-aliplayer'
+import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css'
+import lock4 from '@/static/images/lock4@2x.png'
+import lockdfd from '@/static/images/lockdfd@2x.png'
+const player = ref(null)
+const quoteStatus = ref(false)
+const isPlayerReady = ref(false)
+const config = useRuntimeConfig()
+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',
+  isLive: true,
+  preload: true,
+  autoplayPolicy: {fallbackToMute: true},
+  controlBarVisibility: 'never',
+}
+const handlePlayerError = (error) => {
+  console.error('播放器错误:', error)
+  if (player.value) {
+    player.value?.play()
+  }
+}
+const initializePlayer = () => {
+  try {
+    if (player.value) {
+      player.value?.dispose()
+    }
+    player.value = new Aliplayer(playerConfig, (playerInstance) => {
+      isPlayerReady.value = true
+      playerInstance?.play()
+    })
+    player.value?.on('error', handlePlayerError)
+    player.value?.on('rtsTraceId', (event) => {})
+    player.value?.on('rtsFallback', (event) => {})
+  } catch (error) {
+    console.error('播放器初始化失败:', error)
+  }
+}
+
+const changeStatus = () => {
+  quoteStatus.value = !quoteStatus.value
+}
+
+onMounted(() => {
+  initializePlayer()
+})
+onBeforeUnmount(() => {
+  if (player.value) {
+    player.value?.dispose()
+    player.value = null
+  }
+})
+</script>
+
+<template>
+  <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">
+          <div>拍品</div>
+          <div>(1/188)</div>
+        </div>
+        <div class="w-full h-60px flex flex-col items-center justify-center" @click="changeStatus">
+          <div class="mb-3px">
+            <img :src="quoteStatus ? lockdfd : lock4"
+                 class="w-16px h-21px"
+                 alt="">
+          </div>
+          <div :class="quoteStatus ? 'text-#7D7D7F' : 'text-#2B53AC'"
+               class="text-10px">
+            {{ quoteStatus ? '关闭出价' : '开启出价' }}
+          </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
+          <van-rolling-text class="my-rolling-text" :start-num="0" :target-num="3000" direction="up"/>
+        </div>
+        <div class="text-16px text-#fff font-600">
+          下口价：RMB
+          <van-rolling-text class="my-rolling-text1" :start-num="0" :target-num="3500" direction="up"/>
+        </div>
+        <div
+            :class="`w-344px h-[40px] ${quoteStatus ? 'bg-#FFB25F' : 'bg-#D6D6D8'} rounded-4px ${quoteStatus ? 'text-#fff' : 'text-#7D7D7F'} text-14px flex justify-center items-center mt-10px mb-10px`">
+          {{ quoteStatus ? '确认出价 RMB 3,000' : '点击"开启出价"，即刻参与竞拍 ' }}
+        </div>
+        <div class="w-344px h-86px bg-#fff rounded-4px">
+        </div>
+      </div>
+    </template>
+
+  </div>
+</template>
+
+<style scoped>
+.my-rolling-text {
+  --van-rolling-text-item-width: 10px;
+  --van-rolling-text-font-size: 16px;
+  --van-rolling-text-color: #FFB25F;
+}
+
+.my-rolling-text1 {
+  --van-rolling-text-item-width: 10px;
+  --van-rolling-text-font-size: 16px;
+  --van-rolling-text-color: #FFF;
+}
+:deep(.prism-license-watermark){
+  display: none!important;
+}
+</style>

app/pages/countryRegion/index.vue

@@ -1,8 +1,10 @@
 <script setup>
-import {ref} from 'vue';
+import {ref, computed, watch} from 'vue';
 import pinyin from 'pinyin';
 import countryCode from './data/index.js';
+import { useI18n } from 'vue-i18n'
 
+const { t, locale } = useI18n()
 const value = ref('');
 const alphabet = [
   'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M',
@@ -12,27 +14,41 @@ const alphabet = [
 function groupByPinyinInitial(data) {
   const grouped = {};
   data.forEach(country => {
-    const initial = pinyin(country.cn, {style: pinyin.STYLE_FIRST_LETTER})[0][0].toUpperCase();
+    // 根据当前语言选择对应的国家名称
+    const countryName = locale.value === 'zh-CN' ? country.cn : 
+                       locale.value === 'zh-TW' ? country.tw : 
+                       locale.value === 'ja-JP' ? country.ja :
+                       country.en;
+                       
+    const initial = locale.value === 'ja-JP' ? '' : 
+                   locale.value === 'zh-CN' || locale.value === 'zh-TW' ? 
+                   pinyin(countryName, {style: pinyin.STYLE_FIRST_LETTER})[0][0].toUpperCase() :
+                   countryName.charAt(0).toUpperCase();
+                   
     if (!grouped[initial]) {
       grouped[initial] = [];
     }
-    grouped[initial].push(country);
+    grouped[initial].push({
+      ...country,
+      displayName: countryName
+    });
   });
 
   return grouped;
 }
 
 const groupedCountries = ref([])
-const initData=()=>{
+const initData = () => {
   groupedCountries.value = groupByPinyinInitial(countryCode);
 }
+
 const searchCountry = computed(() => {
   if (!value.value) {
     return groupedCountries.value;
   }
   return Object.keys(groupedCountries.value).reduce((filtered, initial) => {
     const countries = groupedCountries.value[initial].filter(country =>
-        country.cn.includes(value.value)
+        country.displayName.toLowerCase().includes(value.value.toLowerCase())
     );
     if (countries.length > 0) {
       filtered[initial] = countries;
@@ -40,27 +56,47 @@ const searchCountry = computed(() => {
     return filtered;
   }, {});
 });
+
+const showIndexBar = computed(() => locale.value !== 'ja-JP')
+
 initData()
+
+// 监听语言变化，重新初始化数据
+watch(locale, () => {
+  initData()
+})
 </script>
 
 <template>
   <div>
     <van-sticky>
-      <van-search v-model="value" placeholder="请输入国家和地区"/>
+      <van-search v-model="value" :placeholder="t('countryRegion.searchPlaceholder')"/>
     </van-sticky>
-    <van-index-bar sticky :sticky-offset-top="55" class="mt-[00px]" :index-list="alphabet">
+    <van-index-bar 
+      v-if="showIndexBar"
+      sticky 
+      :sticky-offset-top="55"  
+      :index-list="alphabet"
+    >
       <template v-for="(countries, index) in searchCountry" :key="index">
         <van-index-anchor
             :index="index"
         ></van-index-anchor>
-        <van-cell v-for="country in countries" :key="country.code" :title="country.cn">
+        <van-cell v-for="country in countries" :key="country.code" :title="country.displayName">
           <div class="pr-[25px]"> +{{ country.zone }}</div>
         </van-cell>
       </template>
-
-
     </van-index-bar>
-    <van-back-top right="15vw" bottom="10vh"/>
+
+    <div v-else>
+      <van-cell v-for="country in Object.values(searchCountry).flat()" 
+                :key="country.code" 
+                :title="country.displayName">
+        <div class="pr-[25px]"> +{{ country.zone }}</div>
+      </van-cell>
+    </div>
+
+    <van-back-top v-if="showIndexBar" right="15vw" bottom="10vh"/>
   </div>
 </template>
 

app/pages/home/index.vue

@@ -1,12 +1,13 @@
 <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',
-  title: '主页',
   i18n: 'menu.home',
 })
 const liveRef = ref(null)
@@ -43,6 +44,16 @@ const list = ref([{
   title: '张天赐 | 日出而作，日落而息',
   startingPrice: 'RMB 1,000',
   transactionPrice: '',
+},{
+  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/637d95b4-2ae9-4a74-bd60-a3a9d2ca2ca0.png',
+  title: '张天赐 | 日出而作，日落而息',
+  startingPrice: 'RMB 1,000',
+  transactionPrice: 'RMB 10,000',
+},{
+  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/637d95b4-2ae9-4a74-bd60-a3a9d2ca2ca0.png',
+  title: '张天赐 | 日出而作，日落而息',
+  startingPrice: 'RMB 1,000',
+  transactionPrice: 'RMB 10,000',
 }])
 const page = ref(1)
 
@@ -95,120 +106,136 @@ const openShow = () => {
     show.value = true
   })
 }
-
+const changeLive=()=>{
+  fullLive.value= true
+}
 </script>
 
 <template>
   <div class="bg-#fff flex-grow-1">
-    <liveBroadcast ref="liveRef"/>
+    <div
-    <van-tabs sticky animated>
+        @click="changeLive"
-      <van-tab title="拍品列表">
+        :class="[
-        <div class="px-[16px] pt-[16px]">
+          'transform transition-all duration-500 origin-top ease-out ease-in',
-          <van-pull-refresh>
+          fullLive ? 'scale-100 h-[calc(100vh-var(--van-nav-bar-height))]' : 'scale-100 h-188px'
-            <van-list
+        ]"
-                v-model:loading="loading"
+    >
-                :finished="finished"
+      <client-only>
-                finished-text="没有更多了"
+        <LiveRoom   ref="liveRef" :fullLive="fullLive" />
-                @load="loadData"
+      </client-only>
-            >
+    </div>
-              <div class="w-full flex gap-[16px]">
+    <div v-show="!fullLive" class="bg-#fff" >
-                <div class="flex flex-1 flex-col gap-[16px]">
+      <van-tabs sticky animated>
-                  <div
+        <van-tab title="拍品列表">
-                      v-for="(item, index) in leftColumn"
+          <div class="px-[16px] pt-[16px]">
-                      :key="index"
+            <van-pull-refresh>
-                      class="w-full"
+              <van-list
-                      @click="openShow"
+                  v-model:loading="loading"
-                  >
+                  :finished="finished"
-                    <div class="relative w-full">
+                  finished-text="没有更多了"
-                      <van-image
+                  @load="loadData"
-                          :src="item.image"
+              >
-                          :style="{ aspectRatio: item.ratio }"
+                <div class="w-full flex gap-[16px]">
-                          fit="cover"
+                  <div class="flex flex-1 flex-col gap-[16px]">
-                          class="w-full"
+                    <div
-                      />
+                        v-for="(item, index) in leftColumn"
-                      <div
+                        :key="index"
-                          class="absolute left-[8px] top-[8px] h-[17px] w-[45px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]">
+                        class="w-full"
-                        LOT{{ index * 2 + 1 }}
+                        @click="openShow"
+                    >
+                      <div class="relative w-full">
+                        <van-image
+                            :src="item.image"
+                            :style="{ aspectRatio: item.ratio }"
+                            fit="cover"
+                            class="w-full"
+                        />
+                        <div
+                            class="absolute left-[8px] top-[8px] h-[17px] w-[45px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]">
+                          LOT{{ index * 2 + 1 }}
+                        </div>
+                      </div>
+                      <div class="pt-[8px]">
+                        <div class="text-[14px] text-[#000000] leading-[20px]">
+                          {{ item.title }}
+                        </div>
+                        <div class="mt-[4px] text-[12px] text-[#575757]">
+                          起拍价：{{ item.startingPrice }}
+                        </div>
+                        <div
+                            v-if="item.transactionPrice"
+                            class="mt-[4px] text-[12px] text-[#b58047]"
+                        >
+                          成交价：{{ item.transactionPrice }}
+                        </div>
                       </div>
                     </div>
-                    <div class="pt-[8px]">
+                  </div>
-                      <div class="text-[14px] text-[#000000] leading-[20px]">
+                  <div class="flex flex-1 flex-col gap-[16px]">
-                        {{ item.title }}
+                    <div
+                        v-for="(item, index) in rightColumn"
+                        :key="index"
+                        class="w-full"
+                        @click="openShow"
+                    >
+                      <div class="relative w-full">
+                        <van-image
+                            :src="item.image"
+                            :style="{ aspectRatio: item.ratio }"
+                            fit="cover"
+                            class="w-full"
+                        />
+                        <div
+                            class="absolute left-[8px] top-[8px] h-[17px] w-[45px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]">
+                          LOT{{ index * 2 + 2 }}
+                        </div>
                       </div>
-                      <div class="mt-[4px] text-[12px] text-[#575757]">
+                      <div class="pt-[8px]">
-                        起拍价：{{ item.startingPrice }}
+                        <div class="text-[14px] text-[#000000] leading-[20px]">
-                      </div>
+                          {{ item.title }}
-                      <div
+                        </div>
-                          v-if="item.transactionPrice"
+                        <div class="mt-[4px] text-[12px] text-[#575757]">
-                          class="mt-[4px] text-[12px] text-[#b58047]"
+                          起拍价：{{ item.startingPrice }}
-                      >
+                        </div>
-                        成交价：{{ item.transactionPrice }}
+                        <div
+                            v-if="item.transactionPrice"
+                            class="mt-[4px] text-[12px] text-[#b58047]"
+                        >
+                          成交价：{{ item.transactionPrice }}
+                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
-                <div class="flex flex-1 flex-col gap-[16px]">
+              </van-list>
-                  <div
+            </van-pull-refresh>
-                      v-for="(item, index) in rightColumn"
-                      :key="index"
-                      class="w-full"
-                      @click="openShow"
-                  >
-                    <div class="relative w-full">
-                      <van-image
-                          :src="item.image"
-                          :style="{ aspectRatio: item.ratio }"
-                          fit="cover"
-                          class="w-full"
-                      />
-                      <div
-                          class="absolute left-[8px] top-[8px] h-[17px] w-[45px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]">
-                        LOT{{ index * 2 + 2 }}
-                      </div>
-                    </div>
-                    <div class="pt-[8px]">
-                      <div class="text-[14px] text-[#000000] leading-[20px]">
-                        {{ item.title }}
-                      </div>
-                      <div class="mt-[4px] text-[12px] text-[#575757]">
-                        起拍价：{{ item.startingPrice }}
-                      </div>
-                      <div
-                          v-if="item.transactionPrice"
-                          class="mt-[4px] text-[12px] text-[#b58047]"
-                      >
-                        成交价：{{ item.transactionPrice }}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </van-list>
-          </van-pull-refresh>
-        </div>
-      </van-tab>
-      <van-tab title="拍卖说明">
-        <div class="px-16px pt-14px">
-          <div class="text-#575757 text-14px">
-            这里是后台富文本配置的说明，啊即可打开三等奖撒度老师的湿答答是快乐的阿四大皆空
           </div>
-          <div></div>
+        </van-tab>
+        <van-tab title="拍卖说明">
+          <div class="px-16px pt-14px">
+            <div class="text-#575757 text-14px">
+              这里是后台富文本配置的说明，啊即可打开三等奖撒度老师的湿答答是快乐的阿四大皆空
+            </div>
+            <div></div>
+          </div>
+        </van-tab>
+      </van-tabs>
+      <van-back-top right="15vw" bottom="10vh"/>
+      <van-action-sheet :round="false" v-model:show="show" title="拍品详情">
+        <div class="content bg-[#F0F0F0]" :style="`height: calc(100vh - ${showHeight+85}px)`">
+          <itemDetail></itemDetail>
         </div>
-      </van-tab>
+      </van-action-sheet>
-    </van-tabs>
+    </div>
-    <van-back-top right="15vw" bottom="10vh"/>
-    <van-action-sheet :round="false" v-model:show="show" title="拍品详情">
-      <div class="content bg-[#F0F0F0]" :style="`height: calc(100vh - ${showHeight+85}px)`">
-        <itemDetail></itemDetail>
-      </div>
-    </van-action-sheet>
   </div>
 </template>
+
 <style>
 :root:root {
   --van-action-sheet-header-height: 39px;
 }
 </style>
+
 <style scoped lang="scss">
 :deep(.van-swipe__indicator) {
   width: 8px;
@@ -219,3 +246,6 @@ const openShow = () => {
   background: rgba(0, 0, 0, 0.8);
 }
 </style>
+
+<style scoped>
+</style>

app/pages/index.vue

@@ -1,7 +0,0 @@
-<script setup>
-import Home from './home/index.vue'
-</script>
-
-<template>
-  <Home></Home>
-</template>

app/pages/profile/index.vue

@@ -44,7 +44,7 @@ definePageMeta({
               <div class="flex flex-col justify-between">
                 <div class="text-#000 text-16px ellipsis line-height-21px">张天赐 | 日出而作，日落而息撒打算撒打算撒打决赛多久啊是世奥兰…</div>
                 <div class="text-#575757 text-14px line-height-none ">起拍价：RMB 1,000</div>
-                <div class="text-#B58047 text-14px line-height-none">成交价：RMB 10,000</div>
+                <div class="text-[#fdc181ff] line-height-none">成交价：RMB 10,000</div>
               </div>
             </div>
           </div>

app/pages/prose/index.vue

@@ -1,42 +0,0 @@
-<script lang="ts" setup>
-import { useProseStore } from '~/stores/prose'
-
-definePageMeta({
-  layout: 'default',
-  title: '随笔',
-  i18n: 'menu.fetch',
-})
-
-const proseStore = useProseStore()
-
-function fetch() {
-  proseStore.fetchProse()
-}
-
-function clear() {
-  proseStore.clearProse()
-}
-</script>
-
-<template>
-  <div>
-    <div class="h-300 flex items-center justify-center rounded-15 bg-white p-16 dark:bg-[--van-background-2]">
-      <div v-if="proseStore.prose" class="text-16 leading-26">
-        {{ proseStore.prose }}
-      </div>
-
-      <ClientOnly v-else>
-        <van-empty :description="$t('prose_page.btn_empty_desc')" />
-      </ClientOnly>
-    </div>
-
-    <van-space class="m-10" direction="vertical" fill>
-      <van-button type="primary" round block @click="fetch">
-        {{ $t('prose_page.btn_fetch') }}
-      </van-button>
-      <van-button type="default" round block @click="clear">
-        {{ $t('prose_page.btn_clear') }}
-      </van-button>
-    </van-space>
-  </div>
-</template>

app/stores/home/index.js

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

app/stores/prose.ts

@@ -1,33 +0,0 @@
-import { defineStore } from 'pinia'
-import { getProse } from '~/api/prose'
-
-export const useProseStore = defineStore(
-  'prose',
-  () => {
-    const prose = ref<string>('')
-
-    function initProse(val: string) {
-      if (!prose.value) {
-        prose.value = ''
-      }
-
-      prose.value = val
-    }
-
-    function clearProse() {
-      prose.value = ''
-    }
-
-    async function fetchProse() {
-      const res = await getProse()
-      initProse(res.result)
-    }
-
-    return {
-      prose,
-      initProse,
-      clearProse,
-      fetchProse,
-    }
-  },
-)

app/types/vue-router.d.ts

@@ -4,6 +4,8 @@ declare module 'vue-router' {
     title?: string
     /** i18n key */
     i18n?: string
+    /** sub title */
+    subTitle?: string
   }
 }
 

i18n/locales/en-US.json

@@ -43,5 +43,8 @@
     "btn_fetch": "Fetch",
     "btn_clear": "Clear",
     "btn_empty_desc": "No data"
+  },
+  "countryRegion": {
+    "searchPlaceholder": "Please enter the country and region"
   }
 }

i18n/locales/ja-JP.json

@@ -43,5 +43,8 @@
     "btn_fetch": "取得",
     "btn_clear": "クリア",
     "btn_empty_desc": "データなし"
+  },
+  "countryRegion": {
+    "searchPlaceholder": "国と地域を入力してください"
   }
 }

i18n/locales/zh-CN.json

@@ -1,5 +1,5 @@
 {
-  "appSetting":{
+  "appSetting": {
     "appName": "豐和",
     "appDescription": "泰丰国际京都拍卖会",
     "appKeyWords": "泰丰,泰丰文化，豐和，京都,拍卖会"
@@ -19,6 +19,10 @@
     "home": "主页",
     "profile": "我的"
   },
+  "profile": {
+    "name": "姓名",
+    "phone": "手机号"
+  },
   "unocss_page": {
     "hello": "你好 {0}",
     "desc": "这是 unocss 一个简单例子。",
@@ -43,5 +47,8 @@
     "btn_fetch": "拉取",
     "btn_clear": "清空",
     "btn_empty_desc": "暂无数据"
+  },
+  "countryRegion": {
+    "searchPlaceholder": "请输入国家和地区"
   }
 }

i18n/locales/zh-TW.json

@@ -43,5 +43,8 @@
     "btn_fetch": "拉取",
     "btn_clear": "清空",
     "btn_empty_desc": "暫無數據"
+  },
+  "countryRegion": {
+    "searchPlaceholder": "請輸入國家和地區"
   }
 }

nuxt.config.js

@@ -1,8 +1,6 @@
 import process from 'node:process'
-import { appDescription } from './app/constants/index'
 import preload from './app/utils/preload'
 import { currentLocales } from './i18n/i18n'
-
 export default defineNuxtConfig({
 
   hooks: {
@@ -23,8 +21,6 @@ export default defineNuxtConfig({
     '@unocss/nuxt',
     '@nuxtjs/color-mode',
     '@nuxtjs/i18n',
-    '@pinia/nuxt',
-    'pinia-plugin-persistedstate/nuxt',
   ],
   runtimeConfig: {
     public: {
@@ -93,7 +89,8 @@ export default defineNuxtConfig({
         { rel: 'icon', href: '/favicon.ico', sizes: 'any' },
       ],
       meta: [
-        { name: 'viewport', content: 'width=device-width, initial-scale=1, viewport-fit=cover' },
+        { name: 'viewport', content: 'width=device-width, initial-scale=1, viewport-fit=cover,user-scalable=no' },
+        { name: 'apple-mobile-web-app-capable', content: 'yes' },
         { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' },
         { name: 'theme-color', media: '(prefers-color-scheme: light)', content: '#ffffff' },
         { name: 'theme-color', media: '(prefers-color-scheme: dark)', content: '#222222' },
@@ -134,21 +131,13 @@ export default defineNuxtConfig({
     inlineStyles: false,
   },
 
-  eslint: {
-    config: {
-      standalone: false,
-    },
-  },
-
   future: {
     compatibilityVersion: 4,
   },
-
   // 指定 Nuxt 应用程序的兼容性日期，确保应用程序在未来的 Nuxt 版本中保持稳定性
   compatibilityDate: '2025-01-09',
-  
   devServer: {
-    host: '0.0.0.0',
+    host: 'localhost', // Set the host to 'localhost'
-    port: 3000,
+    port: 3000,        // Set the port to 3000 or any other port you prefer
   },
 })

package.json

@@ -5,7 +5,10 @@
   "packageManager": "pnpm@9.15.1",
   "scripts": {
     "build": "nuxt build",
-    "dev": "nuxt dev",
+    "dev": "nuxt dev --mode test",
+    "dev:prod": "nuxt dev --mode prod",
+    "build:test": "nuxt build --mode test",
+    "build:prod": "nuxt build --mode prod",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
@@ -15,8 +18,9 @@
   "dependencies": {
     "@nuxtjs/color-mode": "^3.5.2",
     "@nuxtjs/i18n": "^9.1.1",
+    "@vueuse/core": "^12.4.0",
+    "aliyun-aliplayer": "^2.28.5",
     "nuxt": "^3.15.0",
-    "pinia-plugin-persistedstate": "^4.2.0",
     "pinyin": "4.0.0-alpha.2",
     "segmentit": "^2.0.3",
     "vue": "^3.5.13",
@@ -24,12 +28,10 @@
   },
   "devDependencies": {
     "@iconify-json/carbon": "^1.2.5",
-    "@pinia/nuxt": "^0.9.0",
     "@unocss/nuxt": "0.65.2",
     "@unocss/preset-rem-to-px": "0.65.2",
     "@vant/nuxt": "^1.0.6",
     "bumpp": "^9.9.2",
-    "pinia": "^2.3.0",
     "postcss-mobile-forever": "^4.3.1",
     "sass": "^1.83.1",
     "sass-loader": "^16.0.4",

pnpm-lock.yaml

@@ -17,12 +17,15 @@ importers:
       '@nuxtjs/i18n':
         specifier: ^9.1.1
         version: 9.1.1(@vue/compiler-dom@3.5.13)(eslint@9.17.0(jiti@2.4.2))(magicast@0.3.5)(rollup@4.29.1)(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2))
+      '@vueuse/core':
+        specifier: ^12.4.0
+        version: 12.4.0(typescript@5.7.2)
+      aliyun-aliplayer:
+        specifier: ^2.28.5
+        version: 2.28.5
       nuxt:
         specifier: ^3.15.0
         version: 3.15.0(@parcel/watcher@2.5.0)(@types/node@22.10.2)(db0@0.2.1)(eslint@9.17.0(jiti@2.4.2))(ioredis@5.4.2)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.29.1)(sass@1.83.1)(terser@5.37.0)(tsx@4.19.2)(typescript@5.7.2)(vite@6.0.5(@types/node@22.10.2)(jiti@2.4.2)(sass@1.83.1)(terser@5.37.0)(tsx@4.19.2)(yaml@2.6.1))(yaml@2.6.1)
-      pinia-plugin-persistedstate:
-        specifier: ^4.2.0
-        version: 4.2.0(@pinia/nuxt@0.9.0(magicast@0.3.5)(pinia@2.3.0(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2)))(rollup@4.29.1))(magicast@0.3.5)(pinia@2.3.0(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2)))(rollup@4.29.1)
       pinyin:
         specifier: 4.0.0-alpha.2
         version: 4.0.0-alpha.2(segmentit@2.0.3)
@@ -39,9 +42,6 @@ importers:
       '@iconify-json/carbon':
         specifier: ^1.2.5
         version: 1.2.5
-      '@pinia/nuxt':
-        specifier: ^0.9.0
-        version: 0.9.0(magicast@0.3.5)(pinia@2.3.0(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2)))(rollup@4.29.1)
       '@unocss/nuxt':
         specifier: 0.65.2
         version: 0.65.2(magicast@0.3.5)(postcss@8.4.49)(rollup@4.29.1)(vite@6.0.5(@types/node@22.10.2)(jiti@2.4.2)(sass@1.83.1)(terser@5.37.0)(tsx@4.19.2)(yaml@2.6.1))(vue@3.5.13(typescript@5.7.2))(webpack@5.97.1(esbuild@0.24.2))
@@ -54,9 +54,6 @@ importers:
       bumpp:
         specifier: ^9.9.2
         version: 9.9.2(magicast@0.3.5)
-      pinia:
-        specifier: ^2.3.0
-        version: 2.3.0(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2))
       postcss-mobile-forever:
         specifier: ^4.3.1
         version: 4.3.1(postcss@8.4.49)
@@ -1023,11 +1020,6 @@ packages:
     resolution: {integrity: sha512-i0GV1yJnm2n3Yq1qw6QrUrd/LI9bE8WEBOTtOkpCXHHdyN3TAGgqAK/DAT05z4fq2x04cARXt2pDmjWjL92iTQ==}
     engines: {node: '>= 10.0.0'}
 
-  '@pinia/nuxt@0.9.0':
-    resolution: {integrity: sha512-2yeRo7LeyCF68AbNeL3xu2h6uw0617RkcsYxmA8DJM0R0PMdz5wQHnc44KeENQxR/Mrq8T910XVT6buosqsjBQ==}
-    peerDependencies:
-      pinia: ^2.3.0
-
   '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
@@ -1266,6 +1258,9 @@ packages:
   '@types/resolve@1.20.2':
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
 
+  '@types/web-bluetooth@0.0.20':
+    resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
+
   '@typescript-eslint/scope-manager@8.18.2':
     resolution: {integrity: sha512-YJFSfbd0CJjy14r/EvWapYgV4R5CHzptssoag2M7y3Ra7XNta6GPAJPPP5KGB9j14viYXyrzRO5GkX7CRfo8/g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1492,6 +1487,15 @@ packages:
   '@vue/shared@3.5.13':
     resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==}
 
+  '@vueuse/core@12.4.0':
+    resolution: {integrity: sha512-XnjQYcJwCsyXyIafyA6SvyN/OBtfPnjvJmbxNxQjCcyWD198urwm5TYvIUUyAxEAN0K7HJggOgT15cOlWFyLeA==}
+
+  '@vueuse/metadata@12.4.0':
+    resolution: {integrity: sha512-AhPuHs/qtYrKHUlEoNO6zCXufu8OgbR8S/n2oMw1OQuBQJ3+HOLQ+EpvXs+feOlZMa0p8QVvDWNlmcJJY8rW2g==}
+
+  '@vueuse/shared@12.4.0':
+    resolution: {integrity: sha512-9yLgbHVIF12OSCojnjTIoZL1+UA10+O4E1aD6Hpfo/DKVm5o3SZIwz6CupqGy3+IcKI8d6Jnl26EQj/YucnW0Q==}
+
   '@webassemblyjs/ast@1.14.1':
     resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==}
 
@@ -1594,6 +1598,9 @@ packages:
   ajv@8.17.1:
     resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==}
 
+  aliyun-aliplayer@2.28.5:
+    resolution: {integrity: sha512-UDy4Fj95fv/Syy0p8HRmYUGqadJHLuvucHEeJu6G71uHch87bllnaOI1r++ndfWu36oZph+dbArnP2eowR/Xsg==}
+
   ansi-colors@4.1.3:
     resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
     engines: {node: '>=6'}
@@ -1889,6 +1896,9 @@ packages:
   crossws@0.3.1:
     resolution: {integrity: sha512-HsZgeVYaG+b5zA+9PbIPGq4+J/CJynJuearykPsXx4V/eMhyQ5EDVg3Ak2FBZtVXCiOLu/U7IiwDHTr9MA+IKw==}
 
+  crypto-js@4.2.0:
+    resolution: {integrity: sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==}
+
   css-declaration-sorter@7.2.0:
     resolution: {integrity: sha512-h70rUM+3PNFuaBDTLe8wF/cdWu+dOZmb7pJt8Z2sedYbAcQVQV/tEchueg3GWxwqS0cxtbxmaHEdkNACqcvsow==}
     engines: {node: ^14 || ^16 || >=18}
@@ -1984,9 +1994,6 @@ packages:
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
-  deep-pick-omit@1.2.1:
-    resolution: {integrity: sha512-2J6Kc/m3irCeqVG42T+SaUMesaK7oGWaedGnQQK/+O0gYc+2SP5bKh/KKTE7d7SJ+GCA9UUE1GRzh6oDe0EnGw==}
-
   deepmerge@4.3.1:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
@@ -3089,26 +3096,6 @@ packages:
     resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
     engines: {node: '>=12'}
 
-  pinia-plugin-persistedstate@4.2.0:
-    resolution: {integrity: sha512-3buhA7ac+ssbOIx3VRCC8oHkoFwhDM9oHRCjo7nj+O8WUqnW+jRqh7eYT5eS/DNa3H28zp3dYf/nd/Vc8zj8eQ==}
-    peerDependencies:
-      '@pinia/nuxt': '>=0.9.0'
-      pinia: '>=2.3.0'
-    peerDependenciesMeta:
-      '@pinia/nuxt':
-        optional: true
-      pinia:
-        optional: true
-
-  pinia@2.3.0:
-    resolution: {integrity: sha512-ohZj3jla0LL0OH5PlLTDMzqKiVw2XARmC1XYLdLWIPBMdhDW/123ZWr4zVAhtJm+aoSkFa13pYXskAvAscIkhQ==}
-    peerDependencies:
-      typescript: '>=4.4.4'
-      vue: ^2.7.0 || ^3.5.11
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   pinyin@4.0.0-alpha.2:
     resolution: {integrity: sha512-SED2wWr1X0QwH6rXIDgg20zS1mAk0AVMO8eM3KomUlOYzC8mNMWZnspZWhhI0M8MBIbF2xwa+5r30jTSjAqNsg==}
     engines: {install-node: ^18.0.0}
@@ -4059,17 +4046,6 @@ packages:
   vue-bundle-renderer@2.1.1:
     resolution: {integrity: sha512-+qALLI5cQncuetYOXp4yScwYvqh8c6SMXee3B+M7oTZxOgtESP0l4j/fXdEJoZ+EdMxkGWIj+aSEyjXkOdmd7g==}
 
-  vue-demi@0.14.10:
-    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
-    engines: {node: '>=12'}
-    hasBin: true
-    peerDependencies:
-      '@vue/composition-api': ^1.0.0-rc.1
-      vue: ^3.0.0-0 || ^2.6.0
-    peerDependenciesMeta:
-      '@vue/composition-api':
-        optional: true
-
   vue-devtools-stub@0.1.0:
     resolution: {integrity: sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==}
 
@@ -5195,15 +5171,6 @@ snapshots:
       '@parcel/watcher-win32-ia32': 2.5.0
       '@parcel/watcher-win32-x64': 2.5.0
 
-  '@pinia/nuxt@0.9.0(magicast@0.3.5)(pinia@2.3.0(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2)))(rollup@4.29.1)':
-    dependencies:
-      '@nuxt/kit': 3.15.0(magicast@0.3.5)(rollup@4.29.1)
-      pinia: 2.3.0(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2))
-    transitivePeerDependencies:
-      - magicast
-      - rollup
-      - supports-color
-
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
@@ -5394,6 +5361,8 @@ snapshots:
 
   '@types/resolve@1.20.2': {}
 
+  '@types/web-bluetooth@0.0.20': {}
+
   '@typescript-eslint/scope-manager@8.18.2':
     dependencies:
       '@typescript-eslint/types': 8.18.2
@@ -5820,6 +5789,23 @@ snapshots:
 
   '@vue/shared@3.5.13': {}
 
+  '@vueuse/core@12.4.0(typescript@5.7.2)':
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 12.4.0
+      '@vueuse/shared': 12.4.0(typescript@5.7.2)
+      vue: 3.5.13(typescript@5.7.2)
+    transitivePeerDependencies:
+      - typescript
+
+  '@vueuse/metadata@12.4.0': {}
+
+  '@vueuse/shared@12.4.0(typescript@5.7.2)':
+    dependencies:
+      vue: 3.5.13(typescript@5.7.2)
+    transitivePeerDependencies:
+      - typescript
+
   '@webassemblyjs/ast@1.14.1':
     dependencies:
       '@webassemblyjs/helper-numbers': 1.13.2
@@ -5945,6 +5931,10 @@ snapshots:
       json-schema-traverse: 1.0.0
       require-from-string: 2.0.2
 
+  aliyun-aliplayer@2.28.5:
+    dependencies:
+      crypto-js: 4.2.0
+
   ansi-colors@4.1.3: {}
 
   ansi-escapes@4.3.2:
@@ -6255,6 +6245,8 @@ snapshots:
     dependencies:
       uncrypto: 0.1.3
 
+  crypto-js@4.2.0: {}
+
   css-declaration-sorter@7.2.0(postcss@8.4.49):
     dependencies:
       postcss: 8.4.49
@@ -6350,8 +6342,6 @@ snapshots:
 
   deep-is@0.1.4: {}
 
-  deep-pick-omit@1.2.1: {}
-
   deepmerge@4.3.1: {}
 
   default-browser-id@5.0.0: {}
@@ -7664,30 +7654,6 @@ snapshots:
 
   picomatch@4.0.2: {}
 
-  pinia-plugin-persistedstate@4.2.0(@pinia/nuxt@0.9.0(magicast@0.3.5)(pinia@2.3.0(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2)))(rollup@4.29.1))(magicast@0.3.5)(pinia@2.3.0(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2)))(rollup@4.29.1):
-    dependencies:
-      '@nuxt/kit': 3.15.0(magicast@0.3.5)(rollup@4.29.1)
-      deep-pick-omit: 1.2.1
-      defu: 6.1.4
-      destr: 2.0.3
-    optionalDependencies:
-      '@pinia/nuxt': 0.9.0(magicast@0.3.5)(pinia@2.3.0(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2)))(rollup@4.29.1)
-      pinia: 2.3.0(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2))
-    transitivePeerDependencies:
-      - magicast
-      - rollup
-      - supports-color
-
-  pinia@2.3.0(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2)):
-    dependencies:
-      '@vue/devtools-api': 6.6.4
-      vue: 3.5.13(typescript@5.7.2)
-      vue-demi: 0.14.10(vue@3.5.13(typescript@5.7.2))
-    optionalDependencies:
-      typescript: 5.7.2
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-
   pinyin@4.0.0-alpha.2(segmentit@2.0.3):
     dependencies:
       commander: 1.1.1
@@ -8644,10 +8610,6 @@ snapshots:
     dependencies:
       ufo: 1.5.4
 
-  vue-demi@0.14.10(vue@3.5.13(typescript@5.7.2)):
-    dependencies:
-      vue: 3.5.13(typescript@5.7.2)
-
   vue-devtools-stub@0.1.0: {}
 
   vue-flow-layout@0.1.1(vue@3.5.13(typescript@5.7.2)):