feat(相册): 添加上传功能并限制显示图片数量

- 新增上传照片功能入口，包括空状态和正常状态的显示
- 使用计算属性限制首页最多显示3张图片
- 优化相册空状态UI，添加相机图标和提示文字

@@ -20,8 +20,9 @@
 
 
       <!-- 相册内容 -->
       <!-- 相册内容 -->
       <view v-else-if="albumData.length > 0" class="grid grid-cols-2 gap-3">
       <view v-else-if="albumData.length > 0" class="grid grid-cols-2 gap-3">
+        <!-- 显示最多3张图片 -->
         <view
         <view
-          v-for="(item, index) in albumData"
+          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="handleMediaClick(item, albumData)"
@@ -39,20 +40,28 @@
           >
           >
             视频
             视频
           </view>
           </view>
-          <!-- 我的标识 -->
-          <!-- <view
-            v-if="item.is_my"
-            class="absolute top-2 right-2 px-2 py-1 bg-blue-500 bg-opacity-80 rounded text-white text-xs"
-          >
-            我的
-          </view> -->
+        </view>
+
+        <!-- 上传照片功能框 -->
+        <view
+          class="rounded-lg aspect-square relative cursor-pointer shadow-md bg-gray-100 flex flex-col items-center justify-center border-2 border-dashed border-gray-100 hover:border-blue-400 transition-colors"
+          @click="navigateToUpload"
+        >
+          <view class="text-gray-400 text-2xl mb-1">+</view>
+          <view class="text-gray-500 text-xs text-center">拍照留念</view>
         </view>
         </view>
       </view>
       </view>
 
 
       <!-- 空状态 -->
       <!-- 空状态 -->
-      <view v-else class="text-center py-8 text-gray-400">
-        <view class="text-sm">暂无相册内容</view>
-        <!-- <view class="text-xs mt-1">快去上传第一张照片吧~</view> -->
+      <view v-else class="grid grid-cols-2 gap-3">
+        <!-- 空状态时的上传功能框 -->
+        <view
+          class="rounded-lg aspect-square relative cursor-pointer shadow-md bg-gray-100 flex flex-col items-center justify-center border-2 border-dashed border-gray-100 hover:border-blue-400 transition-colors"
+          @click="navigateToUpload"
+        >
+          <view class="text-gray-400 text-3xl mb-2">📷</view>
+          <view class="text-gray-500 text-xs text-center px-2">上传第一张<br/>照片吧~</view>
+        </view>
       </view>
       </view>
     </view>
     </view>
 
 
@@ -105,7 +114,7 @@
 </template>
 </template>
 
 
 <script setup>
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed } from 'vue';
 import Taro, { useDidShow } from '@tarojs/taro';
 import Taro, { useDidShow } from '@tarojs/taro';
 import { Close } from '@nutui/icons-vue-taro';
 import { Close } from '@nutui/icons-vue-taro';
 import { useMediaPreview } from '@/composables/useMediaPreview';
 import { useMediaPreview } from '@/composables/useMediaPreview';
@@ -132,6 +141,11 @@ const {
 const albumData = ref([]);
 const albumData = ref([]);
 const loading = ref(false);
 const loading = ref(false);
 
 
+// 计算属性：显示最多3张图片
+const displayedAlbumData = computed(() => {
+  return albumData.value.slice(0, 3);
+});
+
 /**
 /**
  * 获取家庭相册数据
  * 获取家庭相册数据
  * @param {boolean} isRefresh - 是否为刷新操作，刷新时不显示loading状态
  * @param {boolean} isRefresh - 是否为刷新操作，刷新时不显示loading状态
@@ -142,7 +156,7 @@ const fetchAlbumData = async (isRefresh = false) => {
     if (!isRefresh) {
     if (!isRefresh) {
       loading.value = true;
       loading.value = true;
     }
     }
-    
+
     const response = await getPhotoListAPI({
     const response = await getPhotoListAPI({
       page: 0,
       page: 0,
       limit: 4 // 首页只显示4张
       limit: 4 // 首页只显示4张
@@ -170,6 +184,13 @@ const openAlbumList = () => {
   Taro.navigateTo({ url: '/pages/AlbumList/index' });
   Taro.navigateTo({ url: '/pages/AlbumList/index' });
 };
 };
 
 
+/**
+ * 跳转到上传媒体页面
+ */
+const navigateToUpload = () => {
+  Taro.navigateTo({ url: '/pages/UploadMedia/index' });
+};
+
 // 组件挂载时获取数据
 // 组件挂载时获取数据
 onMounted(() => {
 onMounted(() => {
   // fetchAlbumData();
   // fetchAlbumData();