diff --git a/src/components/uh-album-photo-viewer/uh-album-photo-viewer.vue b/src/components/uh-album-photo-viewer/uh-album-photo-viewer.vue
index 70e887a..f20d136 100644
--- a/src/components/uh-album-photo-viewer/uh-album-photo-viewer.vue
+++ b/src/components/uh-album-photo-viewer/uh-album-photo-viewer.vue
@@ -1,156 +1,159 @@
 <script lang="ts" setup>
-/**
- * 相册图片查看弹窗(源自旧项目 components/album-photo-viewer,新建复刻)
- * 双列瀑布流展示相册照片,支持大图预览
- */
-import { computed, ref, watch } from 'vue'
-import { checkImageUrl } from '@/utils/url'
+	import { computed, ref, watch } from 'vue'
+	import { checkImageUrl } from '@/utils/url'
 
-const props = withDefaults(defineProps<{
-  show: boolean
-  albumName?: string
-  photos?: IAlbumPhoto[]
-  loading?: boolean
-}>(), {
-  albumName: '',
-  photos: () => [],
-  loading: false,
-})
+	const props = withDefaults(defineProps<{
+		show : boolean
+		albumName ?: string
+		photos ?: IAlbumPhoto[]
+		loading ?: boolean
+	}>(), {
+		albumName: '',
+		photos: () => [],
+		loading: false,
+	})
 
-const emit = defineEmits<{
-  (e: 'update:show', show: boolean): void
-}>()
+	const emit = defineEmits<{
+		(e : 'update:show', show : boolean) : void
+	}>()
 
-export interface IAlbumPhoto {
-  name?: string
-  url?: string
-  title?: string
-  takenDate?: string
-  location?: string
-  description?: string
-  [key: string]: unknown
-}
+	export interface IAlbumPhoto {
+		name ?: string
+		url ?: string
+		title ?: string
+		takenDate ?: string
+		location ?: string
+		description ?: string
+		[key : string] : unknown
+	}
 
-const isShow = ref(false)
+	const isShow = ref(false)
 
-watch(() => props.show, (val) => {
-  isShow.value = val
-})
+	watch(() => props.show, (val) => {
+		isShow.value = val
+	})
 
-/** 预处理图片路径(相对路径拼接 BASE_API) */
-const photoList = computed<IAlbumPhoto[]>(() =>
-  (props.photos || []).map(photo => ({
-    ...photo,
-    url: checkImageUrl(photo.url || ''),
-  })),
-)
+	/** 预处理图片路径(相对路径拼接 BASE_API) */
+	const photoList = computed<IAlbumPhoto[]>(() =>
+		(props.photos || []).map(photo => ({
+			...photo,
+			url: checkImageUrl(photo.url || ''),
+		})),
+	)
 
-/** 左列(偶数位照片,瀑布流错落) */
-const leftPhotos = computed(() => photoList.value.filter((_, index) => index % 2 === 0))
+	/** 左列(偶数位照片,瀑布流错落) */
+	const leftPhotos = computed(() => photoList.value.filter((_, index) => index % 2 === 0))
 
-/** 右列(奇数位照片) */
-const rightPhotos = computed(() => photoList.value.filter((_, index) => index % 2 === 1))
+	/** 右列(奇数位照片) */
+	const rightPhotos = computed(() => photoList.value.filter((_, index) => index % 2 === 1))
 
-function handleClose() {
-  isShow.value = false
-  emit('update:show', false)
-}
+	function handleClose() {
+		isShow.value = false
+		emit('update:show', false)
+	}
 
-/** 预览大图 */
-function handlePreview(url?: string) {
-  const urls = photoList.value.map(photo => photo.url || '')
-  if (urls.length === 0) {
-    uni.showToast({ title: '相册暂无照片', icon: 'none' })
-    return
-  }
-  uni.previewImage({
-    current: url || urls[0],
-    urls,
-  })
-}
+	/** 预览大图 */
+	function handlePreview(url ?: string) {
+		const urls = photoList.value.map(photo => photo.url || '')
+		if (urls.length === 0) {
+			uni.showToast({ title: '相册暂无照片', icon: 'none' })
+			return
+		}
+		uni.previewImage({
+			current: url || urls[0],
+			urls,
+		})
+	}
 </script>
 
 <template>
-  <wd-popup v-model="isShow" position="center" custom-style="width:94vw;height:82vh;border-radius:12rpx;" @close="handleClose">
-    <view class="album-photo-viewer h-full w-full flex flex-col overflow-hidden rounded-xl bg-white">
-      <!-- 头部 -->
-      <view class="viewer-header box-border flex shrink-0 items-center justify-between border-b border-black/5 px-7 py-6">
-        <text class="viewer-title flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-[32rpx] text-[#333] font-bold">{{ albumName }}</text>
-        <view class="viewer-close h-14 w-14 flex shrink-0 items-center justify-center rounded-full bg-black/5" @click="handleClose">
-          <wd-icon name="close" size="16px" color="#666" />
-        </view>
-      </view>
+	<uh-glass-popup v-model="isShow" position="bottom" :z-index="100" custom-class="!border rounded-2xl"
+		safe-area-inset-bottom @close="handleClose">
+		<view class="box-border h-full w-full flex flex-col gap-y-3 p-4">
+			<!-- 头部 -->
+			<view class="w-full shrink-0 flex items-center justify-between">
+				<view class="font-bold flex items-center gap-x-1">
+					{{ albumName }}
+				</view>
+				<view
+					class="w-6 h-6 uh-global-card-glass border uh-shadow-xs flex items-center justify-center rounded-lg"
+					@click="handleClose">
+					<wd-icon name="close" size="32rpx"></wd-icon>
+				</view>
+			</view>
 
-      <!-- 照片列表 -->
-      <scroll-view class="viewer-body box-border min-h-0 flex-1" scroll-y :show-scrollbar="false">
-        <view v-if="loading" class="viewer-empty box-border h-full flex items-center justify-center p-10">
-          <view class="viewer-loading flex flex-col items-center">
-            <view class="loading-text mt-7 text-[28rpx] text-[#56bbf9]">
-              照片正在努力加载中啦~
-            </view>
-          </view>
-        </view>
-        <view v-else-if="photoList.length === 0" class="viewer-empty box-border h-full flex items-center justify-center p-10">
-          <wd-empty description="这个相册暂时还没有照片~" />
-        </view>
-        <view v-else class="photo-list box-border flex items-start p-5">
-          <!-- 左列 -->
-          <view class="photo-column box-border min-w-0 flex-1 mr-[20rpx]">
-            <view v-for="photo in leftPhotos" :key="photo.name" class="photo-card mb-6 box-border overflow-hidden rounded-xl bg-white shadow-sm">
-              <image
-                class="photo-image w-full"
-                :src="photo.url"
-                mode="widthFix"
-                lazy-load
-                @click="handlePreview(photo.url)"
-              />
-              <view class="photo-info box-border px-6 py-5">
-                <view v-if="photo.title" class="photo-title mb-3 text-[30rpx] text-[#333] font-bold">
-                  {{ photo.title }}
-                </view>
-                <view v-if="photo.takenDate || photo.location" class="photo-meta mb-3 flex flex-wrap items-center">
-                  <text v-if="photo.takenDate" class="meta-item mr-8 text-[24rpx] text-[#999]">{{ photo.takenDate }}</text>
-                  <text v-if="photo.location" class="meta-item mr-8 text-[24rpx] text-[#999]">{{ photo.location }}</text>
-                </view>
-                <view v-if="photo.description" class="photo-desc text-[26rpx] text-[#666] leading-[1.6]">
-                  {{ photo.description }}
-                </view>
-              </view>
-            </view>
-          </view>
-          <!-- 右列 -->
-          <view class="photo-column box-border min-w-0 flex-1">
-            <view v-for="photo in rightPhotos" :key="photo.name" class="photo-card mb-6 box-border overflow-hidden rounded-xl bg-white shadow-sm">
-              <image
-                class="photo-image w-full"
-                :src="photo.url"
-                mode="widthFix"
-                lazy-load
-                @click="handlePreview(photo.url)"
-              />
-              <view class="photo-info box-border px-6 py-5">
-                <view v-if="photo.title" class="photo-title mb-3 text-[30rpx] text-[#333] font-bold">
-                  {{ photo.title }}
-                </view>
-                <view v-if="photo.takenDate || photo.location" class="photo-meta mb-3 flex flex-wrap items-center">
-                  <text v-if="photo.takenDate" class="meta-item mr-8 text-[24rpx] text-[#999]">{{ photo.takenDate }}</text>
-                  <text v-if="photo.location" class="meta-item mr-8 text-[24rpx] text-[#999]">{{ photo.location }}</text>
-                </view>
-                <view v-if="photo.description" class="photo-desc text-[26rpx] text-[#666] leading-[1.6]">
-                  {{ photo.description }}
-                </view>
-              </view>
-            </view>
-          </view>
-        </view>
-      </scroll-view>
+			<!-- 照片列表 -->
+			<scroll-view class="box-border max-h-[50vh] flex-1" scroll-y :show-scrollbar="false">
+				<view v-if="loading" class="viewer-empty box-border h-full flex items-center justify-center p-10">
+					<view class="viewer-loading flex flex-col items-center">
+						<view class="loading-text mt-7 text-[28rpx] text-[#56bbf9]">
+							照片正在努力加载中啦~
+						</view>
+					</view>
+				</view>
+				<view v-else-if="photoList.length === 0"
+					class="viewer-empty box-border h-full flex items-center justify-center p-10">
+					<wd-empty description="这个相册暂时还没有照片~" />
+				</view>
+				<view v-else class="photo-list box-border flex items-start p-5">
+					<!-- 左列 -->
+					<view class="photo-column box-border min-w-0 flex-1 mr-[20rpx]">
+						<view v-for="photo in leftPhotos" :key="photo.name"
+							class="photo-card mb-6 box-border overflow-hidden rounded-xl bg-white shadow-sm">
+							<image class="photo-image w-full" :src="photo.url" mode="widthFix" lazy-load
+								@click="handlePreview(photo.url)" />
+							<view class="photo-info box-border px-6 py-5">
+								<view v-if="photo.title" class="photo-title mb-3 text-[30rpx] text-[#333] font-bold">
+									{{ photo.title }}
+								</view>
+								<view v-if="photo.takenDate || photo.location"
+									class="photo-meta mb-3 flex flex-wrap items-center">
+									<text v-if="photo.takenDate"
+										class="meta-item mr-8 text-[24rpx] text-[#999]">{{ photo.takenDate }}</text>
+									<text v-if="photo.location"
+										class="meta-item mr-8 text-[24rpx] text-[#999]">{{ photo.location }}</text>
+								</view>
+								<view v-if="photo.description"
+									class="photo-desc text-[26rpx] text-[#666] leading-[1.6]">
+									{{ photo.description }}
+								</view>
+							</view>
+						</view>
+					</view>
+					<!-- 右列 -->
+					<view class="photo-column box-border min-w-0 flex-1">
+						<view v-for="photo in rightPhotos" :key="photo.name"
+							class="photo-card mb-6 box-border overflow-hidden rounded-xl bg-white shadow-sm">
+							<image class="photo-image w-full" :src="photo.url" mode="widthFix" lazy-load
+								@click="handlePreview(photo.url)" />
+							<view class="photo-info box-border px-6 py-5">
+								<view v-if="photo.title" class="photo-title mb-3 text-[30rpx] text-[#333] font-bold">
+									{{ photo.title }}
+								</view>
+								<view v-if="photo.takenDate || photo.location"
+									class="photo-meta mb-3 flex flex-wrap items-center">
+									<text v-if="photo.takenDate"
+										class="meta-item mr-8 text-[24rpx] text-[#999]">{{ photo.takenDate }}</text>
+									<text v-if="photo.location"
+										class="meta-item mr-8 text-[24rpx] text-[#999]">{{ photo.location }}</text>
+								</view>
+								<view v-if="photo.description"
+									class="photo-desc text-[26rpx] text-[#666] leading-[1.6]">
+									{{ photo.description }}
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</scroll-view>
 
