refactor(媒体预览): 移除useMediaPreview composable并实现内联媒体处理逻辑

将原本通过useMediaPreview composable处理的媒体预览功能改为内联实现
在AlbumList和FamilyAlbum组件中直接处理图片预览和视频播放逻辑
调整ShareButton组件的右侧间距从40rpx改为30rpx

@@ -25,7 +25,7 @@
           v-for="(item, index) in displayedAlbumData"
           v-for="(item, index) in displayedAlbumData"
           :key="item.id || index"
           :key="item.id || index"
           class="rounded-lg overflow-hidden aspect-square relative cursor-pointer shadow-md"
           class="rounded-lg overflow-hidden aspect-square relative cursor-pointer shadow-md"
-          @click="handleMediaClick(item, albumData)"
+          @click="handleItemClick(item, index)"
         >
         >
           <image
           <image
             :src="item.media_type === 'VIDEO' ? item.thumbnail : item.media_url"
             :src="item.media_type === 'VIDEO' ? item.thumbnail : item.media_url"
@@ -67,14 +67,7 @@
       </view>
       </view>
     </view>
     </view>
 
 
-    <!-- 图片预览 -->
-    <nut-image-preview
-      v-model:show="previewVisible"
-      :images="previewImages"
-      :init-no="previewIndex"
-      :show-index="false"
-      @close="closePreview"
-    />
+
 
 
     <!-- 视频播放器 -->
     <!-- 视频播放器 -->
     <view
     <view
@@ -119,25 +112,80 @@
 import { ref, onMounted, computed } from 'vue';
 import { ref, onMounted, computed } from 'vue';
 import Taro, { useDidShow } from '@tarojs/taro';
 import Taro, { useDidShow } from '@tarojs/taro';
 import { Close, Photograph } from '@nutui/icons-vue-taro';
 import { Close, Photograph } from '@nutui/icons-vue-taro';
-import { useMediaPreview } from '@/composables/useMediaPreview';
+
 import { getPhotoListAPI } from '@/api/photo';
 import { getPhotoListAPI } from '@/api/photo';
 
 
-// 使用媒体预览 composable
-const {
-  previewVisible,
-  previewImages,
-  previewIndex,
-  videoVisible,
-  currentVideo,
-  videoId,
-  handleMediaClick,
-  closePreview,
-  closeVideo,
-  handleVideoPlay,
-  handleVideoPause,
-  handleFullscreenChange,
-  handleVideoError
-} = useMediaPreview();
+// 视频播放相关状态
+const videoVisible = ref(false);
+const currentVideo = ref(null);
+const videoId = ref(0);
+
+/**
+ * 处理媒体项点击事件
+ * @param {Object} item - 媒体项
+ * @param {number} index - 索引
+ */
+const handleItemClick = (item, index) => {
+  if (item.media_type === 'VIDEO') {
+    // 播放视频
+    currentVideo.value = {
+      url: item.media_url,
+      thumbnail: item.thumbnail
+    };
+    videoId.value = Date.now();
+    videoVisible.value = true;
+  } else {
+    // 预览图片
+    const imageUrls = albumData.value
+      .filter(media => media.media_type === 'IMAGE')
+      .map(media => media.media_url);
+    
+    Taro.previewImage({
+      urls: imageUrls,
+      current: item.media_url
+    });
+  }
+};
+
+/**
+ * 关闭视频播放器
+ */
+const closeVideo = () => {
+  videoVisible.value = false;
+  currentVideo.value = null;
+};
+
+/**
+ * 视频播放事件处理
+ */
+const handleVideoPlay = () => {
+  console.log('视频开始播放');
+};
+
+/**
+ * 视频暂停事件处理
+ */
+const handleVideoPause = () => {
+  console.log('视频暂停播放');
+};
+
+/**
+ * 视频全屏变化事件处理
+ */
+const handleFullscreenChange = () => {
+  console.log('视频全屏状态变化');
+};
+
+/**
+ * 视频错误事件处理
+ */
+const handleVideoError = (error) => {
+  console.error('视频播放错误:', error);
+  Taro.showToast({
+    title: '视频播放失败',
+    icon: 'none'
+  });
+};
 
 
 // 家庭相册数据
 // 家庭相册数据
 const albumData = ref([]);
 const albumData = ref([]);

 <!--
 <!--
  * @Date: 2025-09-03 14:34:58
  * @Date: 2025-09-03 14:34:58
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-09-08 11:50:44
+ * @LastEditTime: 2025-09-15 12:52:03
  * @FilePath: /lls_program/src/components/ShareButton/index.vue
  * @FilePath: /lls_program/src/components/ShareButton/index.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
