1
0
mirror of https://github.com/ialley-workshop-open/uni-halo.git synced 2026-09-12 16:40:40 +08:00

refactor: 大量组件与页面代码优化,新增玻璃弹窗组件

1. 新增uh-glass-popup玻璃质感弹窗组件,替换原有wd-popup使用
2. 重构列表动画类名,适配微信小程序不支持:nth-child的问题
3. 优化uh-button组件,完善类型定义与点击事件绑定
4. 修复相册查看器列间距样式,移除冗余css
5. 重构评论弹窗,使用新玻璃弹窗与统一样式
6. 优化数据加载组件,新增开关控制刷新按钮,调整文案样式
7. 替换微信客服按钮为原生button并修复样式
8. 重构收藏页空状态逻辑与文案,调整最小高度
9. 优化时间轴样式,修复最后一项线条隐藏逻辑
10. 新增sleep工具函数并优化数据加载延迟
11. 调整归档页标题与布局样式,优化空状态展示
12. 新增小程序链接申请组件,替换旧版申请弹窗
This commit is contained in:
小莫唐尼
2026-09-05 02:16:39 +08:00
parent e371f1b1d6
commit 6a0fda28d4
17 changed files with 1077 additions and 1028 deletions
+27 -35
View File
@@ -1,8 +1,4 @@
<script lang="ts" setup>
/**
* 归档页(源自旧项目 pagesA/archives,新建复刻)
* 按月份/年份分组展示文章时间线
*/
import { computed, ref } from 'vue'
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
import { getPostList } from '@/api/halo'
@@ -10,6 +6,7 @@ import { useAppConfigStore } from '@/store/appConfig'
import { useSettingStore } from '@/store/setting'
import { DataLoadingStatusEnum, useDataLoadingStatus } from '@/hooks/useDataLoadingStatus'
import { checkThumbnailUrl } from '@/utils/url'
import { sleep } from '@/utils/common'
import { formatTime as formatTimeUtil } from '@/utils/formatTime'
import type { IPost } from '@/api/types/halo'
@@ -127,11 +124,11 @@ async function handleGetData() {
const posts = handleGetPosts(filtered)
dataList.value = handleGetShowDataList(posts)
cacheDataList.value = filtered
c
updateLoadingStatus(
dataList.value.length === 0 ? DataLoadingStatusEnum.Empty : DataLoadingStatusEnum.Success,
)
loadMoreText.value = '呜呜,没有更多数据啦~'
uni.hideLoading()
loadMoreText.value = '呜呜,没有更多数据啦~'
uni.stopPullDownRefresh()
}
catch (err) {
@@ -181,7 +178,7 @@ async function handleGetData() {
dataList.value = showDataList
cacheDataList.value = res.data.items
}
await sleep(500)
updateLoadingStatus(
dataList.value.length === 0 ? DataLoadingStatusEnum.Empty : DataLoadingStatusEnum.Success,
)
@@ -192,8 +189,7 @@ async function handleGetData() {
updateLoadingStatus(DataLoadingStatusEnum.Error)
loadMoreText.value = '加载失败,请下拉刷新!'
}
finally {
uni.hideLoading()
finally {
uni.stopPullDownRefresh()
}
}
@@ -261,14 +257,14 @@ onReachBottom(() => {
</script>
<template>
<view class="app-page min-h-screen w-screen flex flex-col bg-page">
<view class="min-h-screen w-screen flex flex-col bg-page">
<!-- 自定义导航 -->
<uh-navbar default-title="归档" title-color="text-gray-900" />
<uh-navbar default-title="内容归档" title-color="text-gray-900" />
<!-- 顶部 tab(吸顶玻璃胶囊 chip,同收藏页) -->
<!-- 顶部-->
<wd-sticky>
<scroll-view scroll-x class="w-full whitespace-nowrap">
<view class="flex gap-2 px-3 pb-1 pt-3">
<view class="box-border flex gap-2 px-3 pb-1 pt-3">
<view
v-for="(tab, index) in archiveTabs" :key="tab.key"
class="uh-global-card-glass uh-shadow-xs inline-block border rounded-2xl px-5 py-1.5 text-sm"
@@ -280,37 +276,36 @@ onReachBottom(() => {
</view>
</scroll-view>
</wd-sticky>
<!-- 加载/错误/空占位(状态机) -->
<view v-if="loadingStatus !== 'success'">
<uh-data-loading
:loading-status="loadingStatus"
:empty-text="calcAuditModeEnabled ? '暂无归档的内容' : '暂无归档的文章'"
@refresh="handleGetData"
/>
</view>
<uh-data-loading v-if="loadingStatus !== 'success'"
:loading-status="loadingStatus"
:empty-text="calcAuditModeEnabled ? '暂无归档的内容' : '暂无归档的文章'"
@refresh="handleGetData"
/>
<!-- 内容区域 -->
<block v-else>
<!-- 时间线 -->
<view class="timeline px-4 pt-3">
<view v-for="(item, index) in dataList" :key="item.key" class="timeline-item flex">
<view class="timeline-left w-[96rpx] flex shrink-0 flex-col items-center">
<!-- <view class="timeline-left w-[96rpx] flex shrink-0 flex-col items-center">
<view class="timeline-dot mt-2 h-4 w-4 rounded-full bg-secondary shadow-[0_0_0_8rpx_rgba(215,249,76,0.3)]" />
<view v-if="index !== dataList.length - 1" class="timeline-line mt-2 w-[2rpx] flex-1 bg-black/5" />
</view>
<view class="timeline-content min-w-0 flex-1 pb-10 pl-5">
<view class="time mb-5 flex items-center gap-2">
<text class="text-[32rpx] text-gray-900 font-bold">{{ item.year }}</text>
<text v-if="activeTabIndex === 0" class="text-[32rpx] text-gray-900 font-bold">{{ item.month }}</text>
<text class="rounded-full bg-secondary px-2 py-0.5 text-[20rpx] text-[#4d7c0f] leading-none"> {{ item.posts.length }} {{ calcAuditModeEnabled ? '内容' : '文章' }}</text>
</view> -->
<!-- <view class="timeline-content min-w-0 flex-1 pb-10 pl-5"> -->
<view class="flex-1 pb-10">
<view class="mb-3 flex items-center gap-2">
<text class="text-md text-gray-900 font-bold">{{ item.year }}</text>
<text v-if="activeTabIndex === 0" class="text-md text-gray-900 font-bold">{{ item.month }}</text>
<text class="rounded-full bg-secondary px-2 py-1 text-xs text-gray-500 leading-none"> {{ item.posts.length }} {{ calcAuditModeEnabled ? '内容' : '文章' }}</text>
</view>
<view v-if="item.posts.length !== 0">
<view
v-for="post in item.posts"
:key="post.metadata.name"
class="post uh-global-card-glass mb-4 flex rounded-2xl p-4"
class="uh-global-card-glass mb-4 flex rounded-2xl p-4"
:class="calcCardLayout.card"
@click="handleToArticleDetail(post)"
>
@@ -323,7 +318,7 @@ onReachBottom(() => {
{{ post.status?.excerpt }}
</view>
<view class="post-info-time mt-2 text-[24rpx] text-gray-400">
发布时间{{ formatTime(post.spec.publishTime) }}
日期{{ formatTime(post.spec.publishTime) }}
</view>
</view>
</view>
@@ -337,10 +332,7 @@ onReachBottom(() => {
<view class="load-text pb-6 text-center text-[24rpx] text-gray-400">
{{ loadMoreText }}
</view>
<view class="to-top-btn uh-global-card-glass fixed bottom-[100rpx] right-6 z-6 h-[72rpx] w-[72rpx] flex items-center justify-center rounded-full" @click="handleToTopPage()">
<wd-icon name="arrow-up" size="20px" color="#6b7280" />
</view>
</view>
</block>
</view>
</template>