-      <!-- 底部关闭 -->
-      <view class="viewer-footer box-border shrink-0 border-t border-black/5 px-7 py-5">
-        <view class="viewer-footer-btn h-20 flex items-center justify-center rounded-[40rpx]" style="background: linear-gradient(135deg, #f88ca2, #ff6b9d); box-shadow: 0 4rpx 24rpx rgb(248 140 162 / 35%);" @click="handleClose">
-          <text class="footer-text text-[30rpx] text-white font-bold">关 闭</text>
-        </view>
-      </view>
-    </view>
-  </wd-popup>
-</template>
+			<!-- 底部关闭 -->
+			<view class="w-full shrink-0">
+				<uh-button custom-class="py-2 uh-global-card-glass rounded-xl !bg-love/90 text-white border"
+					@click="handleClose">
+					关闭
+				</uh-button>
+			</view>
+		</view>
+	</uh-glass-popup>
+</template>
\ No newline at end of file
diff --git a/src/components/uh-album-unlock-modal/uh-album-unlock-modal.vue b/src/components/uh-album-unlock-modal/uh-album-unlock-modal.vue
deleted file mode 100644
index 26b58dc..0000000
--- a/src/components/uh-album-unlock-modal/uh-album-unlock-modal.vue
+++ /dev/null
@@ -1,193 +0,0 @@
-<script lang="ts" setup>
-/**
- * 相册密码解锁弹窗(源自旧项目 components/album-unlock-modal,新建复刻)
- * 输入密码解锁加密相册;2026-09-03 接入插件防刷验证码:
- * 首次提交若服务端要求验证码(403+附新码)则展示验证码行,携带后重试(验证码一次性)
- */
-import { computed, ref, watch } from 'vue'
-import { getPluginCaptcha, unlockAlbum } from '@/api/uni-halo'
-import type { ICaptchaQuery, IPluginCaptcha } from '@/api/uni-halo'
-
-const props = withDefaults(defineProps<{
-  show: boolean
-  albumName?: string
-  albumKey?: string
-}>(), {
-  albumName: '',
-  albumKey: '',
-})
-
-const emit = defineEmits<{
-  (e: 'update:show', show: boolean): void
-  (e: 'success', data: { albumKey: string, token: string, photos: unknown[] }): void
-}>()
-
-const isShow = ref(false)
-const password = ref('')
-const loading = ref(false)
-
-// 防刷验证码(服务端 403 附新码 / 主动刷新)
-const captchaImage = ref('')
-const captchaId = ref('')
-const captchaCode = ref('')
-const captchaLoading = ref(false)
-
-const captchaSrc = computed(() => {
-  if (!captchaImage.value)
-    return ''
-  return captchaImage.value.startsWith('data:')
-    ? captchaImage.value
-    : `data:image/png;base64,${captchaImage.value}`
-})
-
-function resetCaptcha() {
-  captchaImage.value = ''
-  captchaId.value = ''
-  captchaCode.value = ''
-}
-
-/** 用服务端返回的验证码(403 响应体附新码)填充展示 */
-function applyCaptcha(captcha: IPluginCaptcha) {
-  captchaImage.value = captcha.imageBase64
-  captchaId.value = captcha.id
-  captchaCode.value = ''
-}
-
-/** 点击验证码图刷新 */
-async function handleRefreshCaptcha() {
-  if (captchaLoading.value)
-    return
-  captchaLoading.value = true
-  try {
-    const res = await getPluginCaptcha()
-    if (res.data)
-      applyCaptcha(res.data)
-  }
-  catch (e) {
-    console.error('获取验证码失败', e)
-  }
-  finally {
-    captchaLoading.value = false
-  }
-}
-
-watch(() => props.show, (val) => {
-  isShow.value = val
-  if (val) {
-    password.value = ''
-    resetCaptcha()
-  }
-})
-
-function handleOnCancel() {
-  password.value = ''
-  resetCaptcha()
-  isShow.value = false
-  emit('update:show', false)
-}
-
-async function handleOnConfirm() {
-  if (!password.value.trim()) {
-    uni.showToast({ title: '请输入密码', icon: 'none' })
-    return
-  }
-
-  loading.value = true
-  try {
-    const captchaQuery: ICaptchaQuery | undefined = captchaImage.value
-      ? { captchaId: captchaId.value, captchaCode: captchaCode.value }
-      : undefined
-    const res = await unlockAlbum(props.albumKey, password.value, captchaQuery)
-    if (res.data && (res.data as { token?: string }).token) {
-      password.value = ''
-      resetCaptcha()
-      isShow.value = false
-      emit('update:show', false)
-      emit('success', {
-        albumKey: props.albumKey,
-        token: (res.data as { token: string }).token,
-        photos: (res.data as { photos?: unknown[] }).photos || [],
-      })
-      uni.showToast({ title: '解锁成功', icon: 'success' })
-    }
-  }
-  catch (e) {
-    console.error('解锁失败', e)
-    const err = e as { code?: number, data?: { message?: string, captcha?: IPluginCaptcha } }
-    if (err.code === 403 && err.data?.captcha) {
-      // 需要/校验失败:服务端附新验证码(一次性,旧码已作废),展示并要求重试
-      applyCaptcha(err.data.captcha)
-      uni.showToast({ title: '请完成验证码后重新解锁', icon: 'none' })
-    }
-    else {
-      // 密码错误等业务失败:清空密码并复位验证码(一次性,需重新获取)
-      password.value = ''
-      resetCaptcha()
-      uni.showToast({ title: '密码错误，请重试', icon: 'none' })
-    }
-  }
-  finally {
-    loading.value = false
-  }
-}
-</script>
-
-<template>
-  <wd-dialog
-    v-model="isShow"
-    title="相册密码"
-    :show-cancel="true"
-    confirm-text="解锁"
-    confirm-button-color="#f88ca2"
-    @cancel="handleOnCancel"
-    @confirm="handleOnConfirm"
-  >
-    <view class="unlock-modal-content py-5">
-      <view class="album-info flex flex-col items-center">
-        <view class="lock-icon mb-5 text-[80rpx]">
-          🔒
-        </view>
-        <view class="album-name mb-3 text-[32rpx] text-[#333] font-bold">
-          {{ albumName }}
-        </view>
-        <view class="tip-text text-[26rpx] text-[#999]">
-          此相册已加密，请输入密码查看
-        </view>
-      </view>
-      <wd-input
-        v-model="password"
-        :password="true"
-        placeholder="请输入相册密码"
-        align="center"
-        clearable
-        class="password-input mt-9"
-      />
-
-      <!-- 防刷验证码(首次提交 403 后展示;点击图片可刷新) -->
-      <view v-if="captchaSrc" class="captcha-box mt-5 flex items-center justify-center gap-4">
-        <image
-          :src="captchaSrc"
-          class="captcha-img h-[76rpx] w-[200rpx] rounded-lg"
-          mode="widthFix"
-          @click="handleRefreshCaptcha"
-        />
-        <wd-input
-          v-model="captchaCode"
-          placeholder="验证码"
-          align="center"
-          clearable
-          class="captcha-input w-[240rpx]"
-        />
-      </view>
-      <view v-if="captchaSrc" class="captcha-tip mt-2 text-center text-[22rpx] text-[#aaa]">
-        点击图片刷新验证码
-      </view>
-    </view>
-  </wd-dialog>
-</template>
-
-<style scoped>
-.unlock-modal-content {
-  /* 布局全部由 UnoCSS 原子类实现 */
-}
-</style>
diff --git a/src/components/uh-album-unlock-popup/uh-album-unlock-popup.vue b/src/components/uh-album-unlock-popup/uh-album-unlock-popup.vue
new file mode 100644
index 0000000..d56dfca
--- /dev/null
+++ b/src/components/uh-album-unlock-popup/uh-album-unlock-popup.vue
@@ -0,0 +1,188 @@
+<script lang="ts" setup>
+	import { computed, ref, watch } from 'vue'
+	import { getPluginCaptcha, unlockAlbum } from '@/api/uni-halo'
+	import type { ICaptchaQuery, IPluginCaptcha } from '@/api/uni-halo'
+
+	interface IProps {
+		show : boolean
+	}
+
+	const props = withDefaults(defineProps<{
+		show : boolean
+		albumName ?: string
+		albumKey ?: string
+	}>(), {
+		albumName: '',
+		albumKey: '',
+	})
+
+	const emit = defineEmits<{
+		(e : 'update:show', show : boolean) : void
+		(e : 'success', data : { albumKey : string, token : string, photos : unknown[] }) : void
+	}>()
+
+	const isShow = ref(false)
+	const password = ref('')
+	const loading = ref(false)
+
+	// 防刷验证码(服务端 403 附新码 / 主动刷新)
+	const captchaImage = ref('')
+	const captchaId = ref('')
+	const captchaCode = ref('')
+	const captchaLoading = ref(false)
+
+	const captchaSrc = computed(() => {
+		if (!captchaImage.value)
+			return ''
+		return captchaImage.value.startsWith('data:')
+			? captchaImage.value
+			: `data:image/png;base64,${captchaImage.value}`
+	})
+
+	function resetCaptcha() {
+		captchaImage.value = ''
+		captchaId.value = ''
+		captchaCode.value = ''
+	}
+
+	/** 用服务端返回的验证码(403 响应体附新码)填充展示 */
+	function applyCaptcha(captcha : IPluginCaptcha) {
+		captchaImage.value = captcha.imageBase64
+		captchaId.value = captcha.id
+		captchaCode.value = ''
+	}
+
+	/** 点击验证码图刷新 */
+	async function handleRefreshCaptcha() {
+		if (captchaLoading.value) { return }
+		captchaLoading.value = true
+		try {
+			const res = await getPluginCaptcha()
+			if (res.data) { applyCaptcha(res.data) }
+		}
+		catch (e) {
+			console.error('获取验证码失败', e)
+		}
+		finally {
+			captchaLoading.value = false
+		}
+	}
+
+	watch(() => props.show, (val) => {
+		isShow.value = val
+		if (val) {
+			password.value = ''
+			resetCaptcha()
+		}
+	})
+
+	/** 弹窗开关同步(遮罩/关闭按钮/取消):关闭时复位输入并通知父组件 */
+	function handleOnPopupClose(val : boolean) {
+		isShow.value = val
+		if (!val) {
+			password.value = ''
+			resetCaptcha()
+		}
+		emit('update:show', val)
+	}
+
+	function handleOnCancel() {
+		handleOnPopupClose(false)
+	}
+
+	async function handleOnConfirm() {
+		if (loading.value)
+			return
+		if (!password.value.trim()) {
+			uni.showToast({ title: '请输入密码', icon: 'none' })
+			return
+		}
+
+		loading.value = true
+		try {
+			const captchaQuery : ICaptchaQuery | undefined = captchaImage.value
+				? { captchaId: captchaId.value, captchaCode: captchaCode.value }
+				: undefined
+			const res = await unlockAlbum(props.albumKey, password.value, captchaQuery)
+			if (res.data && (res.data as { token ?: string }).token) {
+				password.value = ''
+				resetCaptcha()
+				isShow.value = false
+				emit('update:show', false)
+				emit('success', {
+					albumKey: props.albumKey,
+					token: (res.data as { token : string }).token,
+					photos: (res.data as { photos ?: unknown[] }).photos || [],
+				})
+				uni.showToast({ title: '解锁成功', icon: 'success' })
+			}
+		}
+		catch (e) {
+			console.error('解锁失败', e)
+			const err = e as { code ?: number, data ?: { message ?: string, captcha ?: IPluginCaptcha } }
+			if (err.code === 403 && err.data?.captcha) {
+				// 需要/校验失败:服务端附新验证码(一次性,旧码已作废),展示并要求重试
+				applyCaptcha(err.data.captcha)
+				uni.showToast({ title: '请完成验证码后重新解锁', icon: 'none' })
+			}
+			else {
+				// 密码错误等业务失败:清空密码并复位验证码(一次性,需重新获取)
+				password.value = ''
+				resetCaptcha()
+				uni.showToast({ title: '密码错误，请重试', icon: 'none' })
+			}
+		}
+		finally {
+			loading.value = false
+		}
+	}
+</script>
+
+<template>
+	<uh-glass-popup :model-value="isShow" position="bottom" :z-index="100" custom-class="!border rounded-2xl"
+		safe-area-inset-bottom @update:model-value="handleOnPopupClose">
+		<view class="box-border p-4 w-full">
+			<view class="w-full flex items-center justify-between">
+				<view class="font-bold flex items-center gap-x-1"> <wd-icon name="lock" size="42rpx"></wd-icon> 解锁相册
+				</view>
+				<view
+					class="w-6 h-6 uh-global-card-glass border uh-shadow-xs flex items-center justify-center rounded-lg"
+					@click="handleOnCancel">
+					<wd-icon name="close" size="32rpx"></wd-icon>
+				</view>
+			</view>
+			<view class="mt-6 flex flex-col items-center">
+				<view class="album-name mb-3 text-lg text-gray-900 font-bold">
+					{{ albumName }}
+				</view>
+				<view class="tip-text text-sm text-gray-600">
+					此相册已加密，请输入密码查看
+				</view>
+			</view>
+			<input v-model="password" :password="true" placeholder="请输入相册密码"
+				class="box-border mt-6 h-10 px-3 rounded-xl text-sm uh-global-card-glass uh-shadow-xs border" />
+
+			<view v-if="captchaSrc" class="mt-5 flex items-center justify-center gap-4">
+				<input v-model="captchaCode" placeholder="验证码"
+					class="box-border flex-1 h-10 px-3 rounded-xl text-sm uh-global-card-glass uh-shadow-xs border" />
+				<image :src="captchaSrc" class="shrink-0 h-10 w-26 rounded-xl" mode="widthFix"
+					@click="handleRefreshCaptcha" />
+			</view>
+			<view v-if="captchaSrc" class="mt-4 text-center text-xs text-gray-500">
+				点击图片刷新验证码
+			</view>
+
+			<!-- 操作按钮:取消 + 解锁 -->
+			<view class="mt-6 box-border flex gap-4">
+				<uh-button custom-class="py-2 flex-1 uh-global-card-glass rounded-xl bg-white/90"
+					@click="handleOnCancel">
+					取消
+				</uh-button>
+				<uh-button custom-class="py-2 flex-1 uh-global-card-glass rounded-xl !bg-love/90 text-white border"
+					@click="handleOnConfirm">
+					{{ loading ? '解锁中...' : '解锁' }}
+				</uh-button>
+			</view>
+		</view>
+	</uh-glass-popup>
+</template>
\ No newline at end of file
diff --git a/src/components/uh-scroll-top/uh-scroll-top.vue b/src/components/uh-scroll-top/uh-scroll-top.vue
index 8f9a8f6..4d4e017 100644
--- a/src/components/uh-scroll-top/uh-scroll-top.vue
+++ b/src/components/uh-scroll-top/uh-scroll-top.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
 	interface IProps {
-		customClass : Array<string>;
+		customClass?: string;
 	}
