1
0
mirror of https://github.com/ialley-workshop-open/uni-halo.git synced 2026-07-27 04:20:43 +08:00

refactor(blog-post-detail): 重构文章详情页布局与交互栏

1.  将分类和标签整合到文章标题下方统一展示
2.  移除独立的标签区域,将互动操作栏改为底部浮动栏
3.  新增分类标签样式优化,调整整体视觉风格
4.  添加阴影和毛玻璃背景工具类
This commit is contained in:
小莫唐尼
2026-06-15 17:14:48 +08:00
parent 2cc78dd329
commit 01c929c4b5
+66 -35
View File
@@ -174,12 +174,16 @@ onShareAppMessage(() => {
<!-- 标题 --> <!-- 标题 -->
<text class="text-lg text-gray-900 font-bold leading-6">{{ post?.spec?.title ?? '加载中...' }}</text> <text class="text-lg text-gray-900 font-bold leading-6">{{ post?.spec?.title ?? '加载中...' }}</text>
<!-- 分类标签 --> <!-- 分类 & 标签 -->
<view v-if="categories.length > 0" class="flex flex-wrap items-center gap-2"> <view v-if="categories.length > 0 || tags.length > 0" class="flex flex-wrap items-center gap-2">
<view v-for="cat in categories" :key="cat.metadata.name" <view v-for="cat in categories" :key="cat.metadata.name"
class="rounded-full bg-gray-50 px-2.5 py-0.5 text-xs text-gray-600"> class="rounded-full bg-gray-900 px-2.5 py-1 text-xs text-white font-medium">
{{ cat.spec?.displayName }} {{ cat.spec?.displayName }}
</view> </view>
<view v-for="tag in tags" :key="tag.metadata.name"
class="rounded-full border border-gray-200 bg-white px-2.5 py-1 text-xs text-gray-500">
# {{ tag.spec?.displayName }}
</view>
</view> </view>
<!-- 元信息 --> <!-- 元信息 -->
@@ -216,38 +220,8 @@ onShareAppMessage(() => {
<wd-loading /> <wd-loading />
</view> </view>
<!-- 标签区域 --> <!-- 底部操作栏占位 -->
<view v-if="tags.length > 0" class="uh-shadow-xs box-border w-full rounded-2xl bg-white p-4"> <view class="h-20 w-full" />
<view class="mb-3 text-sm text-gray-900 font-bold">
标签
</view>
<view class="flex flex-wrap gap-2">
<view v-for="tag in tags" :key="tag.metadata.name"
class="border border-gray-200 rounded-full px-3 py-1 text-xs text-gray-600">
# {{ tag.spec?.displayName }}
</view>
</view>
</view>
<!-- 互动操作栏 -->
<view class="uh-shadow-xs box-border w-full flex items-center justify-around rounded-2xl bg-white p-4">
<view class="flex flex-col items-center gap-y-1" @click="handleUpvote">
<view class="h-10 w-10 center rounded-full" :class="isUpvoted ? 'bg-red-50' : 'bg-gray-50'">
<wd-icon :name="isUpvoted ? 'thumb-up' : 'thumb-up'" :color="isUpvoted ? '#EF4444' : '#6B7280'"
:size="20" />
</view>
<text class="text-[11px]" :class="isUpvoted ? 'text-red-500' : 'text-gray-500'">
{{ stats.upvote }}
</text>
</view>
<view class="flex flex-col items-center gap-y-1" @click="handleShare">
<view class="h-10 w-10 center rounded-full bg-gray-50">
<wd-icon name="share" color="#6B7280" :size="20" />
</view>
<text class="text-[11px] text-gray-500">分享</text>
</view>
</view>
<!-- 上一篇/下一篇导航 --> <!-- 上一篇/下一篇导航 -->
<view v-if="prevPost || nextPost" <view v-if="prevPost || nextPost"
@@ -288,6 +262,54 @@ onShareAppMessage(() => {
<view class="pb-safe"> <view class="pb-safe">
<view class="h-4 w-full" /> <view class="h-4 w-full" />
</view> </view>
<!-- 底部浮动操作栏iOS 26 风格 -->
<view class="fixed bottom-6 left-4 right-4 z-100 flex items-center gap-x-3" @touchmove.stop.prevent>
<!-- 操作栏主体 -->
<view
class="uh-shadow-sm uh-backdrop-blur flex flex-1 items-center justify-around border border-white rounded-full border-solid bg-white/95 px-2"
style="height: 54px"
>
<!-- 点赞 -->
<view class="flex items-center gap-x-1.5" @click="handleUpvote">
<view
class="h-9 w-9 center rounded-full transition-colors"
:class="isUpvoted ? 'bg-red-50' : 'bg-transparent'"
>
<wd-icon
name="thumb-up"
:color="isUpvoted ? '#EF4444' : '#6B7280'"
:size="18"
/>
</view>
<text class="text-xs font-medium" :class="isUpvoted ? 'text-red-500' : 'text-gray-600'">
{{ stats.upvote }}
</text>
</view>
<!-- 分割线 -->
<view class="h-6 w-1px bg-gray-200" />
<!-- 评论 -->
<view class="flex items-center gap-x-1.5">
<view class="h-9 w-9 center rounded-full bg-transparent">
<wd-icon name="chat" color="#6B7280" :size="18" />
</view>
<text class="text-xs text-gray-600 font-medium">{{ stats.comment }}</text>
</view>
<!-- 分割线 -->
<view class="h-6 w-1px bg-gray-200" />
<!-- 分享 -->
<view class="flex items-center gap-x-1.5" @click="handleShare">
<view class="h-9 w-9 center rounded-full bg-transparent">
<wd-icon name="share" color="#6B7280" :size="18" />
</view>
<text class="text-xs text-gray-600 font-medium">分享</text>
</view>
</view>
</view>
</view> </view>
</template> </template>
@@ -299,4 +321,13 @@ onShareAppMessage(() => {
.uh-shadow-card { .uh-shadow-card {
box-shadow: 0 16rpx 60rpx rgba(0, 0, 0, 0.04); box-shadow: 0 16rpx 60rpx rgba(0, 0, 0, 0.04);
} }
.uh-shadow-sm {
box-shadow: 0 0 24rpx rgba(0, 0, 0, 0.075);
}
.uh-backdrop-blur {
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
</style> </style>