@@ -50,7 +50,7 @@ const handleSharePoster = () => {
 .share-button-container {
 .share-button-container {
   position: fixed;
   position: fixed;
   top: 40rpx;
   top: 40rpx;
-  right: 40rpx;
+  right: 30rpx;
   z-index: 1000;
   z-index: 1000;
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;

@@ -66,14 +66,7 @@
       </view>
       </view>
     </view>
     </view>
 
 
-    <!-- 图片预览 -->
-    <nut-image-preview
-      v-model:show="previewVisible"
-      :images="previewImages"
-      :init-no="previewIndex"
-      :show-index="false"
-      @close="closePreview"
-    />
+
 
 
     <!-- 视频播放器 -->
     <!-- 视频播放器 -->
     <view
     <view
@@ -120,28 +113,56 @@
 import { ref, onMounted } from 'vue';
 import { ref, onMounted } from 'vue';
 import Taro, { useDidShow } from '@tarojs/taro';
 import Taro, { useDidShow } from '@tarojs/taro';
 import { Photograph, Close } from '@nutui/icons-vue-taro';
 import { Photograph, Close } from '@nutui/icons-vue-taro';
-import { useMediaPreview } from '@/composables/useMediaPreview';
+
 import { getPhotoListAPI, deletePhotoAPI } from '@/api/photo';
 import { getPhotoListAPI, deletePhotoAPI } from '@/api/photo';
 
 
 // 响应式数据
 // 响应式数据
 const albumList = ref([]);
 const albumList = ref([]);
 
 
-// 使用媒体预览 composable
-const {
-  previewVisible,
-  previewImages,
-  previewIndex,
-  videoVisible,
-  currentVideo,
-  videoId,
-  handleMediaClick,
-  closePreview,
-  closeVideo,
-  handleVideoPlay,
-  handleVideoPause,
-  handleFullscreenChange,
-  handleVideoError,
-} = useMediaPreview();
+// 视频播放相关状态
+const videoVisible = ref(false);
+const currentVideo = ref(null);
+const videoId = ref(0);
+
+/**
+ * 关闭视频播放器
+ */
+const closeVideo = () => {
+  videoVisible.value = false;
+  currentVideo.value = null;
+};
+
+/**
+ * 视频播放事件处理
+ */
+const handleVideoPlay = () => {
+  console.log('视频开始播放');
+};
+
+/**
+ * 视频暂停事件处理
+ */
+const handleVideoPause = () => {
+  console.log('视频暂停播放');
+};
+
+/**
+ * 视频全屏变化事件处理
+ */
+const handleFullscreenChange = () => {
+  console.log('视频全屏状态变化');
+};
+
+/**
+ * 视频错误事件处理
+ */
+const handleVideoError = (error) => {
+  console.error('视频播放错误:', error);
+  Taro.showToast({
+    title: '视频播放失败',
+    icon: 'none'
+  });
+};
 
 
 // 删除相关状态
 // 删除相关状态
 const currentDeleteItem = ref(null);
 const currentDeleteItem = ref(null);
@@ -195,7 +216,25 @@ const fetchAlbumList = async () => {
  * @param {number} index - 项目索引
  * @param {number} index - 项目索引
  */
  */
 const handleItemClick = (item, index) => {
 const handleItemClick = (item, index) => {
-  handleMediaClick(item, albumList.value);
+  if (item.type === 'video') {
+    // 播放视频
+    currentVideo.value = {
+      url: item.url,
+      thumbnail: item.thumbnail
+    };
+    videoId.value = Date.now();
+    videoVisible.value = true;
+  } else {
+    // 预览图片
+    const imageUrls = albumList.value
+      .filter(media => media.type === 'image')
+      .map(media => media.url);
+    
+    Taro.previewImage({
+      urls: imageUrls,
+      current: item.url
+    });
+  }
 };
 };
 
 
 /**
 /**