-	const props = defineProps({
-		customClass: () => {
-			return []
-		},
+	
+	const props = withDefaults(defineProps<IProps>(), {
+		customClass: ''
 	})
 
 	function handleScrollTop() {
@@ -19,13 +18,18 @@
 	const visible = computed(() => {
 		return !balckList.includes(currentPage.route)
 	})
+	
+	const _customClass = computed(() => {
+		const colorClass = currentPage.route.includes('/love/')?'text-love':'text-primary'
+		return `${props.customClass} ${colorClass}`
+	})
 </script>
 
 <template>
 	<view v-if="visible" class="fixed bottom-22 right-3 z-50 pb-safe">
-		<view class="uh-global-card-glass border h-11 w-11 flex items-center justify-center rounded-full text-primary"
-			:class="props.customClass" @click="handleScrollTop">
-			<wd-icon name="arrow-up" size="20px" />
+		<view class="uh-global-card-glass border h-11 w-11 flex items-center justify-center rounded-full"
+			:class="_customClass" @click="handleScrollTop">
+			<wd-icon name="arrow-up" size="42rpx" />
 		</view>
 	</view>
 </template>
\ No newline at end of file
diff --git a/src/pages-blog/love/album.vue b/src/pages-blog/love/album.vue
index 1dcc4a5..4316c02 100644
--- a/src/pages-blog/love/album.vue
+++ b/src/pages-blog/love/album.vue
@@ -1,278 +1,264 @@
 <script lang="ts" setup>
-/**
- * 恋爱相册页(源自旧项目 pagesA/love/album.vue,新建复刻)
- * 相册列表(两列网格)+ 加密相册密码解锁 + 图片查看弹窗
- */
-import { computed, ref } from 'vue'
-import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
-import dayjs from 'dayjs'
-import { getLoveAlbumByName, getLoveAlbums } from '@/api/uni-halo'
-import { useAppConfigStore } from '@/store/appConfig'
-import { checkImageUrl } from '@/utils/url'
-import { getCache, setCache } from '@/utils/storage'
-import { DataLoadingStatusEnum, useDataLoadingStatus } from '@/hooks/useDataLoadingStatus'
-import type { ILoveAlbum, ILovePhoto } from '@/api/types/uni-halo'
+	import { computed, ref } from 'vue'
+	import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
+	import dayjs from 'dayjs'
+	import { getLoveAlbumByName, getLoveAlbums } from '@/api/uni-halo'
+	import { useAppConfigStore } from '@/store/appConfig'
+	import { checkImageUrl } from '@/utils/url'
+	import { getCache, setCache } from '@/utils/storage'
+	import { DataLoadingStatusEnum, useDataLoadingStatus } from '@/hooks/useDataLoadingStatus'
+	import type { ILoveAlbum, ILovePhoto } from '@/api/types/uni-halo'
 
-definePage({
-  style: {
-    navigationBarTitleText: '恋爱相册',
-    navigationStyle: 'custom',
-    enablePullDownRefresh: true,
-  },
-})
+	definePage({
+		style: {
+			navigationBarTitleText: '恋爱相册',
+			navigationStyle: 'custom',
+			enablePullDownRefresh: true,
+		},
+	})
 
-const appConfigStore = useAppConfigStore()
-const loveConfig = computed(() => appConfigStore.configs.loveConfig)
+	const appConfigStore = useAppConfigStore()
+	const loveConfig = computed(() => appConfigStore.configs.loveConfig)
 
-/** 已解锁相册本地缓存 key */
-const UNLOCKED_ALBUMS_CACHE_KEY = 'unlocked_albums'
-/** 解锁 token 有效期(后端默认 30 分钟) */
-const ALBUM_TOKEN_TTL_SECONDS = 30 * 60
+	/** 已解锁相册本地缓存 key */
+	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[]
-}
+	/* ---------------- 展示层类型 ---------------- */
+	/** 相册展示卡片(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 || [],
-  }
-}
+	/** 相册卡片映射:字段取值 + 封面/时间预处理(模板不感知原始接口结构) */
+	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 { loadingStatus, updateLoadingStatus } = useDataLoadingStatus()
-const dataList = ref<ILoveAlbumCard[]>([])
-const unlockedAlbums = ref<Record<string, string>>({})
+	/* ---------------- 状态 ---------------- */
+	const { loadingStatus, updateLoadingStatus } = useDataLoadingStatus()
+	const dataList = ref<ILoveAlbumCard[]>([])
+	const unlockedAlbums = ref<Record<string, string>>({})
 
-/** 密码解锁弹窗 */
-const showUnlockModal = ref(false)
-const currentUnlockAlbum = ref<ILoveAlbumCard | null>(null)
+	/** 密码解锁弹窗 */
+	const showUnlockModal = ref(false)
+	const currentUnlockAlbum = ref<ILoveAlbumCard | null>(null)
 
-/** 图片查看弹窗 */
-const showPhotoViewer = ref(false)
-const currentViewerAlbum = ref<ILoveAlbumCard | null>(null)
-const viewerLoading = ref(false)
+	/** 图片查看弹窗 */
+	const showPhotoViewer = ref(false)
+	const currentViewerAlbum = ref<ILoveAlbumCard | null>(null)
+	const viewerLoading = ref(false)
 
-const unlockAlbumName = computed(() => currentUnlockAlbum.value?.displayName || '')
-const unlockAlbumKey = computed(() => currentUnlockAlbum.value?.name || '')
-const viewerAlbumName = computed(() => currentViewerAlbum.value?.displayName || '')
-const viewerPhotos = computed(() => currentViewerAlbum.value?.photos || [])
+	const unlockAlbumName = computed(() => currentUnlockAlbum.value?.displayName || '')
+	const unlockAlbumKey = computed(() => currentUnlockAlbum.value?.name || '')
+	const viewerAlbumName = computed(() => currentViewerAlbum.value?.displayName || '')
+	const viewerPhotos = computed(() => currentViewerAlbum.value?.photos || [])
 
-/* ---------------- 缓存 ---------------- */
-function handleRestoreUnlockedAlbums() {
-  try {
-    const saved = getCache<Record<string, string>>(UNLOCKED_ALBUMS_CACHE_KEY)
-    if (saved) {
-      unlockedAlbums.value = saved
-    }
-  }
-  catch (e) {
-    console.error('恢复解锁状态失败', e)
-  }
-}
+	/* ---------------- 缓存 ---------------- */
+	function handleRestoreUnlockedAlbums() {
+		try {
+			const saved = getCache<Record<string, string>>(UNLOCKED_ALBUMS_CACHE_KEY)
+			if (saved) {
+				unlockedAlbums.value = saved
+			}
+		}
+		catch (e) {
+			console.error('恢复解锁状态失败', e)
+		}
+	}
 
-function handleSaveUnlockedAlbums() {
-  try {
-    setCache(UNLOCKED_ALBUMS_CACHE_KEY, unlockedAlbums.value, ALBUM_TOKEN_TTL_SECONDS)
-  }
-  catch (e) {
-    console.error('保存解锁状态失败', e)
-  }
-}
+	function handleSaveUnlockedAlbums() {
+		try {
+			setCache(UNLOCKED_ALBUMS_CACHE_KEY, unlockedAlbums.value, ALBUM_TOKEN_TTL_SECONDS)
+		}
+		catch (e) {
+			console.error('保存解锁状态失败', e)
+		}
+	}
 
-/* ---------------- 数据加载 ---------------- */
-async function handleGetData() {
-  updateLoadingStatus(DataLoadingStatusEnum.Loading)
-  try {
-    const res = await getLoveAlbums({})
-    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()
-  }
-  catch (e) {
-    console.error('获取相册失败', e)
-    updateLoadingStatus(DataLoadingStatusEnum.Error)
-  }
-  finally {
-    setTimeout(() => {
-      uni.stopPullDownRefresh()
-    }, 200)
-  }
-}
+	/* ---------------- 数据加载 ---------------- */
+	async function handleGetData() {
+		updateLoadingStatus(DataLoadingStatusEnum.Loading)
+		try {
+			const res = await getLoveAlbums({})
+			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()
+		}
+		catch (e) {
+			console.error('获取相册失败', e)
+			updateLoadingStatus(DataLoadingStatusEnum.Error)
+		}
+		finally {
+			setTimeout(() => {
+				uni.stopPullDownRefresh()
+			}, 200)
+		}
+	}
 
-/** 加载已解锁相册的照片 */
-async function handleLoadUnlockedAlbumPhotos() {
-  for (const item of dataList.value) {
-    const token = unlockedAlbums.value[item.name]
-    if (item.locked && token) {
-      try {
-        const detail = await getLoveAlbumByName(item.name, { token })
-        if (detail.locked) {
-          delete unlockedAlbums.value[item.name]
-          handleSaveUnlockedAlbums()
-        }
-        else if (detail.photos) {
-          item.photos = detail.photos
-          item.locked = false
-        }
-      }
-      catch (e) {
-        console.error('加载相册照片失败', e)
-      }
-    }
-  }
-}
+	/** 加载已解锁相册的照片 */
+	async function handleLoadUnlockedAlbumPhotos() {
+		for (const item of dataList.value) {
+			const token = unlockedAlbums.value[item.name]
+			if (item.locked && token) {
+				try {
+					const detail = await getLoveAlbumByName(item.name, { token })
+					if (detail.locked) {
+						delete unlockedAlbums.value[item.name]
+						handleSaveUnlockedAlbums()
+					}
+					else if (detail.photos) {
+						item.photos = detail.photos
+						item.locked = false
+					}
+				}
+				catch (e) {
+					console.error('加载相册照片失败', e)
+				}
+			}
+		}
+	}
 
-/* ---------------- 交互 ---------------- */
-function handleOnAlbumClick(item: ILoveAlbumCard) {
-  if (item.locked && !unlockedAlbums.value[item.name]) {
-    currentUnlockAlbum.value = item
-    showUnlockModal.value = true
-    return
-  }
-  handleOpenPhotoViewer(item)
-}
+	/* ---------------- 交互 ---------------- */
+	function handleOnAlbumClick(item : ILoveAlbumCard) {
+		if (item.locked && !unlockedAlbums.value[item.name]) {
+			currentUnlockAlbum.value = item
+			showUnlockModal.value = true
+			return
+		}
+		handleOpenPhotoViewer(item)
+	}
 
-async function handleOpenPhotoViewer(item: ILoveAlbumCard) {
-  currentViewerAlbum.value = item
-  showPhotoViewer.value = true
-  if (item.photos.length > 0)
-    return
-  viewerLoading.value = true
-  try {
-    const token = unlockedAlbums.value[item.name] || ''
-    const detail = await getLoveAlbumByName(item.name, { token })
-    if (detail) {
-      if (detail.locked) {
-        delete unlockedAlbums.value[item.name]
-        handleSaveUnlockedAlbums()
-      }
-      else if (detail.photos) {
-        item.photos = detail.photos
-        item.locked = false
-      }
-    }
-  }
-  catch (e) {
-    console.error('获取相册照片失败', e)
-    uni.showToast({ icon: 'none', title: '照片加载失败，请稍后重试' })
-  }
-  finally {
-    viewerLoading.value = false
-  }
-}
+	async function handleOpenPhotoViewer(item : ILoveAlbumCard) {
+		currentViewerAlbum.value = item
+		showPhotoViewer.value = true
+		if (item.photos.length > 0) { return }
+		viewerLoading.value = true
+		try {
+			const token = unlockedAlbums.value[item.name] || ''
+			const detail = await getLoveAlbumByName(item.name, { token })
+			if (detail) {
+				if (detail.locked) {
+					delete unlockedAlbums.value[item.name]
+					handleSaveUnlockedAlbums()
+				}
+				else if (detail.photos) {
+					item.photos = detail.photos
+					item.locked = false
+				}
+			}
+		}
+		catch (e) {
+			console.error('获取相册照片失败', e)
+			uni.showToast({ icon: 'none', title: '照片加载失败，请稍后重试' })
+		}
+		finally {
+			viewerLoading.value = false
+		}
+	}
 
-function handleOnUnlockSuccess(data: { albumKey: string, token: string, photos: unknown[] }) {
-  unlockedAlbums.value[data.albumKey] = data.token
-  handleSaveUnlockedAlbums()
+	function handleOnUnlockSuccess(data : { albumKey : string, token : string, photos : unknown[] }) {
+		unlockedAlbums.value[data.albumKey] = data.token
+		handleSaveUnlockedAlbums()
 
-  const albumIndex = dataList.value.findIndex(a => a.name === data.albumKey)
-  if (albumIndex !== -1) {
-    dataList.value[albumIndex].photos = data.photos as ILovePhoto[]
-    dataList.value[albumIndex].locked = false
-  }
-  currentUnlockAlbum.value = null
-  if (albumIndex !== -1) {
-    handleOpenPhotoViewer(dataList.value[albumIndex])
-  }
-}
+		const albumIndex = dataList.value.findIndex(a => a.name === data.albumKey)
+		if (albumIndex !== -1) {
+			dataList.value[albumIndex].photos = data.photos as ILovePhoto[]
+			dataList.value[albumIndex].locked = false
+		}
+		currentUnlockAlbum.value = null
+		if (albumIndex !== -1) {
+			handleOpenPhotoViewer(dataList.value[albumIndex])
+		}
+	}
 
-/* ---------------- 生命周期 ---------------- */
-onLoad(() => {
-  handleRestoreUnlockedAlbums()
-  handleGetData()
-})
+	function handleToTopPage(duration = 500) {
+		uni.pageScrollTo({
+			scrollTop: 0,
+			duration,
+			fail: (err) => {
+				console.error('回顶失败', err)
+			},
+		})
+	}
 
-onPullDownRefresh(() => {
-  handleGetData()
-})
+	/* ---------------- 生命周期 ---------------- */
+	onLoad(() => {
+		handleRestoreUnlockedAlbums()
+		handleGetData()
+	})
+
+	onPullDownRefresh(() => {
+		handleGetData()
+	})
 </script>
 
 <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%));">
