From a43bdaf157f164644ab2d9047b0585dd4326a449 Mon Sep 17 00:00:00 2001
From: xingyy <64720302+Concur-max@users.noreply.github.com>
Date: Fri, 17 Jan 2025 10:19:01 +0800
Subject: [PATCH 1/2] =?UTF-8?q?refactor(home):=20=E5=B0=86=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=E6=95=B0=E6=8D=AE=E7=A7=BB=E8=87=B3=20store=20?=
 =?UTF-8?q?=E5=B9=B6=E4=BC=98=E5=8C=96=E9=A1=B5=E9=9D=A2=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将 list 数据从组件内部移动到 home store 中
- 优化了 fullLive 的切换逻辑，改为 toggleFullLive 方法
- 更新了模板，使用新的 store 数据
- 添加了 slide-up 过渡动画，替换了原有的 fade动画
---
 app/pages/home/index.vue | 76 +++++++++++-----------------------------
 app/stores/home/index.js | 42 ++++++++++++++++++++++
 2 files changed, 62 insertions(+), 56 deletions(-)

diff --git a/app/pages/home/index.vue b/app/pages/home/index.vue
index bdbbf21..c61fb8c 100644
--- a/app/pages/home/index.vue
+++ b/app/pages/home/index.vue
@@ -1,16 +1,12 @@
 <script setup>
-import {useRect} from '@vant/use';
+import { ref, computed, nextTick } from '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";
-import Column from './components/Column/index.vue'
-const {fullLive} = homeStore();
-import { useFetch } from '#app'
+import { homeStore } from "@/stores/home/index.js";
+import Column from './components/Column/index.vue';
 
-definePageMeta({
-  layout: 'default',
-  i18n: 'menu.home',
-})
+const { fullLive ,list} = homeStore();
 const liveRef = ref(null);
 const loading = ref(false);
 const finished = ref(false);
@@ -18,48 +14,6 @@ const refreshing = ref(false);
 const page = ref(1);
 const show = ref(false);
 const showHeight = ref('');
