feat(gallery): 实现相册功能对接后端API，替换静态模拟数据

1.  重构相册页面，使用真实的Halo图片插件API获取分组与图片数据
2.  新增图片预览工具函数，支持大图预览
3.  更新滚动加载hook，补充响应式原始数据与加载状态控制
4.  调整相册面板组件参数与样式，适配真实数据展示
5.  修复开发环境接口地址配置

src/components/uh-gallery-panel/uh-gallery-panel.vue

@@ -3,10 +3,12 @@ import { queryPhotos } from '@/api/halo-plugin/photo'
 import { completeUrl } from '@/utils/url'
 import { useHaloScroll } from '@/hooks/useHaloScroll'
 import { random } from '@/utils/base/random'
+import { preview } from '@/utils/imageHelper'
 import type { IPhoto, IQueryPhotosRequest } from '@/api/halo-plugin/photo'
 
 interface IProps {
-  groupName: string
+  groupMetadataName: string
+  groupDisplayName: string
 }
 
 const props = defineProps<IProps>()
@@ -16,6 +18,7 @@ const emits = defineEmits<{
 }>()
 
 const {
+  response, // 响应式的原始数据响应
   list, // 响应式的数据列表
   loading, // 是否加载中
   finished, // 是否已全部加载
@@ -27,6 +30,7 @@ const {
   params: {
     page: 1,
     size: 12,
+    group: props.groupMetadataName.trim() ?? undefined,
   },
 })
 
@@ -36,61 +40,62 @@ function getImageItemClass() {
   const randomIndex = random(0, imageItemClass.length - 1)
   return imageItemClass[randomIndex]
 }
+
+function handlePreview(item: IPhoto) {
+  preview(completeUrl(item.spec.url), list.value.map(item => completeUrl(item.spec.url)))
+}
 </script>
 
 <template>
   <!-- 相册列表：根据分组显示 -->
-  <view class="uh-backdrop-blur-xs fixed inset-0 z-110 flex items-center justify-center bg-black/20">
+  <view
+    class="uh-backdrop-blur-xs fixed inset-0 z-110 flex items-center justify-center bg-black/20"
+    @click.stop="emits('close')"
+  >
     <wd-transition :show="true" :lazy-render="true" :duration="300" name="slide-left">
-      <view class="box-border w-[88vw] rounded-2xl bg-page2 p-4">
+      <view class="box-border w-[88vw] rounded-2xl bg-white p-4" @click.stop>
         <view class="box-border w-full flex shrink-0 items-center justify-between gap-x-4">
           <view class="text-gray-900 font-bold">
-            {{ props.groupName }}
+            {{ props.groupDisplayName }}
           </view>
           <view class="shrink-0">
             <wd-icon name="close-circle" size="24px" color="#1A1A1A" @click="emits('close')" />
           </view>
         </view>
 
-        <view class="mt-4 w-full">
+        <view class="mt-2 w-full">
           <scroll-view
-            v-if="list" class="h-[56vh] w-full" scroll-y :refresher-enabled="true"
+            v-if="list" class="h-[60vh] w-full" scroll-y :refresher-enabled="true"
             :refresher-triggered="loading" @scrolltolower="loadMore" @refresherrefresh="refresh"
           >
-            <view class="w-full flex flex-wrap gap-y-4">
-              <view
-                v-for="(item) in list" :key="item.metadata.name"
-                class="box-border w-1/2 overflow-hidden px-2"
-                :class="[getImageItemClass()]"
-              >
+            <view class="grid grid-cols-2 box-border w-full gap-x-3 gap-y-2 overflow-hidden px-1">
+              <view v-for="(item) in list" :key="item.metadata.name" class="box-border w-full">
                 <image
-                  class="uh-shadow-xs w-full border-2 border-white rounded-xl border-solid bg-white/80"
-                  :src="completeUrl(item.spec.url)"
-                  mode="widthFix"
+                  class="uh-shadow-xs box-border h-32 w-full border-2 border-white rounded-xl border-solid bg-white/80"
+                  :src="completeUrl(item.spec.url)" mode="aspectFill" @click="handlePreview(item)"
                 />
               </view>
             </view>
           </scroll-view>
-          <view v-else class="h-[56vh] flex items-center justify-center">
+          <view v-else class="h-[60vh] flex items-center justify-center">
             <wd-empty tip="暂无数据">
               <template #image>
                 <wd-icon name="empty" color="#1A1A1A" :size="52" />
               </template>
             </wd-empty>
           </view>
-          <view
-            v-if="loading || error || finished"
-            class="mt-4 w-full flex items-center justify-center text-xs text-gray-900"
-          >
-            <wd-loading v-if="loading" text="加载中..." direction="horizontal" color="#1A1A1A" :size="16" />
-            <view
-              v-else-if="error"
-              class="w-full rounded-lg bg-gray-900 py-1.5 text-center text-xs text-white"
-            >
-              <wd-icon name="refresh" :size="14" /> 加载失败，点击刷新试试
+          <view class="mt-4 w-full flex items-center justify-center gap-x-2 text-xs text-gray-900">
+            <view class="text-xs text-gray-900">
+              共 {{ response?.total || 0 }} 张 已加载 {{ list.length }} 张
             </view>
-            <view v-else-if="finished" class="text-black/60">
-              数据已全部加载，没有更多了
+            <view v-if="loading || error || finished">
+              <wd-loading v-if="loading" text="加载中..." direction="horizontal" color="#1A1A1A" :size="16" />
+              <view v-else-if="error" class="w-full rounded-lg bg-gray-900 py-1.5 text-center text-xs text-white">
+                <wd-icon name="refresh" :size="14" /> 加载失败，点击刷新试试
+              </view>
+              <view v-else-if="finished" class="text-xs text-gray-900">
+                数据已全部加载
+              </view>
             </view>
           </view>
         </view>