-    <!-- 自定义导航 -->
-    <uh-navbar default-title="恋爱相册" title-color="text-gray-900" />
+	<view class="app-page box-border min-h-screen w-screen flex flex-col pb-safe">
+		<!-- 自定义导航 -->
+		<uh-navbar default-title="恋爱相册" title-color="text-love" back-class="text-love" />
 
-    <!-- 加载/错误/空占位(状态机) -->
-    <uh-data-loading
-      v-if="loadingStatus !== DataLoadingStatusEnum.Success"
-      :loading-status="loadingStatus"
-      min-height="60vh"
-      empty-text="相册暂时还没有数据~"
-      @refresh="handleGetData"
-    />
+		<!-- 加载/错误/空占位(状态机) -->
+		<uh-data-loading v-if="loadingStatus !== DataLoadingStatusEnum.Success" :loading-status="loadingStatus"
+			min-height="75vh" 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="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>
-        <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>
-    </view>
+		<!-- 相册列表(两列网格) -->
+		<view v-else class="box-border grid grid-cols-2 p-3 pt-2 gap-3">
+			<view v-for="(item) in dataList" :key="item.name"
+				class="uh-global-card-glass box-border overflow-hidden rounded-xl" @click="handleOnAlbumClick(item)">
+				<view class="relative h-24 w-full">
+					<image class="h-full w-full" :src="item.image" mode="aspectFill" lazy-load />
+					<view v-if="item.locked && !unlockedAlbums[item.name]"
+						class="absolute left-0 top-0 h-full w-full flex flex-col items-center justify-center gap-1 bg-black/45">
+						<wd-icon name="lock" size="52rpx" class="text-white" />
+						<view class="text-xs text-white"> 已加密 </view>
+					</view>
+				</view>
+				<view class="album-info box-border p-3">
+					<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-xs text-gray-500">
+						{{ item.photoCount }} 张照片
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- 密码解锁弹窗 -->
+		<uh-album-unlock-popup v-if="currentUnlockAlbum" v-model="showUnlockModal" :show="showUnlockModal" :album-name="unlockAlbumName"
+			:album-key="unlockAlbumKey" @update:show="showUnlockModal = $event" @success="handleOnUnlockSuccess" />
 
