feat(love): 重构恋爱模块适配新接口格式与分页

1.  重构恋爱相册、清单、故事页面的数据处理逻辑，新增数据加载状态管理
2.  更新API类型定义，新增元数据、spec字段支持与分页响应格式
3.  替换原生导航栏为自定义导航组件，统一页面样式
4.  优化列表渲染逻辑，使用预处理后的展示数据类型，简化模板代码
5.  调整恋爱故事页面的key命名，从story改为stories

src/api/types/uni-halo.ts

@@ -405,6 +405,12 @@ export interface ILoveAlbum {
   locked?: boolean
   cover?: string
   photos?: ILovePhoto[]
+  /** Halo 资源元数据(接口返回 metadata) */
+  metadata?: {
+    name?: string
+    creationTimestamp?: string
+    [key: string]: unknown
+  }
   [key: string]: unknown
 }
 
@@ -420,7 +426,14 @@ export interface ILoveAlbumListReq {
   [key: string]: unknown
 }
 
-export type ILoveAlbumListRes = ILoveAlbum[]
+/** 恋爱相册列表响应(插件分页包装) */
+export interface ILoveAlbumListRes {
+  page?: number
+  size?: number
+  total?: number
+  hasNext?: boolean
+  items: ILoveAlbum[]
+}
 
 export interface ILoveAlbumDetailReq {
   [key: string]: unknown
@@ -439,6 +452,32 @@ export interface ILoveDailyItem {
   id?: string
   content?: string
   date?: string
+  /** Halo 资源元数据(接口返回 metadata) */
+  metadata?: {
+    name?: string
+    [key: string]: unknown
+  }
+  /** 清单项详情(接口返回 spec) */
+  spec?: ILoveDailyItemSpec
+  [key: string]: unknown
+}
+
+/** 恋爱清单项 spec(对齐插件 LoveDailyItemSpec) */
+export interface ILoveDailyItemSpec {
+  /** 清单标题 */
+  title?: string
+  /** 清单内容 */
+  content?: string
+  /** 状态:未开始/进行中/已完成 */
+  status?: 'wait' | 'doing' | 'complete'
+  /** 计划时间 */
+  planDate?: string
+  /** 完成时间 */
+  completeDate?: string
+  /** 完成感想 */
+  completeRemark?: string
+  /** 回忆图片 */
+  images?: string[]
   [key: string]: unknown
 }
 
@@ -448,13 +487,44 @@ export interface ILoveDailyItemListReq {
   [key: string]: unknown
 }
 
-export type ILoveDailyItemListRes = ILoveDailyItem[]
+/** 恋爱清单列表响应(插件分页包装) */
+export interface ILoveDailyItemListRes {
+  page?: number
+  size?: number
+  total?: number
+  hasNext?: boolean
+  items: ILoveDailyItem[]
+}
 
 export interface ILoveStory {
   id?: string
   title?: string
   content?: string
   date?: string
+  /** Halo 资源元数据(接口返回 metadata) */
+  metadata?: {
+    name?: string
+    [key: string]: unknown
+  }
+  /** 故事详情(接口返回 spec) */
+  spec?: ILoveStorySpec
+  [key: string]: unknown
+}
+
+/** 恋爱故事 spec(对齐插件 LoveStorySpec) */
+export interface ILoveStorySpec {
+  /** 故事标题 */
+  title?: string
+  /** 故事内容(HTML) */
+  content?: string
+  /** 故事日期 */
+  date?: string
+  /** 故事地点 */
+  location?: string
+  /** 故事图片 */
+  images?: string[]
+  /** 排序优先级(越大越靠前) */
+  priority?: number
   [key: string]: unknown
 }
 
@@ -556,4 +626,11 @@ export interface IMiniProgramLinkSubmissionForm {
   email?: string
 }
 
-export type ILoveStoryListRes = ILoveStory[]
+/** 恋爱故事列表响应(插件分页包装) */
+export interface ILoveStoryListRes {
+  page?: number
+  size?: number
+  total?: number
+  hasNext?: boolean
+  items: ILoveStory[]
+}

src/pages-blog/love/album.vue

@@ -10,11 +10,13 @@ import { getLoveAlbumByName, getLoveAlbums } from '@/api/uni-halo'
 import { useAppConfigStore } from '@/store/appConfig'
 import { checkImageUrl } from '@/utils/url'
 import { getCache, setCache } from '@/utils/storage'
-import type { ILoveAlbum } from '@/api/types/uni-halo'
+import { DataLoadingStatusEnum, useDataLoadingStatus } from '@/hooks/useDataLoadingStatus'
+import type { ILoveAlbum, ILovePhoto } from '@/api/types/uni-halo'
 
 definePage({
   style: {
     navigationBarTitleText: '恋爱相册',
+    navigationStyle: 'custom',
     enablePullDownRefresh: true,
   },
 })
@@ -27,18 +29,48 @@ const UNLOCKED_ALBUMS_CACHE_KEY = 'unlocked_albums'
 /** 解锁 token 有效期(后端默认 30 分钟) */
 const ALBUM_TOKEN_TTL_SECONDS = 30 * 60
 
+/* ---------------- 展示层类型 ---------------- */
+/** 相册展示卡片(script 预处理后的干净展示数据) */
+interface ILoveAlbumCard {
+  /** 相册 key(metadata.name,用于解锁/详情请求) */
+  name: string
+  displayName: string
+  locked: boolean
+  photoCount: number
+  /** 封面图(已预处理 URL) */
+  image: string
+  /** 创建时间(格式化展示) */
+  takeTime: string
+  /** 相册照片(解锁后填充) */
+  photos: ILovePhoto[]
+}
+
+/** 相册卡片映射:字段取值 + 封面/时间预处理(模板不感知原始接口结构) */
+function mapAlbumCard(item: ILoveAlbum): ILoveAlbumCard {
+  const creationTimestamp = item.metadata?.creationTimestamp
+  return {
+    name: item.name || item.metadata?.name || '',
+    displayName: item.displayName || item.title || '',
+    locked: !!item.locked,
+    photoCount: Number(item.photoCount) || 0,
+    image: checkImageUrl(item.cover || ''),
+    takeTime: creationTimestamp ? dayjs(creationTimestamp).format('DD/MM/YYYY') : '',
+    photos: item.photos || [],
+  }
+}
+
 /* ---------------- 状态 ---------------- */
-const loading = ref<'loading' | 'success' | 'error'>('loading')
-const dataList = ref<(ILoveAlbum & { image?: string, takeTime?: string })[]>([])
+const { loadingStatus, updateLoadingStatus } = useDataLoadingStatus()
+const dataList = ref<ILoveAlbumCard[]>([])
 const unlockedAlbums = ref<Record<string, string>>({})
 
 /** 密码解锁弹窗 */
 const showUnlockModal = ref(false)
-const currentUnlockAlbum = ref<(ILoveAlbum & { image?: string }) | null>(null)
+const currentUnlockAlbum = ref<ILoveAlbumCard | null>(null)
 
 /** 图片查看弹窗 */
 const showPhotoViewer = ref(false)
-const currentViewerAlbum = ref<(ILoveAlbum & { image?: string }) | null>(null)
+const currentViewerAlbum = ref<ILoveAlbumCard | null>(null)
 const viewerLoading = ref(false)
 
 const unlockAlbumName = computed(() => currentUnlockAlbum.value?.displayName || '')
@@ -70,30 +102,18 @@ function handleSaveUnlockedAlbums() {
 
 /* ---------------- 数据加载 ---------------- */
 async function handleGetData() {
-  loading.value = 'loading'
+  updateLoadingStatus(DataLoadingStatusEnum.Loading)
   try {
     const res = await getLoveAlbums({})
-    if (res.data && (res.data as unknown as { items?: unknown[] }).items) {
-      dataList.value = ((res.data as unknown as { items: ILoveAlbum[] }).items || []).map((item) => {
-        const creationTimestamp = (item.metadata as unknown as { creationTimestamp?: string } | undefined)?.creationTimestamp
-        return {
-          ...item,
-          image: checkImageUrl(item.cover),
-          takeTime: creationTimestamp ? dayjs(creationTimestamp).format('DD/MM/YYYY') : '',
-        }
-      })
-      loading.value = 'success'
+    const items = res.data?.items || []
+    dataList.value = items.map(mapAlbumCard)
+    updateLoadingStatus(dataList.value.length === 0 ? DataLoadingStatusEnum.Empty : DataLoadingStatusEnum.Success)
+    if (dataList.value.length > 0)
       handleLoadUnlockedAlbumPhotos()
-    }
-    else {
-      dataList.value = []
-      loading.value = 'success'
-    }
   }
   catch (e) {
     console.error('获取相册失败', e)
-    loading.value = 'error'
-    uni.showToast({ icon: 'none', title: '加载失败，请下拉刷新重试！' })
+    updateLoadingStatus(DataLoadingStatusEnum.Error)
   }
   finally {
     setTimeout(() => {
@@ -105,12 +125,12 @@ async function handleGetData() {
 /** 加载已解锁相册的照片 */
 async function handleLoadUnlockedAlbumPhotos() {
   for (const item of dataList.value) {
-    if (item.locked && unlockedAlbums.value[item.name || '']) {
-      const token = unlockedAlbums.value[item.name || '']
+    const token = unlockedAlbums.value[item.name]
+    if (item.locked && token) {
       try {
-        const detail = await getLoveAlbumByName(item.name || '', { token })
+        const detail = await getLoveAlbumByName(item.name, { token })
         if (detail.locked) {
-          delete unlockedAlbums.value[item.name || '']
+          delete unlockedAlbums.value[item.name]
           handleSaveUnlockedAlbums()
         }
         else if (detail.photos) {
@@ -126,8 +146,8 @@ async function handleLoadUnlockedAlbumPhotos() {
 }
 
 /* ---------------- 交互 ---------------- */
-function handleOnAlbumClick(item: ILoveAlbum & { image?: string }) {
-  if (item.locked && !unlockedAlbums.value[item.name || '']) {
+function handleOnAlbumClick(item: ILoveAlbumCard) {
+  if (item.locked && !unlockedAlbums.value[item.name]) {
     currentUnlockAlbum.value = item
     showUnlockModal.value = true
     return
@@ -135,18 +155,18 @@ function handleOnAlbumClick(item: ILoveAlbum & { image?: string }) {
   handleOpenPhotoViewer(item)
 }
 
-async function handleOpenPhotoViewer(item: ILoveAlbum & { image?: string }) {
+async function handleOpenPhotoViewer(item: ILoveAlbumCard) {
   currentViewerAlbum.value = item
   showPhotoViewer.value = true
-  if (item.photos && item.photos.length > 0)
+  if (item.photos.length > 0)
     return
   viewerLoading.value = true
   try {
-    const token = unlockedAlbums.value[item.name || ''] || ''
-    const detail = await getLoveAlbumByName(item.name || '', { token })
+    const token = unlockedAlbums.value[item.name] || ''
+    const detail = await getLoveAlbumByName(item.name, { token })
     if (detail) {
       if (detail.locked) {
-        delete unlockedAlbums.value[item.name || '']
+        delete unlockedAlbums.value[item.name]
         handleSaveUnlockedAlbums()
       }
       else if (detail.photos) {
@@ -170,7 +190,7 @@ function handleOnUnlockSuccess(data: { albumKey: string, token: string, photos:
 
   const albumIndex = dataList.value.findIndex(a => a.name === data.albumKey)
   if (albumIndex !== -1) {
-    dataList.value[albumIndex].photos = data.photos as typeof dataList.value[number]['photos']
+    dataList.value[albumIndex].photos = data.photos as ILovePhoto[]
     dataList.value[albumIndex].locked = false
   }
   currentUnlockAlbum.value = null
@@ -181,7 +201,6 @@ function handleOnUnlockSuccess(data: { albumKey: string, token: string, photos:
 
 /* ---------------- 生命周期 ---------------- */
 onLoad(() => {
-  uni.setNavigationBarTitle({ title: '恋爱相册' })
   handleRestoreUnlockedAlbums()
   handleGetData()
 })
@@ -193,52 +212,38 @@ onPullDownRefresh(() => {
 
 <template>
   <view class="app-page box-border min-h-screen w-screen flex flex-col pb-[144rpx]" style="background: linear-gradient(-135deg, rgb(247 149 51 / 10%), rgb(243 112 85 / 10%) 15%, rgb(239 78 123 / 10%) 30%, rgb(161 102 171 / 10%) 44%, rgb(80 115 184 / 10%) 58%, rgb(16 152 173 / 10%) 72%, rgb(7 179 155 / 10%) 86%, rgb(109 186 130 / 10%));">
-    <view v-if="loading !== 'success'" class="loading-wrap box-border h-[60vh] w-screen flex flex-col items-center justify-center p-9">
-      <view v-if="loading === 'loading'" class="loading">
-        <view class="loadig-text mt-7 text-[28rpx] text-[#56bbf9]">
-          相册正在努力加载中啦~
-        </view>
-      </view>
-      <view v-else class="loading-error w-full">
-        <wd-empty description="啊偶,加载失败了呢~">
-          <wd-button size="small" plain type="danger" @click="handleGetData()">
-            刷新试试
-          </wd-button>
-        </wd-empty>
-      </view>
-    </view>
+    <!-- 自定义导航 -->
+    <uh-navbar default-title="恋爱相册" title-color="text-gray-900" />
 
-    <!-- 内容区域 -->
-    <view v-else class="app-page-content">
-      <view v-if="dataList.length === 0" class="h-[60vh] w-full flex items-center justify-center content-empty">
-        <wd-empty description="相册暂时还没有数据~">
-          <wd-button size="small" plain type="primary" @click="handleGetData()">
-            刷新试试
-          </wd-button>
-        </wd-empty>
-      </view>
+    <!-- 加载/错误/空占位(状态机) -->
+    <uh-data-loading
+      v-if="loadingStatus !== DataLoadingStatusEnum.Success"
+      :loading-status="loadingStatus"
+      min-height="60vh"
+      empty-text="相册暂时还没有数据~"
+      @refresh="handleGetData"
+    />
 
-      <!-- 相册列表(两列网格) -->
-      <view v-else class="album-list box-border flex flex-wrap px-6">
-        <view v-for="(item, index) in dataList" :key="index" class="album-card mb-6 box-border overflow-hidden rounded-xl bg-white shadow-sm" :class="index % 2 === 0 ? 'mr-6 w-[calc((100%-24rpx)/2)]' : 'w-[calc((100%-24rpx)/2)]'" @click="handleOnAlbumClick(item)">
-          <view class="album-cover-wrap relative h-[320rpx] w-full">
-            <image class="album-cover h-full w-full" :src="item.image" mode="aspectFill" lazy-load />
-            <view v-if="item.locked && !unlockedAlbums[item.name || '']" class="album-lock-mask absolute left-0 top-0 h-full w-full flex flex-col items-center justify-center bg-black/45">
-              <view class="lock-icon text-[64rpx]">
-                🔒
-              </view>
-              <view class="lock-tip mt-3 text-[26rpx] text-white">
-                已加密
-              </view>
+    <!-- 相册列表(两列网格) -->
+    <view v-else class="album-list box-border flex flex-wrap px-6">
+      <view v-for="(item, index) in dataList" :key="item.name" class="album-card mb-6 box-border overflow-hidden rounded-xl bg-white shadow-sm" :class="index % 2 === 0 ? 'mr-6 w-[calc((100%-24rpx)/2)]' : 'w-[calc((100%-24rpx)/2)]'" @click="handleOnAlbumClick(item)">
+        <view class="album-cover-wrap relative h-[320rpx] w-full">
+          <image class="album-cover h-full w-full" :src="item.image" mode="aspectFill" lazy-load />
+          <view v-if="item.locked && !unlockedAlbums[item.name]" class="album-lock-mask absolute left-0 top-0 h-full w-full flex flex-col items-center justify-center bg-black/45">
+            <view class="lock-icon text-[64rpx]">
+              🔒
+            </view>
+            <view class="lock-tip mt-3 text-[26rpx] text-white">
+              已加密
             </view>
           </view>
-          <view class="album-info box-border p-5">
-            <view class="album-name overflow-hidden text-ellipsis whitespace-nowrap text-[30rpx] text-[#333] font-bold">
-              {{ item.displayName }}
-            </view>
-            <view class="album-count mt-1 text-[24rpx] text-[#999]">
-              {{ item.photoCount || 0 }} 张照片
-            </view>
+        </view>
+        <view class="album-info box-border p-5">
+          <view class="album-name overflow-hidden text-ellipsis whitespace-nowrap text-[30rpx] text-[#333] font-bold">
+            {{ item.displayName }}
+          </view>
+          <view class="album-count mt-1 text-[24rpx] text-[#999]">
+            {{ item.photoCount }} 张照片
           </view>
         </view>
       </view>

src/pages-blog/love/list.vue

@@ -7,56 +7,66 @@ import { ref } from 'vue'
 import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
 import { getLoveDailyItems } from '@/api/uni-halo'
 import { checkImageUrl } from '@/utils/url'
+import { DataLoadingStatusEnum, useDataLoadingStatus } from '@/hooks/useDataLoadingStatus'
+import type { ILoveDailyItem } from '@/api/types/uni-halo'
 
 definePage({
   style: {
     navigationBarTitleText: '恋爱清单',
+    navigationStyle: 'custom',
     enablePullDownRefresh: true,
   },
 })
 
-/* ---------------- 状态 ---------------- */
-const loading = ref<'loading' | 'success' | 'error'>('loading')
-const list = ref<(ILoveItem & { open: boolean })[]>([])
-
-interface ILoveItem {
-  name?: string
-  title?: string
-  content?: string
-  status?: 'wait' | 'doing' | 'complete'
-  planDate?: string
-  completeDate?: string
-  completeRemark?: string
-  images?: string[]
-  [key: string]: unknown
+/* ---------------- 展示层类型 ---------------- */
+/** 清单展示卡片(script 预处理后的干净展示数据) */
+interface ILoveItemCard {
+  /** 唯一 key(metadata.name,无则用索引) */
+  name: string
+  title: string
+  content: string
+  status: 'wait' | 'doing' | 'complete'
+  planDate: string
+  completeDate: string
+  completeRemark: string
+  /** 回忆图片(已预处理 URL) */
+  images: string[]
+  /** 是否展开详情 */
+  open: boolean
 }
 
+/** 清单卡片映射:字段取值 + 图片路径预处理(模板不感知原始接口结构) */
+function mapItemCard(item: ILoveDailyItem, index: number): ILoveItemCard {
+  const spec = item.spec || {}
+  return {
+    name: item.metadata?.name || `item-${index}`,
+    title: spec.title || '',
+    content: spec.content || '',
+    status: spec.status || 'wait',
+    planDate: spec.planDate || '',
+    completeDate: spec.completeDate || '',
+    completeRemark: spec.completeRemark || '',
+    images: (spec.images || []).map(img => checkImageUrl(img || '')),
+    open: false,
+  }
+}
+
+/* ---------------- 状态 ---------------- */
+const { loadingStatus, updateLoadingStatus } = useDataLoadingStatus()
+const list = ref<ILoveItemCard[]>([])
+
 /* ---------------- 数据加载 ---------------- */
 async function handleGetList() {
-  loading.value = 'loading'
+  updateLoadingStatus(DataLoadingStatusEnum.Loading)
   try {
     const res = await getLoveDailyItems({})
-    if (res.data && (res.data as unknown as { items?: unknown[] }).items) {
-      list.value = ((res.data as unknown as { items: unknown[] }).items as unknown as {
-        spec?: ILoveItem
-        metadata?: { name?: string }
-        name?: string
-      }[]).map(item => ({
-        ...item.spec,
-        name: item.metadata?.name || item.name || '',
-        open: false,
-      }))
-      loading.value = 'success'
-    }
-    else {
-      list.value = []
-      loading.value = 'success'
-    }
+    const items = res.data?.items || []
+    list.value = items.map(mapItemCard)
+    updateLoadingStatus(list.value.length === 0 ? DataLoadingStatusEnum.Empty : DataLoadingStatusEnum.Success)
   }
   catch (e) {
     console.error('获取清单失败', e)
-    loading.value = 'error'
-    uni.showToast({ icon: 'none', title: '加载失败，请下拉刷新重试！' })
+    updateLoadingStatus(DataLoadingStatusEnum.Error)
   }
   finally {
     setTimeout(() => {
@@ -66,15 +76,15 @@ async function handleGetList() {
 }
 
 /* ---------------- 交互 ---------------- */
-function handleOnItemOpen(item: ILoveItem & { open: boolean }) {
+function handleOnItemOpen(item: ILoveItemCard) {
   item.open = !item.open
 }
 
-function handlePreviewImages(images: string[] | undefined, index: number) {
-  const urls = (images || []).map(img => checkImageUrl(img || ''))
-  if (urls.length === 0)
+/** 预览回忆图片(基于已预处理 URL) */
+function handlePreviewImages(images: string[], index: number) {
+  if (images.length === 0)
     return
-  uni.previewImage({ current: urls[index], urls })
+  uni.previewImage({ current: images[index], urls: images })
 }
 
 function handleToTopPage(duration = 500) {
@@ -89,7 +99,6 @@ function handleToTopPage(duration = 500) {
 
 /* ---------------- 生命周期 ---------------- */
 onLoad(() => {
-  uni.setNavigationBarTitle({ title: '恋爱清单' })
   handleGetList()
 })
 
@@ -99,104 +108,95 @@ onPullDownRefresh(() => {
 </script>
 
 <template>
-  <view class="app-page box-border min-h-screen w-screen p-6 pb-[144rpx]" style="background: linear-gradient(135deg, rgb(247 149 51 / 10%), rgb(243 112 85 / 10%) 15%, rgb(239 78 123 / 10%) 30%, rgb(161 102 171 / 10%) 44%, rgb(80 115 184 / 10%) 58%, rgb(16 152 173 / 10%) 72%, rgb(7 179 155 / 10%) 86%, rgb(109 186 130 / 10%));">
-    <view v-if="loading === 'loading'" class="loading-wrap box-border h-[60vh] w-full flex items-center justify-center p-9">
-      <view class="loadig-text mt-7 text-[28rpx] text-[#56bbf9]">
-        清单正在努力加载中啦~
+  <view class="app-page box-border min-h-screen w-screen flex flex-col" style="background: linear-gradient(135deg, rgb(247 149 51 / 10%), rgb(243 112 85 / 10%) 15%, rgb(239 78 123 / 10%) 30%, rgb(161 102 171 / 10%) 44%, rgb(80 115 184 / 10%) 58%, rgb(16 152 173 / 10%) 72%, rgb(7 179 155 / 10%) 86%, rgb(109 186 130 / 10%));">
+    <!-- 自定义导航 -->
+    <uh-navbar default-title="恋爱清单" title-color="text-gray-900" />
+
+    <!-- 加载/错误/空占位(状态机) -->
+    <uh-data-loading
+      v-if="loadingStatus !== DataLoadingStatusEnum.Success"
+      :loading-status="loadingStatus"
+      min-height="60vh"
+      empty-text="暂时还没有恋爱清单，快去制定你们的恋爱清单吧~"
+      @refresh="handleGetList"
+    />
+
+    <!-- 清单列表 -->
+    <view v-else class="list-wrap box-border flex-1 p-6 pb-[144rpx]">
+      <view class="list-tip mb-7 w-full text-center text-[26rpx] text-[#999]">
+        看看我们的恋爱清单都完成了哪些吧
       </view>
-    </view>
-    <view v-else-if="loading === 'error'" class="loading-wrap box-border h-[60vh] w-full flex items-center justify-center p-9">
-      <wd-empty description="啊偶,加载失败了呢~">
-        <wd-button size="small" plain type="danger" @click="handleGetList()">
-          刷新试试
-        </wd-button>
-      </wd-empty>
-    </view>
-    <view v-else class="list-wrap w-full">
-      <view v-if="list.length === 0" class="list h-[60vh] flex flex-col items-center justify-center">
-        <wd-empty description="暂时还没有恋爱清单，快去制定你们的恋爱清单吧~">
-          <wd-button size="small" plain type="primary" @click="handleGetList()">
-            刷新试试
-          </wd-button>
-        </wd-empty>
-      </view>
-      <view v-else class="list">
-        <view class="list-tip mb-7 w-full text-center text-[26rpx] text-[#999]">
-          看看我们的恋爱清单都完成了哪些吧
-        </view>
-        <block v-for="(item, index) in list" :key="item.name || index">
-          <view class="card mb-6 box-border w-full flex flex-col items-center rounded-3xl bg-white p-6 shadow-sm">
-            <view class="head box-border w-full flex items-center" @click="handleOnItemOpen(item)">
-              <view class="status w-[100rpx] flex">
-                <view v-if="item.status === 'wait'" class="text h-[100rpx] w-[100rpx] rounded-full text-center text-[24rpx] leading-[100rpx]" style="background-color: #ffc6ba; color: #55423b;">
-                  未开始
-                </view>
-                <view v-else-if="item.status === 'doing'" class="text doing h-[100rpx] w-[100rpx] rounded-full text-center text-[24rpx] leading-[100rpx]" style="background-color: #ffe9a8; color: #55423b;">
-                  进行中
-                </view>
-                <view v-else class="text finish h-[100rpx] w-[100rpx] rounded-full text-center text-[24rpx] leading-[100rpx]" style="background-color: #bfe9ef; color: #55423b;">
-                  已完成
-                </view>
+      <block v-for="item in list" :key="item.name">
+        <view class="card mb-6 box-border w-full flex flex-col items-center rounded-3xl bg-white p-6 shadow-sm">
+          <view class="head box-border w-full flex items-center" @click="handleOnItemOpen(item)">
+            <view class="status w-[100rpx] flex">
+              <view v-if="item.status === 'wait'" class="text h-[100rpx] w-[100rpx] rounded-full text-center text-[24rpx] leading-[100rpx]" style="background-color: #ffc6ba; color: #55423b;">
+                未开始
               </view>
-              <view class="title box-border w-0 flex-1 px-7">
-                <view class="title-name text-[30rpx] text-[#333] font-bold">
-                  {{ item.title }}
-                </view>
-                <view v-if="item.content" class="title-desc mt-1 overflow-hidden text-ellipsis whitespace-nowrap text-[26rpx] text-[#555]">
-                  {{ item.content }}
-                </view>
+              <view v-else-if="item.status === 'doing'" class="text doing h-[100rpx] w-[100rpx] rounded-full text-center text-[24rpx] leading-[100rpx]" style="background-color: #ffe9a8; color: #55423b;">
+                进行中
               </view>
-              <view class="actions w-[50rpx]">
-                <text class="icon inline-block h-[45rpx] w-[45rpx] rounded-full bg-black/20 text-center text-[32rpx] font-bold leading-[45rpx]">{{ item.open ? '-' : '+' }}</text>
+              <view v-else class="text finish h-[100rpx] w-[100rpx] rounded-full text-center text-[24rpx] leading-[100rpx]" style="background-color: #bfe9ef; color: #55423b;">
+                已完成
               </view>
             </view>
-            <view v-if="item.open" class="body mt-6 box-border w-full rounded-3xl bg-black/5 px-6 pb-3 pt-6 text-[26rpx]">
-              <view v-if="item.planDate" class="desc mb-3 flex">
-                <view class="desc-label w-[140rpx] shrink-0 text-[#333]">
-                  计划时间
-                </view>
-                <view class="desc-value w-0 flex-1 text-[#333] leading-[1.5]">
-                  {{ item.planDate || '-' }}
-                </view>
+            <view class="title box-border w-0 flex-1 px-7">
+              <view class="title-name text-[30rpx] text-[#333] font-bold">
+                {{ item.title }}
               </view>
-              <view v-if="item.completeDate" class="desc mb-3 flex">
-                <view class="desc-label w-[140rpx] shrink-0 text-[#333]">
-                  完成时间
-                </view>
-                <view class="desc-value w-0 flex-1 text-[#333] leading-[1.5]">
-                  {{ item.completeDate || '-' }}
-                </view>
+              <view v-if="item.content" class="title-desc mt-1 overflow-hidden text-ellipsis whitespace-nowrap text-[26rpx] text-[#555]">
+                {{ item.content }}
               </view>
-              <view v-if="item.completeRemark" class="desc mb-3 flex">
-                <view class="desc-label w-[140rpx] shrink-0 text-[#333]">
-                  完成感想
-                </view>
-                <view class="desc-value w-0 flex-1 text-[#333] leading-[1.5]">
-                  {{ item.completeRemark || '-' }}
-                </view>
+            </view>
+            <view class="actions w-[50rpx]">
+              <text class="icon inline-block h-[45rpx] w-[45rpx] rounded-full bg-black/20 text-center text-[32rpx] font-bold leading-[45rpx]">{{ item.open ? '-' : '+' }}</text>
+            </view>
+          </view>
+          <view v-if="item.open" class="body mt-6 box-border w-full rounded-3xl bg-black/5 px-6 pb-3 pt-6 text-[26rpx]">
+            <view v-if="item.planDate" class="desc mb-3 flex">
+              <view class="desc-label w-[140rpx] shrink-0 text-[#333]">
+                计划时间
               </view>
-              <view v-if="item.images && item.images.length > 0" class="desc mb-3 flex">
-                <view class="desc-label w-[140rpx] shrink-0 text-[#333]">
-                  回忆图片
-                </view>
-                <view class="desc-value w-0 flex-1 text-[#333] leading-[1.5]">
-                  <view class="images flex flex-wrap">
-                    <view
-                      v-for="(img, imgIndex) in item.images"
-                      :key="imgIndex"
-                      class="image mb-3 mr-3 h-[180rpx] w-[calc((100%-24rpx)/3)] overflow-hidden rounded-lg"
-
-                      @click="handlePreviewImages(item.images, imgIndex)"
-                    >
-                      <image class="image-src h-full w-full" :src="checkImageUrl(img)" mode="aspectFill" lazy-load />
-                    </view>
+              <view class="desc-value w-0 flex-1 text-[#333] leading-[1.5]">
+                {{ item.planDate || '-' }}
+              </view>
+            </view>
+            <view v-if="item.completeDate" class="desc mb-3 flex">
+              <view class="desc-label w-[140rpx] shrink-0 text-[#333]">
+                完成时间
+              </view>
+              <view class="desc-value w-0 flex-1 text-[#333] leading-[1.5]">
+                {{ item.completeDate || '-' }}
+              </view>
+            </view>
+            <view v-if="item.completeRemark" class="desc mb-3 flex">
+              <view class="desc-label w-[140rpx] shrink-0 text-[#333]">
+                完成感想
+              </view>
+              <view class="desc-value w-0 flex-1 text-[#333] leading-[1.5]">
+                {{ item.completeRemark || '-' }}
+              </view>
+            </view>
+            <view v-if="item.images.length > 0" class="desc mb-3 flex">
+              <view class="desc-label w-[140rpx] shrink-0 text-[#333]">
+                回忆图片
+              </view>
+              <view class="desc-value w-0 flex-1 text-[#333] leading-[1.5]">
+                <view class="images flex flex-wrap">
+                  <view
+                    v-for="(img, imgIndex) in item.images"
+                    :key="imgIndex"
+                    class="image mb-3 mr-3 h-[180rpx] w-[calc((100%-24rpx)/3)] overflow-hidden rounded-lg"
+                    @click="handlePreviewImages(item.images, imgIndex)"
+                  >
+                    <image class="image-src h-full w-full" :src="img" mode="aspectFill" lazy-load />
                   </view>
                 </view>
               </view>
             </view>
           </view>
-        </block>
-      </view>
+        </view>
+      </block>
     </view>
 
     <view class="to-top-btn fixed bottom-[160rpx] right-6 z-6 h-[72rpx] w-[72rpx] flex items-center justify-center rounded-full bg-white shadow-sm" @click="handleToTopPage()">

src/pages-blog/love/love.vue

@@ -100,7 +100,7 @@
 		const configs = loveConfig.value
 		navList.value = [
 			{
-				key: 'story',
+				key: 'stories',
 				use: configs.ourStory.enabled,
 				title: '恋爱故事',
 				desc: '我们一起度过的那些经历',

src/pages-blog/love/stories.vue

@@ -1,50 +1,82 @@
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
 import { getLoveStories } from '@/api/uni-halo'
 import { useAppConfigStore } from '@/store/appConfig'
 import { checkImageUrl } from '@/utils/url'
+import { DataLoadingStatusEnum, useDataLoadingStatus } from '@/hooks/useDataLoadingStatus'
 import type { ILoveStory } from '@/api/types/uni-halo'
 
 definePage({
   style: {
     navigationBarTitleText: '恋爱故事',
-	navigationStyle: 'custom',
+    navigationStyle: 'custom',
     enablePullDownRefresh: true,
   },
 })
 
 const appConfigStore = useAppConfigStore()
 
-/* ---------------- 状态 ---------------- */
-const loading = ref<'loading' | 'success' | 'error'>('loading')
-const scrollTop = ref(0)
-const stories = ref<ILoveStory[]>([])
-const showDetail = ref(false)
-const currentStory = ref<ILoveStory>({})
-const currentStoryHtml = ref('')
-const storyImageIndex = ref(0)
+/* ---------------- 展示层类型 ---------------- */
+/** 时间轴故事卡片(script 预处理后的干净展示数据) */
+interface IStoryCard {
+  /** 唯一 key(metadata.name,无则用索引) */
+  key: string
+  title: string
+  date: string
+  location: string
+  /** 故事正文(HTML) */
+  content: string
+  /** 全部图片(已预处理 URL) */
+  images: string[]
+  /** 时间轴封面图(最多 3 张,已预处理 URL) */
+  coverImages: string[]
+}
 
-/* ---------------- 计算属性 ---------------- */
-/** 弹窗故事图片(预处理路径) */
-const currentStoryImages = computed(() => {
-  const images = (currentStory.value as unknown as { spec?: { images?: string[] } }).spec?.images || []
-  return images.map(img => checkImageUrl(img || ''))
-})
+/** 空故事占位(弹窗未打开时) */
+const EMPTY_STORY: IStoryCard = {
+  key: '',
+  title: '',
+  date: '',
+  location: '',
+  content: '',
+  images: [],
+  coverImages: [],
+}
+
+/** 故事卡片映射:字段取值 + 图片路径预处理(模板不感知原始接口结构) */
+function mapStoryCard(story: ILoveStory, index: number): IStoryCard {
+  const spec = story.spec || {}
+  const images = (spec.images || []).map(img => checkImageUrl(img || ''))
+  return {
+    key: story.metadata?.name || `story-${index}`,
+    title: spec.title || '',
+    date: spec.date || '',
+    location: spec.location || '',
+    content: spec.content || '',
+    images,
+    coverImages: images.slice(0, 3),
+  }
+}
+
+/* ---------------- 状态 ---------------- */
+const { loadingStatus, updateLoadingStatus } = useDataLoadingStatus()
+const stories = ref<IStoryCard[]>([])
+const showDetail = ref(false)
+const currentStory = ref<IStoryCard>(EMPTY_STORY)
+const storyImageIndex = ref(0)
 
 /* ---------------- 数据加载 ---------------- */
 async function handleGetStories() {
-  loading.value = 'loading'
+  updateLoadingStatus(DataLoadingStatusEnum.Loading)
   try {
     const res = await getLoveStories({})
-    if (res.data && (res.data as unknown as { items?: unknown[] }).items && ((res.data as unknown as { items: unknown[] }).items.length > 0)) {
-      // 按 priority 排序
-      stories.value = ((res.data as unknown as { items: ILoveStory[] }).items).sort((a, b) => {
-        const priorityA = (a as unknown as { spec?: { priority?: number } }).spec?.priority || 0
-        const priorityB = (b as unknown as { spec?: { priority?: number } }).spec?.priority || 0
-        return priorityB - priorityA
-      })
-      loading.value = 'success'
+    const items = res.data?.items || []
+    if (items.length > 0) {
+      // 按 priority 排序(越大越靠前)
+      const sorted = [...items].sort((a, b) => (b.spec?.priority || 0) - (a.spec?.priority || 0))
+      stories.value = sorted.map(mapStoryCard)
+      updateLoadingStatus(DataLoadingStatusEnum.Success)
     }
     else {
       // 降级:从旧配置读取单条故事
@@ -63,29 +95,27 @@ async function handleGetStories() {
 }
 
 function handleLoadFromLegacy() {
-  const appConfigs = appConfigStore.configs
-  const loveModuleConfig = appConfigs.loveConfig as { ourStory?: { content?: string } } | undefined
+  const loveModuleConfig = appConfigStore.configs.loveConfig as { ourStory?: { content?: string } } | undefined
   if (loveModuleConfig?.ourStory?.content) {
     stories.value = [{
-      name: 'legacy-story',
-      spec: {
-        title: '我们的故事',
-        content: loveModuleConfig.ourStory.content,
-        date: '',
-        images: [],
-      },
+      key: 'legacy-story',
+      title: '我们的故事',
+      date: '',
+      location: '',
+      content: loveModuleConfig.ourStory.content,
+      images: [],
+      coverImages: [],
     }]
-    loading.value = 'success'
+    updateLoadingStatus(DataLoadingStatusEnum.Success)
     return
   }
   stories.value = []
-  loading.value = 'success'
+  updateLoadingStatus(DataLoadingStatusEnum.Empty)
 }
 
 /* ---------------- 交互 ---------------- */
-function handleOnStoryClick(story: ILoveStory) {
+function handleOnStoryClick(story: IStoryCard) {
   currentStory.value = story
-  currentStoryHtml.value = (story as unknown as { spec?: { content?: string } }).spec?.content || ''
   storyImageIndex.value = 0
   showDetail.value = true
 }
@@ -94,24 +124,16 @@ function handleOnStoryImageChange(e: { detail: { current: number } }) {
   storyImageIndex.value = e.detail.current
 }
 
-/** 时间轴封面图:最多 3 张,预处理路径 */
-function storyCoverImages(story: ILoveStory): string[] {
-  const images = (story as unknown as { spec?: { images?: string[] } }).spec?.images || []
-  return images.slice(0, 3).map(img => checkImageUrl(img || ''))
-}
-
-/** 预览时间轴封面图 */
-function handlePreviewStoryImages(story: ILoveStory, index: number) {
-  const images = (story as unknown as { spec?: { images?: string[] } }).spec?.images || []
-  const urls = images.map(img => checkImageUrl(img || ''))
-  if (urls.length === 0)
+/** 预览时间轴封面图(基于已预处理 URL) */
+function handlePreviewStoryImages(story: IStoryCard, index: number) {
+  if (story.images.length === 0)
     return
-  uni.previewImage({ current: urls[index], urls })
+  uni.previewImage({ current: story.images[index], urls: story.images })
 }
 
+/** 预览弹窗内大图 */
 function handlePreviewImage(index: number) {
-  const images = (currentStory.value as unknown as { spec?: { images?: string[] } }).spec?.images || []
-  const urls = images.map(img => checkImageUrl(img || ''))
+  const urls = currentStory.value.images
   if (urls.length > 0) {
     uni.previewImage({ current: urls[index], urls })
   }
@@ -129,7 +151,6 @@ function handleToTopPage(duration = 500) {
 
 /* ---------------- 生命周期 ---------------- */
 onLoad(() => {
-  uni.setNavigationBarTitle({ title: '恋爱故事' })
   handleGetStories()
 })
 
@@ -139,63 +160,50 @@ onPullDownRefresh(() => {
 </script>
 
 <template>
-  <view class="app-page box-border min-h-screen w-screen p-6 pb-[144rpx]" style="background: linear-gradient(-45deg, rgb(247 149 51 / 10%), rgb(243 112 85 / 10%) 15%, rgb(239 78 123 / 10%) 30%, rgb(161 102 171 / 10%) 44%, rgb(80 115 184 / 10%) 58%, rgb(16 152 173 / 10%) 72%, rgb(7 179 155 / 10%) 86%, rgb(109 186 130 / 10%)); color: rgb(26 26 26);">
-    <view v-if="loading === 'loading'" class="loading-wrap box-border h-[60vh] w-full flex items-center justify-center p-9">
-      <view class="loadig-text mt-7 text-[28rpx] text-[#56bbf9]">
-        故事正在努力加载中啦~
-      </view>
-    </view>
-    <view v-else-if="loading === 'error'" class="loading-wrap box-border h-[60vh] w-full flex items-center justify-center p-9">
-      <wd-empty description="啊偶,加载失败了呢~">
-        <wd-button size="small" plain type="danger" @click="handleGetStories()">
-          刷新试试
-        </wd-button>
-      </wd-empty>
-    </view>
-    <view v-else class="content-wrap">
-      <!-- 空状态 -->
-      <view v-if="stories.length === 0" class="empty-state h-[60vh] w-full flex items-center justify-center">
-        <wd-empty description="还没有故事，等待你们来书写...">
-          <wd-button size="small" plain type="primary" @click="handleGetStories()">
-            刷新试试
-          </wd-button>
-        </wd-empty>
-      </view>
-      <!-- 时间轴 -->
-      <view v-else class="timeline relative pl-10">
-        <view v-for="(story, index) in stories" :key="String((story as unknown as { name?: string })?.name ?? index)" class="timeline-item relative pb-10" :class="index === stories.length - 1 ? 'timeline-item-last' : ''" @click="handleOnStoryClick(story)">
+  <view class="app-page box-border min-h-screen w-screen flex flex-col" style="background: linear-gradient(-45deg, rgb(247 149 51 / 10%), rgb(243 112 85 / 10%) 15%, rgb(239 78 123 / 10%) 30%, rgb(161 102 171 / 10%) 44%, rgb(80 115 184 / 10%) 58%, rgb(16 152 173 / 10%) 72%, rgb(7 179 155 / 10%) 86%, rgb(109 186 130 / 10%)); color: rgb(26 26 26);">
+    <!-- 自定义导航 -->
+    <uh-navbar default-title="恋爱故事" title-color="text-gray-900" />
+
+    <!-- 加载/错误/空占位(状态机) -->
+    <uh-data-loading
+      v-if="loadingStatus !== DataLoadingStatusEnum.Success"
+      :loading-status="loadingStatus"
+      min-height="60vh"
+      empty-text="还没有故事，等待你们来书写..."
+      @refresh="handleGetStories"
+    />
+
+    <!-- 时间轴 -->
+    <view v-else class="content-wrap box-border flex-1 p-6 pb-[144rpx]">
+      <view class="timeline relative pl-10">
+        <view v-for="(story, index) in stories" :key="story.key" class="timeline-item relative pb-10" :class="index === stories.length - 1 ? 'timeline-item-last' : ''" @click="handleOnStoryClick(story)">
           <view class="timeline-dot absolute left-[-32rpx] top-4 z-2 h-5 w-5 rounded-full" style="background-color: #f88ca2; box-shadow: 0 0 0 6rpx rgb(248 140 162 / 20%);" />
           <view class="timeline-card rounded-xl bg-white p-6 shadow-sm">
-            <view v-if="(story as unknown as { spec?: { date?: string } }).spec?.date" class="timeline-date mb-2 text-[24rpx] text-[#f88ca2]">
-              {{ (story as unknown as { spec?: { date?: string } }).spec?.date }}
+            <view v-if="story.date" class="timeline-date mb-2 text-[24rpx] text-[#f88ca2]">
+              {{ story.date }}
             </view>
             <view class="timeline-title text-[32rpx] text-[#333] font-bold">
-              {{ (story as unknown as { spec?: { title?: string } }).spec?.title || '' }}
+              {{ story.title }}
             </view>
-            <view v-if="(story as unknown as { spec?: { location?: string } }).spec?.location" class="timeline-location mt-2 flex items-center text-[24rpx] text-[#999]">
-              <text class="location-text ml-1">{{ (story as unknown as { spec?: { location?: string } }).spec?.location }}</text>
+            <view v-if="story.location" class="timeline-location mt-2 flex items-center text-[24rpx] text-[#999]">
+              <text class="location-text ml-1">{{ story.location }}</text>
             </view>
-            <view
-              v-if="(story as unknown as { spec?: { images?: string[] } }).spec?.images?.length"
-              class="timeline-covers mt-4 flex flex-wrap gap-2"
-            >
+            <view v-if="story.coverImages.length" class="timeline-covers mt-4 flex flex-wrap gap-2">
               <view
-                v-for="(img, imgIndex) in storyCoverImages(story)"
+                v-for="(img, imgIndex) in story.coverImages"
                 :key="imgIndex"
                 class="timeline-cover h-[180rpx] w-[calc((100%-16rpx)/3)] overflow-hidden rounded-lg"
-
                 @click.stop="handlePreviewStoryImages(story, imgIndex)"
               >
                 <image class="timeline-cover-img h-full w-full" :src="img" mode="aspectFill" lazy-load />
               </view>
               <view
-                v-if="((story as unknown as { spec?: { images?: string[] } }).spec?.images?.length || 0) > 3"
+                v-if="story.images.length > 3"
                 class="timeline-cover timeline-cover-more h-[180rpx] w-[calc((100%-16rpx)/3)] flex items-center justify-center bg-black/50"
-
                 @click.stop="handleOnStoryClick(story)"
               >
                 <text class="more-text text-[32rpx] text-white font-bold">
-                  +{{ ((story as unknown as { spec?: { images?: string[] } }).spec?.images?.length || 0) - 3 }}
+                  +{{ story.images.length - 3 }}
                 </text>
               </view>
             </view>
@@ -213,25 +221,21 @@ onPullDownRefresh(() => {
       <view class="story-detail h-full w-full flex flex-col overflow-hidden rounded-xl bg-white">
         <view class="story-detail-header box-border shrink-0 border-b border-black/5 px-7 py-6">
           <view class="story-detail-title text-[32rpx] text-[#333] font-bold">
-            {{ (currentStory as unknown as { spec?: { title?: string } }).spec?.title || '' }}
+            {{ currentStory.title }}
           </view>
-          <view
-            v-if="(currentStory as unknown as { spec?: { date?: string; location?: string } }).spec?.date
-              || (currentStory as unknown as { spec?: { date?: string; location?: string } }).spec?.location"
-            class="story-detail-meta mt-2 flex items-center text-[24rpx] text-[#999]"
-          >
-            <text v-if="(currentStory as unknown as { spec?: { date?: string } }).spec?.date" class="story-detail-date">
-              {{ (currentStory as unknown as { spec?: { date?: string } }).spec?.date }}
+          <view v-if="currentStory.date || currentStory.location" class="story-detail-meta mt-2 flex items-center text-[24rpx] text-[#999]">
+            <text v-if="currentStory.date" class="story-detail-date">
+              {{ currentStory.date }}
             </text>
-            <text v-if="(currentStory as unknown as { spec?: { location?: string } }).spec?.location" class="story-detail-location ml-6">
-              {{ (currentStory as unknown as { spec?: { location?: string } }).spec?.location }}
+            <text v-if="currentStory.location" class="story-detail-location ml-6">
+              {{ currentStory.location }}
             </text>
           </view>
         </view>
         <!-- 故事图片:多图 swiper 轮播 -->
-        <view v-if="currentStoryImages.length > 0" class="story-images shrink-0">
+        <view v-if="currentStory.images.length > 0" class="story-images shrink-0">
           <swiper
-            v-if="currentStoryImages.length > 1"
+            v-if="currentStory.images.length > 1"
             class="story-images-swiper h-[360rpx] w-full"
             circular
             indicator-dots
@@ -240,14 +244,14 @@ onPullDownRefresh(() => {
             :current="storyImageIndex"
             @change="handleOnStoryImageChange"
           >
-            <swiper-item v-for="(img, imgIndex) in currentStoryImages" :key="imgIndex" class="story-images-item h-full w-full">
+            <swiper-item v-for="(img, imgIndex) in currentStory.images" :key="imgIndex" class="story-images-item h-full w-full">
               <image :src="img" mode="aspectFill" class="story-image h-full w-full" @click="handlePreviewImage(imgIndex)" />
             </swiper-item>
           </swiper>
-          <image v-else :src="currentStoryImages[0]" mode="aspectFill" class="story-image story-image-single h-[360rpx] w-full" @click="handlePreviewImage(0)" />
+          <image v-else :src="currentStory.images[0]" mode="aspectFill" class="story-image story-image-single h-[360rpx] w-full" @click="handlePreviewImage(0)" />
         </view>
         <scroll-view scroll-y class="story-detail-content box-border min-h-0 flex-1 px-7 py-6">
-          <view class="story-html text-[28rpx] text-[#333] leading-[1.8]" v-html="currentStoryHtml" />
+          <view class="story-html text-[28rpx] text-[#333] leading-[1.8]" v-html="currentStory.content" />
         </scroll-view>
         <view class="story-detail-close box-border shrink-0 border-t border-black/5 px-7 py-5">
           <text class="close-text block h-20 rounded-[40rpx] text-center text-[30rpx] text-white font-bold" style="background: linear-gradient(135deg, #f88ca2, #ff6b9d); line-height: 80rpx;" @click="showDetail = false">关闭</text>