From 01c929c4b527b7cc6a88fe0a3a7e0aef5557ca60 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E8=8E=AB=E5=94=90=E5=B0=BC?=
 <tzxiaomo@outlook.com>
Date: Mon, 15 Jun 2026 17:14:48 +0800
Subject: [PATCH] =?UTF-8?q?refactor(blog-post-detail):=20=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84=E6=96=87=E7=AB=A0=E8=AF=A6=E6=83=85=E9=A1=B5=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E4=B8=8E=E4=BA=A4=E4=BA=92=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1.  将分类和标签整合到文章标题下方统一展示
2.  移除独立的标签区域，将互动操作栏改为底部浮动栏
3.  新增分类标签样式优化，调整整体视觉风格
4.  添加阴影和毛玻璃背景工具类
---
 src/subpkg-blog/post-detail/post-detail.vue | 101 +++++++++++++-------
 1 file changed, 66 insertions(+), 35 deletions(-)

diff --git a/src/subpkg-blog/post-detail/post-detail.vue b/src/subpkg-blog/post-detail/post-detail.vue
index b02a0c7..2959855 100644
--- a/src/subpkg-blog/post-detail/post-detail.vue
+++ b/src/subpkg-blog/post-detail/post-detail.vue
@@ -174,12 +174,16 @@ onShareAppMessage(() => {
         <!-- 标题 -->
         <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"
-            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 }}
           </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>
 
         <!-- 元信息 -->
@@ -216,38 +220,8 @@ onShareAppMessage(() => {
         <wd-loading />
       </view>
 
-      <!-- 标签区域 -->
-      <view v-if="tags.length > 0" class="uh-shadow-xs box-border w-full rounded-2xl bg-white p-4">
-        <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 class="h-20 w-full" />
 
       <!-- 上一篇/下一篇导航 -->
       <view v-if="prevPost || nextPost"
@@ -288,6 +262,54 @@ onShareAppMessage(() => {
     <view class="pb-safe">
       <view class="h-4 w-full" />
     </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>
 </template>
 
@@ -299,4 +321,13 @@ onShareAppMessage(() => {
 .uh-shadow-card {
   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>