-    <!-- 密码解锁弹窗 -->
-    <uh-album-unlock-modal
-      v-if="currentUnlockAlbum"
-      :show="showUnlockModal"
-      :album-name="unlockAlbumName"
-      :album-key="unlockAlbumKey"
-      @update:show="showUnlockModal = $event"
-      @success="handleOnUnlockSuccess"
-    />
-
-    <!-- 相册图片查看弹窗 -->
-    <uh-album-photo-viewer
-      v-if="currentViewerAlbum"
-      :show="showPhotoViewer"
-      :album-name="viewerAlbumName"
-      :photos="viewerPhotos"
-      :loading="viewerLoading"
-      @update:show="showPhotoViewer = $event"
-    />
-  </view>
+		<!-- 相册图片查看弹窗 -->
+		<uh-album-photo-viewer v-if="currentViewerAlbum" v-model="showPhotoViewer" :show="showPhotoViewer" :album-name="viewerAlbumName"
+			:photos="viewerPhotos" :loading="viewerLoading" @update:show="showPhotoViewer = $event" />
+	</view>
 </template>
 
 <style scoped>
-.app-page {
-  /* 布局全部由 UnoCSS 原子类实现 */
-}
-</style>
+	.app-page {
+		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%));
+	}
+</style>
\ No newline at end of file
diff --git a/src/pages-blog/love/list.vue b/src/pages-blog/love/list.vue
index 4a95e95..752e494 100644
--- a/src/pages-blog/love/list.vue
+++ b/src/pages-blog/love/list.vue
@@ -1,212 +1,387 @@
 <script lang="ts" setup>
-/**
+	/**
  * 恋爱清单页(源自旧项目 pagesA/love/list.vue,新建复刻)
  * 恋爱清单卡片列表(未开始/进行中/已完成),展开查看详情与回忆图片
  */
-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'
+	import { computed, 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,
-  },
-})
+	definePage({
+		style: {
+			navigationBarTitleText: '恋爱清单',
+			navigationStyle: 'custom',
+			enablePullDownRefresh: true,
+		},
+	})
 
-/* ---------------- 展示层类型 ---------------- */
-/** 清单展示卡片(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
-}
+	/* ---------------- 展示层类型 ---------------- */
+	/** 清单展示卡片(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,
-  }
-}
+	/** 清单卡片映射:字段取值 + 图片路径预处理(模板不感知原始接口结构) */
+	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[]>([])
+	/* ---------------- 状态 ---------------- */
+	const { loadingStatus, updateLoadingStatus } = useDataLoadingStatus()
+	const list = ref<ILoveItemCard[]>([])
 
-/* ---------------- 数据加载 ---------------- */
-async function handleGetList() {
-  updateLoadingStatus(DataLoadingStatusEnum.Loading)
-  try {
-    const res = await getLoveDailyItems({})
-    const items = res.data?.items || []
-    list.value = items.map(mapItemCard)
-    updateLoadingStatus(list.value.length === 0 ? DataLoadingStatusEnum.Empty : DataLoadingStatusEnum.Success)
-  }
-  catch (e) {
-    console.error('获取清单失败', e)
-    updateLoadingStatus(DataLoadingStatusEnum.Error)
-  }
-  finally {
-    setTimeout(() => {
-      uni.stopPullDownRefresh()
-    }, 200)
-  }
-}
+	/* ---------------- 筛选与排序 ---------------- */
+	interface IFilterOption {
+		label : string
+		value : string
+	}
 
-/* ---------------- 交互 ---------------- */
-function handleOnItemOpen(item: ILoveItemCard) {
-  item.open = !item.open
-}
+	interface IFilterItem {
+		key : 'status' | 'sort'
+		label : string
+		options : IFilterOption[]
+	}
 
-/** 预览回忆图片(基于已预处理 URL) */
-function handlePreviewImages(images: string[], index: number) {
-  if (images.length === 0)
-    return
-  uni.previewImage({ current: images[index], urls: images })
-}
+	/** 筛选维度:状态筛选 + 排序(参考投票列表页顶部胶囊设计,各自独立状态) */
+	const filterConfig : IFilterItem[] = [
+		{
+			key: 'status',
+			label: '状态',
+			options: [
+				{ label: '全部', value: '' },
+				{ label: '待完成', value: 'wait' },
+				{ label: '进行中', value: 'doing' },
+				{ label: '已完成', value: 'complete' },
+			],
+		},
+		{
+			key: 'sort',
+			label: '排序',
+			options: [
+				{ label: '默认排序', value: 'default' },
+				{ label: '按状态', value: 'status' },
+				{ label: '按计划时间', value: 'planDate' },
+				{ label: '按完成时间', value: 'completeDate' },
+			],
+		},
+	]
 
-function handleToTopPage(duration = 500) {
-  uni.pageScrollTo({
-    scrollTop: 0,
-    duration,
-    fail: (err) => {
-      console.error('回顶失败', err)
-    },
-  })
-}
+	/** 排序方向选项(顺序/倒序,排序弹层内选择) */
+	const sortDirOptions : IFilterOption[] = [
+		{ label: '顺序', value: 'asc' },
+		{ label: '倒序', value: 'desc' },
+	]
 
-/* ---------------- 生命周期 ---------------- */
-onLoad(() => {
-  handleGetList()
-})
+	/** 各维度当前选中值(空串/首项 = 默认) */
+	const filterValues = ref<Record<string, string>>({ status: '', sort: 'default', sortDir: 'asc' })
 