-const list = ref([{
-  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/f7b65e23-ce21-41b4-8e58-9e6dc6950727.png',
-  title: '张天赐 | 日出而作，日落而息',
-  startingPrice: 'RMB 1,000',
-  transactionPrice: '',
-}, {
-  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/41eceb23-d168-4049-ae8e-48c5328b192f.png',
-  title: '张天赐 | 日出而作，日落而息',
-  startingPrice: 'RMB 1,000',
-  transactionPrice: '',
-}, {
-  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/25c3f03c-9e0b-456b-963f-79b3d812c89a.png',
-  title: '张天赐 | 日出而作，日落而息',
-  startingPrice: 'RMB 1,000',
-  transactionPrice: '',
-}, {
-  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/25c3f03c-9e0b-456b-963f-79b3d812c89a.png',
-  title: '张天赐 | 日出而作，日落而息',
-  startingPrice: 'RMB 1,000',
-  transactionPrice: '',
-}, {
-  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/25c3f03c-9e0b-456b-963f-79b3d812c89a.png',
-  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 loadData = async () => {
   // 加载数据逻辑...
 };
@@ -87,19 +41,19 @@ const openShow = () => {
   });
 };
 
-const changeLive = () => {
-  fullLive.value = true;
+const toggleFullLive = () => {
+  fullLive.value = !fullLive.value; // 切换全屏状态
 };
 </script>
 
 <template>
   <div class="flex-grow-1">
-    <div @click="changeLive" :class="['changeLive', fullLive ? 'expanded' : 'collapsed']">
+    <div @click="toggleFullLive" :class="['changeLive', fullLive ? 'expanded' : 'collapsed']">
       <client-only>
         <LiveRoom ref="liveRef" :fullLive="fullLive"/>
       </client-only>
     </div>
-    <transition name="fade">
+    <transition name="slide-up">
       <div v-show="!fullLive" class="bg-#fff">
         <van-tabs sticky animated>
           <van-tab title="拍品列表">
@@ -107,7 +61,7 @@ const changeLive = () => {
               <van-pull-refresh>
                 <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="loadData">
                   <div class="w-full flex gap-[16px]">
-                    <Column v-for="(column, colIndex) in columns" :key="colIndex" :items="column" @openShow="openShow" />
+                    <Column v-for="(column, colIndex) in columns" :key="colIndex" :items="column" @openShow="openShow"/>
                   </div>
                 </van-list>
               </van-pull-refresh>
@@ -131,11 +85,13 @@ const changeLive = () => {
     </transition>
   </div>
 </template>
+
 <style>
 :root:root {
   --van-action-sheet-header-height: 39px;
 }
 </style>
+
 <style scoped lang="scss">
 :deep(.van-swipe__indicator) {
   width: 8px;
@@ -170,4 +126,12 @@ const changeLive = () => {
   height: calc(100vh - var(--van-nav-bar-height));
   transform: translateY(0);
 }
+
+.slide-up-enter-active, .slide-up-leave-active {
+  transition: transform 0.5s ease;
+}
+
+.slide-up-enter, .slide-up-leave-to {
+  transform: translateY(100%);
+}
 </style>
\ No newline at end of file
diff --git a/app/stores/home/index.js b/app/stores/home/index.js
index 8e6d038..dae33b7 100644
--- a/app/stores/home/index.js
+++ b/app/stores/home/index.js
@@ -1,7 +1,49 @@
 import { createGlobalState } from '@vueuse/core'
 export const homeStore = createGlobalState(() => {
     const fullLive=ref(false)
+    const list = ref([{
+        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/f7b65e23-ce21-41b4-8e58-9e6dc6950727.png',
+        title: '张天赐 | 日出而作，日落而息',
+        startingPrice: 'RMB 1,000',
+        transactionPrice: '',
+    }, {
+        image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/41eceb23-d168-4049-ae8e-48c5328b192f.png',
+        title: '张天赐 | 日出而作，日落而息',
+        startingPrice: 'RMB 1,000',
+        transactionPrice: '',
+    }, {
+        image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/25c3f03c-9e0b-456b-963f-79b3d812c89a.png',
+        title: '张天赐 | 日出而作，日落而息',
+        startingPrice: 'RMB 1,000',
+        transactionPrice: '',
+    }, {
+        image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/25c3f03c-9e0b-456b-963f-79b3d812c89a.png',
+        title: '张天赐 | 日出而作，日落而息',
+        startingPrice: 'RMB 1,000',
+        transactionPrice: '',
+    }, {
+        image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/25c3f03c-9e0b-456b-963f-79b3d812c89a.png',
+        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',
+    }])
     return{
+        list,
         fullLive
     }
 })
\ No newline at end of file

From d345b66026182f80b045da2993cdfe822c6c95b8 Mon Sep 17 00:00:00 2001
From: xingyy <64720302+Concur-max@users.noreply.github.com>
Date: Fri, 17 Jan 2025 11:06:19 +0800
Subject: [PATCH 2/2] 123

---
 app/pages/home/index.vue | 76 +++++++++++++++++++++++++++++-----------
 env/.env.test            |  2 +-
 2 files changed, 57 insertions(+), 21 deletions(-)

diff --git a/app/pages/home/index.vue b/app/pages/home/index.vue
index c61fb8c..bfe89fb 100644
--- a/app/pages/home/index.vue
+++ b/app/pages/home/index.vue
@@ -1,12 +1,17 @@
 <script setup>
-import { ref, computed, nextTick } from 'vue';
-import { useRect } from '@vant/use';
+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";
-import Column from './components/Column/index.vue';
+import {homeStore} from "@/stores/home/index.js";
+import Column from './components/Column/index.vue'
 
-const { fullLive ,list} = homeStore();
+const {fullLive} = homeStore();
+
+
+definePageMeta({
+  layout: 'default',
+  i18n: 'menu.home',
+})
 const liveRef = ref(null);
 const loading = ref(false);
 const finished = ref(false);
@@ -14,6 +19,48 @@ const refreshing = ref(false);
 const page = ref(1);
 const show = ref(false);
 const showHeight = ref('');
+const list = ref([{
+  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/f7b65e23-ce21-41b4-8e58-9e6dc6950727.png',
+  title: '张天赐 | 日出而作，日落而息',
+  startingPrice: 'RMB 1,000',
+  transactionPrice: '',
+}, {
+  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/41eceb23-d168-4049-ae8e-48c5328b192f.png',
+  title: '张天赐 | 日出而作，日落而息',
+  startingPrice: 'RMB 1,000',
+  transactionPrice: '',
+}, {
+  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/25c3f03c-9e0b-456b-963f-79b3d812c89a.png',
+  title: '张天赐 | 日出而作，日落而息',
+  startingPrice: 'RMB 1,000',
+  transactionPrice: '',
+}, {
+  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/25c3f03c-9e0b-456b-963f-79b3d812c89a.png',
+  title: '张天赐 | 日出而作，日落而息',
+  startingPrice: 'RMB 1,000',
+  transactionPrice: '',
+}, {
+  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/25c3f03c-9e0b-456b-963f-79b3d812c89a.png',
+  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 loadData = async () => {
   // 加载数据逻辑...
 };
@@ -41,19 +88,19 @@ const openShow = () => {
   });
 };
 
-const toggleFullLive = () => {
-  fullLive.value = !fullLive.value; // 切换全屏状态
+const changeLive = () => {
+  fullLive.value = true;
 };
 </script>
 
 <template>
   <div class="flex-grow-1">
-    <div @click="toggleFullLive" :class="['changeLive', fullLive ? 'expanded' : 'collapsed']">
+    <div @click="changeLive" :class="['changeLive', fullLive ? 'expanded' : 'collapsed']">
       <client-only>
         <LiveRoom ref="liveRef" :fullLive="fullLive"/>
       </client-only>
     </div>
-    <transition name="slide-up">
+    <transition name="fade">
       <div v-show="!fullLive" class="bg-#fff">
         <van-tabs sticky animated>
           <van-tab title="拍品列表">
@@ -85,13 +132,11 @@ const toggleFullLive = () => {
     </transition>
   </div>
 </template>
-
 <style>
 :root:root {
   --van-action-sheet-header-height: 39px;
 }
 </style>
-
 <style scoped lang="scss">
 :deep(.van-swipe__indicator) {
   width: 8px;
@@ -124,14 +169,5 @@ const toggleFullLive = () => {
   position: absolute;
   z-index: 10;
   height: calc(100vh - var(--van-nav-bar-height));
-  transform: translateY(0);
-}
-
-.slide-up-enter-active, .slide-up-leave-active {
-  transition: transform 0.5s ease;
-}
-
-.slide-up-enter, .slide-up-leave-to {
-  transform: translateY(100%);
 }
 </style>
\ No newline at end of file
diff --git a/env/.env.test b/env/.env.test
index 18a5bf3..207c4c5 100644
--- a/env/.env.test
+++ b/env/.env.test
@@ -4,4 +4,4 @@ NUXT_PUBLIC_WS_URL=ws://test-ws.example.com
 NUXT_API_SECRET=test-secret
 
 # 阿里云播放器配置
-NUXT_PUBLIC_PLAYER_SOURCE=artc://live-pull-sh-01.szjixun.cn/live/live?auth_key=1736748343-0-0-feef65166e5cc62957c35b6e3eec82a1
\ No newline at end of file
+NUXT_PUBLIC_PLAYER_SOURCE=artc://live-pull-sh-01.szjixun.cn/live/live?auth_key=1737080180-0-0-42ad4cf26ba26eee78ca7de9c524d1e0
\ No newline at end of file