refactor(home): 重构首页轮播图组件

- 移除不必要的 state 和方法
- 优化视频上下文的创建和使用- 调整模板结构，移除冗余代码

packages/app/src/pages/home/components/home-banner.vue

@@ -1,27 +1,29 @@
 <script setup lang="ts">
-import dayjs, { unix } from 'dayjs'
+import { unix } from 'dayjs'
 
 const props = withDefaults(
   defineProps<{
     id: string | number
     url: string
     cover: string
-    videoContext?: UniNamespace.VideoContext
   }>(),
   {},
 )
+// const emits = defineEmits()
+const instance = getCurrentInstance()
 const playing = ref(false)
 const duration = ref(0)
 const durationText = computed(() => unix(duration.value).format('mm:ss'))
+const videoContext = ref<UniNamespace.VideoContext>()
 const handlePlay = () => {
-  props.videoContext?.play()
+  videoContext.value?.play()
   playing.value = true
 }
 const handleLoadedMetaData = ({ detail }) => {
   duration.value = detail.duration
 }
 onMounted(async () => {
-  // props.videoContext?
+  videoContext.value = uni.createVideoContext(`video-${props.id}`, instance)
 })
 </script>
 <template>
@@ -30,6 +32,8 @@ onMounted(async () => {
       class="w-full h-full"
       :id="`video-${id}`"
       :src="url"
+      :controls="'contimg'"
+      :show-center-play-btn="false"
       @loadedmetadata="handleLoadedMetaData"
     ></video>
     <div v-if="!playing" class="absolute left-0 top-0 w-full h-full bg-black">
@@ -43,7 +47,7 @@ onMounted(async () => {
         <wd-button
           plain
           custom-class="bg-transparent! text-white! w-20.5! min-w-20! h-8.25! border! border-solid! border-white!"
-          @click="handlePlay"
+          @click="handlePlay()"
         >
           <div class="flex items-center">
             <wd-icon name="play" size="22px"></wd-icon>

packages/app/src/pages/home/index.vue

@@ -29,16 +29,15 @@ import { useUserStore } from '../../store'
 defineOptions({
   name: 'Home',
 })
-const instance = getCurrentInstance()
 const userStore = useUserStore()
 const { userInfo } = storeToRefs(userStore)
-const { isLogined, isDesigner, features } = usePermissions()
+const { features } = usePermissions()
 const pageHelperRef = ref<ComponentExposed<typeof PageHelper>>()
 const { data: indexConfigsData, run: setIndexConfigsData } = useRequest(
   () => getSetIndexConfigs(),
   { initialData: { list: [] } },
 )
-const swiperData = ref<{ data: any; videoContext: UniNamespace.VideoContext; playing: boolean }[]>()
+const swiperData = ref<{ data: any }[]>()
 const swiperCurrent = ref(0)
 
 onShow(async () => {
@@ -48,8 +47,6 @@ onLoad(async () => {
   await setIndexConfigsData()
   swiperData.value = indexConfigsData.value.list.map((it) => ({
     data: it,
-    videoContext: uni.createVideoContext(`video-${it.id}`, instance),
-    playing: false,
   }))
 })
 const toAbout = () => {
@@ -58,10 +55,6 @@ const toAbout = () => {
 const handleSwiperChange = ({ detail: { current } }) => {
   swiperCurrent.value = current
 }
-const handlePlay = () => {
-  swiperData.value[swiperCurrent.value].videoContext.play()
-  swiperData.value[swiperCurrent.value].playing = true
-}
 const handleLike = async (options) => {
   await handleUpvoteClick({
     ...options,
@@ -90,20 +83,11 @@ onShareAppMessage(async ({ from, target }) => {
     <view class="bg-black w-full relative aspect-[1.26/1]">
       <swiper @change="handleSwiperChange">
         <template
-          v-for="{
-            data: { id, coverVideoImage, indexPromotionalVideoImage },
-            videoContext,
-            playing,
-          } of swiperData"
+          v-for="{ data: { id, coverVideoImage, indexPromotionalVideoImage } } of swiperData"
           :key="id"
         >
           <swiper-item>
-            <HomeBanner
-              :id="id"
-              :url="indexPromotionalVideoImage"
-              :cover="coverVideoImage"
-              :playing="playing"
-            />
+            <HomeBanner :id="id" :url="indexPromotionalVideoImage" :cover="coverVideoImage" />
             <!-- <div class="w-full h-full relative">
               <video
                 class="w-full h-full"