-onPullDownRefresh(() => {
-  handleGetList()
-})
+	/** 当前选中中文标签(用于胶囊展示当前状态) */
+	const filterLabels = computed(() => {
+		const map : Record<string, string> = {}
+		for (const f of filterConfig) {
+			const cur = filterValues.value[f.key]
+			map[f.key] = f.options.find(o => o.value === cur)?.label || f.options[0].label
+		}
+		return map
+	})
+
+	/** 筛选弹层 */
+	const filterPopup = ref<{ show : boolean, item : IFilterItem | null }>({ show: false, item: null })
+
+	function handleOpenFilter(item : IFilterItem) {
+		filterPopup.value = { show: true, item }
+	}
+
+	function handleSelectFilter(option : IFilterOption) {
+		const item = filterPopup.value.item
+		if (!item)
+			return
+		if (item.key === 'sort' && option.value === 'default') {
+			// 选回默认排序:方向一并复位
+			filterValues.value.sort = 'default'
+			filterValues.value.sortDir = 'asc'
+		}
+		else {
+			filterValues.value[item.key] = option.value
+		}
+		filterPopup.value.show = false
+	}
+
+	function handleSelectSortDir(option : IFilterOption) {
+		filterValues.value.sortDir = option.value
+	}
+
+	/** 展示列表:状态筛选 + 排序(前端过滤,数据一次拉取) */
+	const showList = computed(() => {
+		const status = filterValues.value.status
+		const dir = filterValues.value.sortDir === 'desc' ? -1 : 1
+		const result = status
+			? list.value.filter(item => item.status === status)
+			: [...list.value]
+		switch (filterValues.value.sort) {
+			case 'status': {
+				const order : Record<string, number> = { wait: 0, doing: 1, complete: 2 }
+				result.sort((a, b) => (order[a.status] - order[b.status]) * dir)
+				break
+			}
+			case 'planDate':
+				result.sort((a, b) => (a.planDate || '').localeCompare(b.planDate || '') * dir)
+				break
+			case 'completeDate':
+				result.sort((a, b) => (a.completeDate || '').localeCompare(b.completeDate || '') * dir)
+				break
+			default:
+				break
+		}
+		return result
+	})
+
+	/* ---------------- 数据加载 ---------------- */
+	async function handleGetList() {
+		updateLoadingStatus(DataLoadingStatusEnum.Loading)
+		try {
+			const res = await getLoveDailyItems({})
+			const items = res.data?.items || []
+			list.value = items.map(mapItemCard)
+			updateLoadingStatus(list.value.length === 0 ? DataLoadingStatusEnum.Empty : DataLoadingStatusEnum.Success)
+		}
+		catch (e) {
+			console.error('获取清单失败', e)
+			updateLoadingStatus(DataLoadingStatusEnum.Error)
+		}
+		finally {
+			setTimeout(() => {
+				uni.stopPullDownRefresh()
+			}, 200)
+		}
+	}
+
+	function getCardStatusClass(item : ILoveItemCard) {
+		switch (item.status) {
+			case 'wait':
+				return 'bg-yellow-300'
+			case 'doing':
+				return 'bg-love/30'
+			case 'complete':
+				return 'bg-blue-300'
+			default:
+				return 'bg-yellow-300'
+		}
+	}
+
+	function getCardStatusText(item : ILoveItemCard) {
+		switch (item.status) {
+			case 'wait':
+				return '待完成'
+			case 'doing':
+				return '进行中'
+			case 'complete':
+				return '已完成'
+			default:
+				return '待完成'
+		}
+	}
+
+	/* ---------------- 交互 ---------------- */
+	function handleOnItemOpen(item : ILoveItemCard) {
+		item.open = !item.open
+	}
+
+	/** 预览回忆图片(基于已预处理 URL) */
+	function handlePreviewImages(images : string[], index : number) {
+		if (images.length === 0)
+			return
+		uni.previewImage({ current: images[index], urls: images })
+	}
+
+	function handleToTopPage(duration = 500) {
+		uni.pageScrollTo({
+			scrollTop: 0,
+			duration,
+			fail: (err) => {
+				console.error('回顶失败', err)
+			},
+		})
+	}
+
+	/* ---------------- 生命周期 ---------------- */
+	onLoad(() => {
+		handleGetList()
+	})
+
+	onPullDownRefresh(() => {
+		handleGetList()
+	})
 </script>
 
 <template>
-  <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" />
+	<view class="uh-global-love-page box-border min-h-screen w-screen flex flex-col">
+		<!-- 自定义导航 -->
+		<uh-navbar default-title="恋爱清单" title-color="text-love" back-class="text-love"/>
 
-    <!-- 加载/错误/空占位(状态机) -->
-    <uh-data-loading
-      v-if="loadingStatus !== DataLoadingStatusEnum.Success"
-      :loading-status="loadingStatus"
-      min-height="60vh"
-      empty-text="暂时还没有恋爱清单，快去制定你们的恋爱清单吧~"
-      @refresh="handleGetList"
-    />
+		<!-- 粘性筛选区:参考投票页顶部胶囊设计,每个维度独立状态 -->
+		<wd-sticky>
+			<view class="box-border px-3 pb-1 pt-2">
+				<view class="box-border flex items-center justify-between gap-x-2">
+					<view v-for="f in filterConfig" :key="f.key"
+						class="uh-global-card-glass box-border flex flex-1 items-center justify-center gap-1 border rounded-full px-4 py-2 text-gray-500"
+						:class="[filterValues[f.key] !== f.options[0].value ? 'bg-love/90 text-white font-bold' : 'bg-white/80 text-gray-600']"
+						@click="handleOpenFilter(f)">
+						<text class="truncate text-xs">{{ filterLabels[f.key] }}</text>
+						<template v-if="f.key!=='status'">
+							<wd-icon v-if="f.key === 'sort' && filterValues.sort !== 'default'"
+								:name="filterValues.sortDir === 'desc' ? 'arrow-down' : 'arrow-up'" size="26rpx" />
+							<wd-icon v-else name="arrow-down" size="26rpx" />
+						</template>
+					</view>
+				</view>
+			</view>
+		</wd-sticky>
 
-    <!-- 清单列表 -->
-    <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>
-      <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 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>
-            </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>
-            <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 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>
-        </view>
-      </block>
-    </view>
+		<!-- 加载/错误/空占位(状态机) -->
+		<uh-data-loading v-if="loadingStatus !== DataLoadingStatusEnum.Success" :loading-status="loadingStatus"
+			min-height="60vh" empty-text="暂时还没有恋爱清单，快去制定你们的恋爱清单吧~" @refresh="handleGetList" />
 
-    <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()">
-      <wd-icon name="arrow-up" size="20px" color="#03a9f4" />
-    </view>
-  </view>
-</template>
+		<!-- 清单列表 -->
+		<view v-else class="box-border flex flex-1 flex-col gap-y-3 p-3 pb-safe">
+			<view
+				class="uh-global-card-glass uh-shadow-xs box-border w-full rounded-xl p-3 text-center text-xs text-love">
+				看看我们的恋爱清单都完成了哪些吧
+			</view>
+			<block v-for="(item, index) in showList" :key="item.name">
+				<view
+					class="uh-global-card-glass uh-shadow-xs box-border w-full flex flex-col items-center rounded-xl p-3">
+					<view class="box-border w-full flex items-center gap-x-3" @click="handleOnItemOpen(item)">
+						<view
+							class="uh-global-card-glass uh-shadow-xs text-md h-11 w-11 flex shrink-0 items-center justify-center rounded-full text-white font-bold"
+							:class="[getCardStatusClass(item)]">
+							{{ index + 1 }}
+						</view>
+						<view class="box-border flex-1">
+							<view class="text-md truncate text-love font-bold">
+								{{ item.title }}
+							</view>
+							<view class="mt-1 text-xs text-gray-500">
+								完成状态：{{ getCardStatusText(item) }}
+							</view>
+						</view>
+						<view
+							class="h-6 w-6 flex shrink-0 items-center justify-center rounded-full text-love font-bold">
+							<wd-icon :name="item.open ? 'up' : 'down'" size="32rpx" />
+						</view>
+					</view>
+					<view v-if="item.open"
+						class="uh-global-card-glass mt-4 box-border w-full rounded-xl p-3 text-xs shadow-none">
+						<view v-if="item.content" class="desc mb-3 flex">
+							<view class="desc-label w-16 shrink-0 text-gray-500">
+								计划内容
+							</view>
+							<view class="desc-value w-0 flex-1 text-gray-900 leading-4">
+								{{ item.content || '-' }}
+							</view>
+						</view>
+						<view v-if="item.planDate" class="desc mb-3 flex">
+							<view class="desc-label w-16 shrink-0 text-gray-500">
+								计划时间
+							</view>
+							<view class="desc-value w-0 flex-1 text-gray-900 leading-4">
+								{{ item.planDate || '-' }}
+							</view>
+						</view>
+						<view v-if="item.completeDate" class="desc mb-3 flex">
+							<view class="desc-label w-16 shrink-0 text-gray-500">
+								完成时间
+							</view>
+							<view class="desc-value w-0 flex-1 text-gray-900 leading-4">
+								{{ item.completeDate || '-' }}
+							</view>
+						</view>
+						<view v-if="item.completeRemark" class="desc mb-3 flex">
+							<view class="desc-label w-16 shrink-0 text-gray-500">
+								完成感想
+							</view>
+							<view class="desc-value w-0 flex-1 text-gray-900 leading-4">
+								{{ item.completeRemark || '-' }}
+							</view>
+						</view>
+						<view v-if="item.images.length > 0" class="desc flex">
+							<view class="desc-label w-16 shrink-0 text-gray-500">
+								回忆图片
+							</view>
+							<view class="desc-value w-0 flex-1 text-gray-900 leading-4">
+								<view class="grid grid-cols-3 gap-2">
+									<view v-for="(img, imgIndex) in item.images" :key="imgIndex"
+										class="h-16 w-full overflow-hidden rounded-lg"
+										@click="handlePreviewImages(item.images, imgIndex)">
+										<image class="h-full w-full" :src="img" mode="aspectFill" lazy-load />
+									</view>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</block>
+			<view class="box-border py-10 text-center text-xs text-gray-500">
 
