feat(相册): 将家庭相册功能提取为独立组件

将原本在Dashboard页面中的家庭相册功能提取为独立的FamilyAlbum组件优化代码结构，提高可维护性和复用性

feat(相册): 将家庭相册功能提取为独立组件
将原本在Dashboard页面中的家庭相册功能提取为独立的FamilyAlbum组件优化代码结构，提高可维护性和复用性
hookehuyr
Commit d8e942e4607a491ea8c2ca4484182bfa55d8b193 d8e942e4 1 parent 4f1a206e
Showing 3 changed files with 135 additions and 108 deletions
components.d.ts
src/components/FamilyAlbum.vue
src/pages/Dashboard/index.vue
--- a/components.d.ts
View file @d8e942e
+++ b/components.d.ts
View file @d8e942e
@@ -11,6 +11,7 @@ declare module 'vue' {
     AppHeader: typeof import('./src/components/AppHeader.vue')['default']
     BackToTop: typeof import('./src/components/BackToTop.vue')['default']
     BottomNav: typeof import('./src/components/BottomNav.vue')['default']
+    FamilyAlbum: typeof import('./src/components/FamilyAlbum.vue')['default']
     GlassCard: typeof import('./src/components/GlassCard.vue')['default']
     NavBar: typeof import('./src/components/navBar.vue')['default']
     NutActionSheet: typeof import('@nutui/nutui-taro')['ActionSheet']
--- a/src/components/FamilyAlbum.vue 0 → 100644
View file @d8e942e
+++ b/src/components/FamilyAlbum.vue 0 → 100644
View file @d8e942e
+<template>
+  <view>
+    <!-- Family album -->
+    <view class="p-5 mt-4 mb-6 bg-white rounded-xl shadow-md mx-4">
+      <view class="flex justify-between items-center mb-2">
+        <h2 class="font-medium text-lg">多彩瞬间</h2>
+        <view class="text-blue-500 flex items-center text-xs" @click="openAlbumList">
+          查看更多
+        </view>
+      </view>
+      <p class="text-sm text-gray-500 mb-3">记录每一个家庭活动瞬间</p>
+      <view class="grid grid-cols-2 gap-3">
+        <view
+          v-for="(item, index) in albumData"
+          :key="index"
+          class="rounded-lg overflow-hidden h-32 relative cursor-pointer"
+          @click="handleMediaClick(item, albumData)"
+        >
+          <image
+            :src="item.type === 'video' ? item.thumbnail : item.url"
+            alt="家庭活动照片"
+            class="w-full h-full object-cover rounded-lg"
+          />
+          <!-- 视频标识 -->
+          <view
+            v-if="item.type === 'video'"
+            class="absolute top-2 left-2 px-2 py-1 bg-black bg-opacity-70 rounded text-white text-xs"
+          >
+            视频
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 图片预览 -->
+    <nut-image-preview
+      v-model:show="previewVisible"
+      :images="previewImages"
+      :init-no="previewIndex"
+      :show-index="false"
+      @close="closePreview"
+    />
+
+    <!-- 视频播放器 -->
+    <view
+      v-if="videoVisible"
+      class="fixed inset-0 bg-black"
+      style="z-index: 9999;"
+      @click="closeVideo"
+    >
+      <!-- 关闭按钮 -->
+      <view
+        @click.stop="closeVideo"
+        class="absolute top-4 right-4 w-10 h-10 bg-black bg-opacity-50 rounded-full flex items-center justify-center"
+        style="z-index: 10000;"
+      >
+        <Close size="24" class="text-white" />
+      </view>
+
+      <!-- 视频播放器 -->
+      <video
+        v-if="currentVideo"
+        :id="'family-album-video-' + videoId"
+        :src="currentVideo.url"
+        :poster="currentVideo.thumbnail"
+        :controls="true"
+        :autoplay="false"
+        :show-center-play-btn="true"
+        :show-play-btn="true"
+        :object-fit="'contain'"
+        :show-fullscreen-btn="true"
+        style="width: 100vw; height: 50vh; position: absolute; top: 20vh; left: 0;"
+        @click.stop
+        @play="handleVideoPlay"
+        @pause="handleVideoPause"
+        @error="handleVideoError"
+        @fullscreenchange="handleFullscreenChange"
+      />
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Taro from '@tarojs/taro';
+import { Close } from '@nutui/icons-vue-taro';
+import { useMediaPreview } from '@/composables/useMediaPreview';
+
+// 使用媒体预览 composable
+const {
+  previewVisible,
+  previewImages,
+  previewIndex,
+  videoVisible,
+  currentVideo,
+  videoId,
+  handleMediaClick,
+  closePreview,
+  closeVideo,
+  handleVideoPlay,
+  handleVideoPause,
+  handleFullscreenChange,
+  handleVideoError
+} = useMediaPreview();
+
+// 家庭相册数据
+const albumData = ref([
+  {
+    type: 'image',
+    url: 'https://cdn.ipadbiz.cn/hager/0513-1_FsxMk28AGz6N_D1zZFFOl_EaRdss.png',
+  },
+  {
+    type: 'video',
+    url: 'https://vjs.zencdn.net/v/oceans.mp4',
+    thumbnail: 'https://cdn.ipadbiz.cn/hager/0513-1_FsxMk28AGz6N_D1zZFFOl_EaRdss.png',
+  }
+]);
+
+/**
+ * 打开相册列表页面
+ */
+const openAlbumList = () => {
+  Taro.navigateTo({ url: '/pages/AlbumList/index' });
+};
+</script>
+
+<style lang="less" scoped>
+// 组件样式
+</style>
\ No newline at end of file
--- a/src/pages/Dashboard/index.vue
View file @d8e942e
+++ b/src/pages/Dashboard/index.vue
View file @d8e942e
@@ -138,36 +138,7 @@
     <RankingCard ref="rankingCardRef" :onViewMore="openFamilyRank" />
     <!-- Family album -->
-    <view class="p-5 mt-4 mb-6 bg-white rounded-xl shadow-md mx-4">
+    <FamilyAlbum />
-      <view class="flex justify-between items-center mb-2">
-        <h2 class="font-medium text-lg">多彩瞬间</h2>
-        <view class="text-blue-500 flex items-center text-xs" @click="openAlbumList">
-          查看更多
-        </view>
-      </view>
-      <p class="text-sm text-gray-500 mb-3">记录每一个家庭活动瞬间</p>
-      <view class="grid grid-cols-2 gap-3">
-        <view
-          v-for="(item, index) in albumData"
-          :key="index"
-          class="rounded-lg overflow-hidden h-32 relative cursor-pointer"
-          @click="handleMediaClick(item, albumData)"
-        >
-          <image
-            :src="item.type === 'video' ? item.thumbnail : item.url"
-            alt="家庭活动照片"
-            class="w-full h-full object-cover rounded-lg"
-          />
-          <!-- 视频标识 -->
-          <view
-            v-if="item.type === 'video'"
-            class="absolute top-2 left-2 px-2 py-1 bg-black bg-opacity-70 rounded text-white text-xs"
-          >
-            视频
-          </view>
-        </view>
-      </view>
-    </view>
     <BottomNav />
@@ -180,65 +151,21 @@
       @click="handleAdClick"
     />
-    <!-- 图片预览 -->
-    <nut-image-preview
-      v-model:show="previewVisible"
-      :images="previewImages"
-      :init-no="previewIndex"
-      :show-index="false"
-      @close="closePreview"
-    />
-
-    <!-- 视频播放器 -->
-    <view
-      v-if="videoVisible"
-      class="fixed inset-0 bg-black"
-      style="z-index: 9999;"
-      @click="closeVideo"
-    >
-      <!-- 关闭按钮 -->
-      <view
-        @click.stop="closeVideo"
-        class="absolute top-4 right-4 w-10 h-10 bg-black bg-opacity-50 rounded-full flex items-center justify-center"
-        style="z-index: 10000;"
-      >
-        <Close size="24" class="text-white" />
-      </view>
-      <!-- 视频播放器 -->
-      <video
-        v-if="currentVideo"
-        :id="'dashboard-video-' + videoId"
-        :src="currentVideo.url"
-        :poster="currentVideo.thumbnail"
-        :controls="true"
-        :autoplay="false"
-        :show-center-play-btn="true"
-        :show-play-btn="true"
-        :object-fit="'contain'"
-        :show-fullscreen-btn="true"
-        style="width: 100vw; height: 50vh; position: absolute; top: 20vh; left: 0;"
-        @click.stop
-        @play="handleVideoPlay"
-        @pause="handleVideoPause"
-        @error="handleVideoError"
-        @fullscreenchange="handleFullscreenChange"
-      />
-    </view>
   </view>
 </template>
 <script setup>
 import { ref, computed, onMounted } from 'vue';
 import Taro, { useDidShow, useReady } from '@tarojs/taro';
-import { Setting, Photograph, Close, Category } from '@nutui/icons-vue-taro';
+import { Setting, Photograph, Category } from '@nutui/icons-vue-taro';
 import BottomNav from '../../components/BottomNav.vue';
 import TotalPointsDisplay from '@/components/TotalPointsDisplay.vue';
 import PointsCollector from '@/components/PointsCollector.vue'
 import WeRunAuth from '@/components/WeRunAuth.vue'
 import RankingCard from '@/components/RankingCard.vue'
 import AdOverlay from '@/components/AdOverlay.vue'
-import { useMediaPreview } from '@/composables/useMediaPreview';
+import FamilyAlbum from '@/components/FamilyAlbum.vue';
 // 默认家庭封面图
 const defaultFamilyCover = 'https://cdn.ipadbiz.cn/lls_prog/images/default-family-cover.png';
 // 默认头像
@@ -260,35 +187,7 @@ const familySlogn = ref('')
 const familyCover = ref('')
 const familyOwner = ref(false);
-// 使用媒体预览 composable
+
-const {
-  previewVisible,
-  previewImages,
-  previewIndex,
-  videoVisible,
-  currentVideo,
-  videoId,
-  handleMediaClick,
-  closePreview,
-  closeVideo,
-  handleVideoPlay,
-  handleVideoPause,
-  handleFullscreenChange,
-  handleVideoError
-} = useMediaPreview();
-
-// 家庭相册数据
-const albumData = ref([
-  {
-    type: 'image',
-    url: 'https://cdn.ipadbiz.cn/hager/0513-1_FsxMk28AGz6N_D1zZFFOl_EaRdss.png',
-  },
-  {
-    type: 'video',
-    url: 'https://vjs.zencdn.net/v/oceans.mp4',
-    thumbnail: 'https://cdn.ipadbiz.cn/hager/0513-1_FsxMk28AGz6N_D1zZFFOl_EaRdss.png',
-  }
-]);
 // 广告遮罩层数据
 const adObj = ref({})
@@ -364,9 +263,7 @@ const goToProfile = () => {
   Taro.navigateTo({ url: '/pages/EditFamily/index' });
 };
-const openAlbumList = () => {
+
-  Taro.navigateTo({ url: '/pages/AlbumList/index' });
-};
 /**
  * 打开拍照上传页面