-<style scoped>
-.app-page {
-  /* 布局全部由 UnoCSS 原子类实现 */
-}
-</style>
+			</view>
+			<uh-data-loading v-if="showList.length === 0" :loading-status="DataLoadingStatusEnum.Empty"
+				min-height="42vh" empty-text="该筛选条件下暂无清单~" :use-loading-button="false" />
+		</view>
+
+		<!-- 筛选弹层(状态/排序;排序附方向选择) -->
+		<uh-glass-popup v-model="filterPopup.show" :z-index="99" position="bottom" custom-class="rounded-2xl">
+			<view v-if="filterPopup.item" class="box-border p-4">
+				<view class="text-md mb-4 text-center text-gray-900 font-bold">
+					{{ filterPopup.item.label }}
+				</view>
+				<view class="flex flex-col gap-2">
+					<view v-for="opt in filterPopup.item.options" :key="opt.label"
+						class="uh-global-card-glass shadow-none box-border border rounded-xl px-5 py-2 text-center text-sm"
+						:class="filterValues[filterPopup.item.key] === opt.value ? 'bg-love/90 text-white font-bold' : 'text-gray-700'"
+						@click="handleSelectFilter(opt)">
+						{{ opt.label }}
+					</view>
+				</view>
+				<!-- 排序维度附加:方向选择(顺序/倒序) -->
+				<template v-if="filterPopup.item.key === 'sort'">
+					<view class="mb-2 mt-5 text-center text-xs text-gray-400">
+						排序方向
+					</view>
+					<view class="flex gap-2">
+						<view v-for="dir in sortDirOptions" :key="dir.value"
+							class="uh-global-card-glass shadow-none box-border flex-1 border rounded-xl px-5 py-2 text-center text-sm"
+							:class="filterValues.sortDir === dir.value ? 'bg-love/90 text-white font-bold' : 'text-gray-700'"
+							@click="handleSelectSortDir(dir)">
+							{{ dir.label }}
+						</view>
+					</view>
+				</template>
+			</view>
+		</uh-glass-popup>
+	</view>
+</template>
\ No newline at end of file
diff --git a/src/pages-blog/love/stories.vue b/src/pages-blog/love/stories.vue
index ded70b8..a5f4e68 100644
--- a/src/pages-blog/love/stories.vue
+++ b/src/pages-blog/love/stories.vue
@@ -1,282 +1,300 @@
 <script lang="ts" setup>
-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'
+	import { ref } from 'vue'
+	import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
+	import dayjs from 'dayjs'
+	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',
-    enablePullDownRefresh: true,
-  },
-})
+	definePage({
+		style: {
+			navigationBarTitleText: '恋爱故事',
+			navigationStyle: 'custom',
+			enablePullDownRefresh: true,
+		},
+	})
 
-const appConfigStore = useAppConfigStore()
+	const appConfigStore = useAppConfigStore()
 
-/* ---------------- 展示层类型 ---------------- */
-/** 时间轴故事卡片(script 预处理后的干净展示数据) */
-interface IStoryCard {
-  /** 唯一 key(metadata.name,无则用索引) */
-  key: string
-  title: string
-  date: string
-  location: string
-  /** 故事正文(HTML) */
-  content: string
-  /** 全部图片(已预处理 URL) */
-  images: string[]
-  /** 时间轴封面图(最多 3 张,已预处理 URL) */
-  coverImages: string[]
-}
+	/* ---------------- 展示层类型 ---------------- */
+	/** 时间轴故事卡片(script 预处理后的干净展示数据) */
+	interface IStoryCard {
+		/** 唯一 key(metadata.name,无则用索引) */
+		key : string
+		title : string
+		date : string
+		/** 日期拆分:年(如"2023") */
+		year : string
+		/** 日期拆分:月(如"5") */
+		month : string
+		/** 日期拆分:日(如"20") */
+		day : string
+		/** 日期拆分:星期(如"周六") */
+		weekend : string
+		location : string
+		/** 故事正文(HTML) */
+		content : string
+		/** 全部图片(已预处理 URL) */
+		images : string[]
+		/** 时间轴封面图(最多 3 张,已预处理 URL) */
+		coverImages : string[]
+	}
 
-/** 空故事占位(弹窗未打开时) */
-const EMPTY_STORY: IStoryCard = {
-  key: '',
-  title: '',
-  date: '',
-  location: '',
-  content: '',
-  images: [],
-  coverImages: [],
-}
+	/** 空故事占位(弹窗未打开时) */
+	const EMPTY_STORY : IStoryCard = {
+		key: '',
+		title: '',
+		date: '',
+		year: '',
+		month: '',
+		day: '',
+		weekend: '',
+		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),
-  }
-}
+	/** 中文星期(dayjs day():0=周日) */
+	const WEEKDAY_TEXT = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
 
-/* ---------------- 状态 ---------------- */
-const { loadingStatus, updateLoadingStatus } = useDataLoadingStatus()
-const stories = ref<IStoryCard[]>([])
-const showDetail = ref(false)
-const currentStory = ref<IStoryCard>(EMPTY_STORY)
-const storyImageIndex = ref(0)
+	/** 从日期字符串拆分年月日星期(解析失败返回空) */
+	function splitStoryDate(dateStr : string) {
+		const d = dateStr ? dayjs(dateStr) : null
+		if (!d || !d.isValid()) {
+			return { year: '', month: '', day: '', weekend: '' }
+		}
+		return {
+			year: `${d.year()}`,
+			month: `${d.month() + 1}`,
+			day: `${d.date()}`,
+			weekend: WEEKDAY_TEXT[d.day()],
+		}
+	}
 
-/* ---------------- 数据加载 ---------------- */
-async function handleGetStories() {
-  updateLoadingStatus(DataLoadingStatusEnum.Loading)
-  try {
-    const res = await getLoveStories({})
-    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 {
-      // 降级:从旧配置读取单条故事
-      handleLoadFromLegacy()
-    }
-  }
-  catch (e) {
-    console.error('获取故事失败', e)
-    handleLoadFromLegacy()
-  }
-  finally {
-    setTimeout(() => {
-      uni.stopPullDownRefresh()
-    }, 200)
-  }
-}
+	/** 故事卡片映射:字段取值 + 日期拆分 + 图片路径预处理(模板不感知原始接口结构) */
+	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 || '',
+			...splitStoryDate(spec.date || ''),
+			location: spec.location || '',
+			content: spec.content || '',
+			images,
+			coverImages: images.slice(0, 3),
+		}
+	}
 
-function handleLoadFromLegacy() {
-  const loveModuleConfig = appConfigStore.configs.loveConfig as { ourStory?: { content?: string } } | undefined
-  if (loveModuleConfig?.ourStory?.content) {
-    stories.value = [{
-      key: 'legacy-story',
-      title: '我们的故事',
-      date: '',
-      location: '',
-      content: loveModuleConfig.ourStory.content,
-      images: [],
-      coverImages: [],
-    }]
-    updateLoadingStatus(DataLoadingStatusEnum.Success)
-    return
-  }
-  stories.value = []
-  updateLoadingStatus(DataLoadingStatusEnum.Empty)
-}
+	/* ---------------- 状态 ---------------- */
+	const { loadingStatus, updateLoadingStatus } = useDataLoadingStatus()
+	const stories = ref<IStoryCard[]>([])
+	const showDetail = ref(false)
+	const currentStory = ref<IStoryCard>(EMPTY_STORY)
+	const storyImageIndex = ref(0)
 
-/* ---------------- 交互 ---------------- */
-function handleOnStoryClick(story: IStoryCard) {
-  currentStory.value = story
-  storyImageIndex.value = 0
-  showDetail.value = true
-}
+	/* ---------------- 数据加载 ---------------- */
+	async function handleGetStories() {
+		updateLoadingStatus(DataLoadingStatusEnum.Loading)
+		try {
+			const res = await getLoveStories({})
+			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 {
+				// 降级:从旧配置读取单条故事
+				handleLoadFromLegacy()
+			}
+		}
+		catch (e) {
+			console.error('获取故事失败', e)
+			handleLoadFromLegacy()
+		}
+		finally {
+			setTimeout(() => {
+				uni.stopPullDownRefresh()
+			}, 200)
+		}
+	}
 
-function handleOnStoryImageChange(e: { detail: { current: number } }) {
-  storyImageIndex.value = e.detail.current
-}
+	function handleLoadFromLegacy() {
+		const loveModuleConfig = appConfigStore.configs.loveConfig as { ourStory ?: { content ?: string } } | undefined
+		if (loveModuleConfig?.ourStory?.content) {
+			stories.value = [{
+				key: 'legacy-story',
+				title: '我们的故事',
+				date: '',
+				year: '',
+				month: '',
+				day: '',
+				weekend: '',
+				location: '',
+				content: loveModuleConfig.ourStory.content,
+				images: [],
+				coverImages: [],
+			}]
+			updateLoadingStatus(DataLoadingStatusEnum.Success)
+			return
+		}
+		stories.value = []
+		updateLoadingStatus(DataLoadingStatusEnum.Empty)
+	}
 
-/** 预览时间轴封面图(基于已预处理 URL) */
-function handlePreviewStoryImages(story: IStoryCard, index: number) {
-  if (story.images.length === 0)
-    return
-  uni.previewImage({ current: story.images[index], urls: story.images })
-}
+	/* ---------------- 交互 ---------------- */
+	function handleOnStoryClick(story : IStoryCard) {
+		currentStory.value = story
+		storyImageIndex.value = 0
+		showDetail.value = true
+	}
 
-/** 预览弹窗内大图 */
-function handlePreviewImage(index: number) {
-  const urls = currentStory.value.images
-  if (urls.length > 0) {
-    uni.previewImage({ current: urls[index], urls })
-  }
-}
+	function handleOnStoryImageChange(e : { detail : { current : number } }) {
+		storyImageIndex.value = e.detail.current
+	}
 
-function handleToTopPage(duration = 500) {
-  uni.pageScrollTo({
-    scrollTop: 0,
-    duration,
-    fail: (err) => {
-      console.error('回顶失败', err)
-    },
-  })
-}
+	/** 预览时间轴封面图(基于已预处理 URL) */
+	function handlePreviewStoryImages(story : IStoryCard, index : number) {
+		if (story.images.length === 0)
+			return
+		uni.previewImage({ current: story.images[index], urls: story.images })
+	}
 
-/* ---------------- 生命周期 ---------------- */
-onLoad(() => {
-  handleGetStories()
-})
+	/** 预览弹窗内大图 */
+	function handlePreviewImage(index : number) {
+		const urls = currentStory.value.images
+		if (urls.length > 0) {
+			uni.previewImage({ current: urls[index], urls })
+		}
+	}
 
-onPullDownRefresh(() => {
-  handleGetStories()
-})
+	function handleToTopPage(duration = 500) {
+		uni.pageScrollTo({
+			scrollTop: 0,
+			duration,
+			fail: (err) => {
+				console.error('回顶失败', err)
+			},
+		})
+	}
+
+	/* ---------------- 生命周期 ---------------- */
+	onLoad(() => {
+		handleGetStories()
+	})
+
+	onPullDownRefresh(() => {
+		handleGetStories()
+	})
 </script>
 
 <template>
-  <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" />
+	<view class="app-page box-border min-h-screen w-screen flex flex-col">
+		<!-- 自定义导航 -->
+		<uh-navbar default-title="恋爱故事" title-color="text-love" back-class="text-love" />
 
-    <!-- 加载/错误/空占位(状态机) -->
-    <uh-data-loading
-      v-if="loadingStatus !== DataLoadingStatusEnum.Success"
-      :loading-status="loadingStatus"
-      min-height="60vh"
-      empty-text="还没有故事，等待你们来书写..."
-      @refresh="handleGetStories"
-    />
+		<!-- 加载/错误/空占位(状态机) -->
+		<uh-data-loading v-if="loadingStatus !== DataLoadingStatusEnum.Success" :loading-status="loadingStatus"
+			min-height="75vh" 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.date" class="timeline-date mb-2 text-[24rpx] text-[#f88ca2]">
-              {{ story.date }}
-            </view>
-            <view class="timeline-title text-[32rpx] text-[#333] font-bold">
-              {{ story.title }}
-            </view>
-            <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.coverImages.length" class="timeline-covers mt-4 flex flex-wrap gap-2">
-              <view
-                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.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.images.length - 3 }}
-                </text>
-              </view>
-            </view>
-          </view>
-        </view>
-      </view>
-    </view>
+		<!-- 时间轴 -->
+		<view v-else class="box-border flex-1 p-3 pb-safe">
+			<view class="relative box-border flex flex-col gap-y-3">
+				<view v-for="(story, index) in stories" :key="story.key" class="relative flex"
+					:class="index === stories.length - 1 ? '-last' : ''">
+					<view class="shrink-0 box-border pr-2">
+						<view class="flex flex-col items-center">
+							<text class="text-2xl text-love font-bold">
+								{{ story.day }} <text class="text-lg">号</text>
+							</text>
+							<text class=" mt-2 text-sm text-love">{{ story.year }}/{{ story.month }}月</text>
+							<text class=" mt-1 text-xs text-gray-500">{{ story.weekend }}</text>
+						</view>
+					</view>
+					<view class="relative overflow-hidden uh-global-card-glass box-border flex-1 rounded-xl p-3">
+						<text v-if="false"
+							class="absolute right-2 top-1 z-10 text-6xl text-love font-bold opacity-5">{{ story.day }}</text>
+						<view class="flex items-start justify-between gap-x-2">
+							<view class="text-md text-gray-900 font-bold truncate">
+								{{ story.title }}
+							</view>
+							<uh-button custom-class="uh-global-card-glass shadow-none !bg-love/90 border text-white !py-1 px-2 text-xs !rounded-md"
+								@click="handleOnStoryClick(story)">详情</uh-button>
+						</view>
+						<view v-if="story.location" class="mt-2 flex items-center text-xs text-gray-600">
+							<wd-icon name="location"></wd-icon> <text>{{ story.location }}</text>
+						</view>
+						<view v-if="story.coverImages.length" class="relative mt-3 grid grid-cols-3 gap-2">
+							<view v-for="(img, imgIndex) in story.coverImages" :key="imgIndex"
+								class="h-16 w-full 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.images.length > 3"
+								class="box-border px-1 py-0.5 rounded-lt-lg absolute bottom-0 right-0 flex items-center justify-center bg-black/30"
+								@click.stop="handleOnStoryClick(story)">
+								<text class="text-xs text-white">
+									+{{ story.images.length - 3 }}
+								</text>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</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()">
-      <wd-icon name="arrow-up" size="20px" color="#03a9f4" />
-    </view>
-
-    <!-- 故事详情弹窗 -->
-    <wd-popup v-model="showDetail" position="center" custom-style="width:90vw;height:80vh;border-radius:12rpx;">
-      <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.title }}
-          </view>
-          <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.location" class="story-detail-location ml-6">
-              {{ currentStory.location }}
-            </text>
-          </view>
-        </view>
-        <!-- 故事图片:多图 swiper 轮播 -->
-        <view v-if="currentStory.images.length > 0" class="story-images shrink-0">
-          <swiper
-            v-if="currentStory.images.length > 1"
-            class="story-images-swiper h-[360rpx] w-full"
-            circular
-            indicator-dots
-            indicator-color="rgba(255,255,255,0.4)"
-            indicator-active-color="#f88ca2"
-            :current="storyImageIndex"
-            @change="handleOnStoryImageChange"
-          >
-            <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="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="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>
-        </view>
-      </view>
-    </wd-popup>
-  </view>
+		<!-- 故事详情弹窗 -->
+		<uh-glass-popup v-model="showDetail" :z-index="100" position="bottom" custom-class="rounded-xl">
+			<view class="box-border p-3 h-full w-full flex flex-col overflow-hidden rounded-xl bg-white">
+				<view class="story-detail-header box-border shrink-0 mb-4">
+					<view class="story-detail-title text-lg text-gray-900 font-bold">
+						{{ currentStory.title }}
+					</view>
+					<view v-if="currentStory.date || currentStory.location"
+						class="mt-2 flex items-center text-xs text-gray-500">
+						<text v-if="currentStory.date">
+							<wd-icon name="time-line"></wd-icon> {{ currentStory.date }}
+						</text>
+						<text v-if="currentStory.location" class="ml-6">
+							<wd-icon name="location"></wd-icon> {{ currentStory.location }}
+						</text>
+					</view>
+				</view>
+				<!-- 故事图片:多图 swiper 轮播 -->
+				<view v-if="currentStory.images.length > 0" class="story-images shrink-0">
+					<swiper v-if="currentStory.images.length > 1" class="h-32 w-full rounded-lg overflow-hidden" circular
+						indicator-dots indicator-color="rgba(255,255,255,0.4)" indicator-active-color="#f83856"
+						:current="storyImageIndex" @change="handleOnStoryImageChange">
+						<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="h-full w-full"
+								@click="handlePreviewImage(imgIndex)" />
+						</swiper-item>
+					</swiper>
+					<image v-else :src="currentStory.images[0]" mode="aspectFill"
+						class="h-32 w-full" @click="handlePreviewImage(0)" />
+				</view>
+				<scroll-view scroll-y :show-scrollbar="false" class="mt-4 box-border max-h-[50vh] flex-1">
+					<view class="story-html text-sm text-gray-900 leading-7" v-html="currentStory.content" />
+				</scroll-view>
+				<view class="w-full mt-3">
+					<uh-button custom-class="uh-global-card-glass border !bg-love/90 !py-2 text-white" @click="showDetail = false">关闭</uh-button>
+				</view>
+			</view>
+		</uh-glass-popup>
+	</view>
 </template>
 
-<style scoped lang="scss">
-.timeline {
-  .timeline-item {
-    &::before {
-      content: '';
-      position: absolute;
-      left: -20rpx;
-      top: 12rpx;
-      bottom: 0;
-      width: 2rpx;
-      background-color: rgb(248 140 162 / 40%);
-    }
-
-    &.timeline-item-last::before {
-      display: none;
-    }
-  }
-}
-</style>
+<style scoped>
+	.app-page {
+		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);
+	}
+</style>
\ No newline at end of file
diff --git a/src/style/index.scss b/src/style/index.scss
index e1f198e..db569cb 100644
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -7,10 +7,10 @@
 :root,
 page {
 	// 修改按主题色
-	--wot-color-theme: #B9E424;
+	--wot-color-theme: #b9e424;
 
 	// 修改按钮背景色
-	--wot-button-primary-bg-color: #B9E424;
+	--wot-button-primary-bg-color: #b9e424;
 }
 
 .uh-global-page {
@@ -34,6 +34,19 @@ page {
 	box-shadow: inset 0 1rpx 0 rgb(255 255 255 / 75%), 0 8rpx 32rpx rgb(90 105 200 / 7%);
 }
 
+.uh-global-love-page {
+	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%)
+	);
+}
 /*
 border-t-1
 由于uniapp中无法使用*选择器，使用魔法代替*，加上此规则可以简化border与divide的使用，并提升布局的兼容性