refactor: replace _post-tabs.scss with UnoCSS

Former-commit-id: 439c3c5ebecbfc4fed67180cb657d13a6b018cca

3 files changed, 57 insertions, 229 deletions

diff --git a/assets/css/components/_post-tabs.scss b/assets/css/components/_post-tabs.scss
deleted file mode 100644
index 475fc12d..00000000
--- a/assets/css/components/_post-tabs.scss
+++ /dev/null
@@ -1,206 +0,0 @@
-.post-actions-container {
-  margin: 2rem 0 1rem 0;
-}
-
-.post-actions-nav {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1.5rem;
-}
-
-.left-actions {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.right-actions {
-  display: flex;
-  gap: 0.25rem;
-}
-
-.action-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  min-width: 48px;
-  height: 48px;
-  padding: 0 8px;
-  border: none;
-  background: transparent;
-  color: #666;
-  cursor: pointer;
-  text-decoration: none;
-  position: relative;
-  transition: all 0.2s ease;
-}
-
-.action-btn:hover {
-  background: rgba(0, 0, 0, 0.05);
-  border-radius: 8px;
-}
-
-/* 右侧小按钮样式 */
-.small-btn {
-  min-width: 32px;
-  height: 32px;
-  padding: 0 4px;
-}
-
-.small-btn:hover {
-  background: transparent;
-  opacity: 0.7;
-}
-
-/* 图标样式 */
-.icon {
-  filter: invert(0.4);
-  flex-shrink: 0;
-}
-
-/* Tooltip 样式 */
-.action-btn::before {
-  content: attr(title);
-  position: absolute;
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%) translateY(5px);
-  background: rgba(0, 0, 0, 0.8);
-  color: white;
-  padding: 6px 10px;
-  border-radius: 4px;
-  font-size: 12px;
-  white-space: nowrap;
-  opacity: 0;
-  visibility: hidden;
-  transition: all 0.3s ease;
-  pointer-events: none;
-  margin-bottom: 8px;
-  z-index: 1000;
-}
-
-.action-btn:hover::before {
-  opacity: 1;
-  visibility: visible;
-  transform: translateX(-50%) translateY(0);
-}
-
-.like-button-container {
-  position: relative;
-}
-
-.like-icon {
-  filter: invert(0.4);
-  flex-shrink: 0;
-  transition: all 0.3s ease;
-}
-
-.liked .like-icon {
-  filter: brightness(0) saturate(100%) invert(8%) sepia(100%) saturate(7500%) hue-rotate(0deg) brightness(70%) contrast(150%);
-  animation: heartbeat 1.5s ease-in-out infinite;
-}
-
-.count-badge {
-  font-size: 12px;
-  font-weight: bold;
-  color: #666;
-  min-width: 16px;
-  text-align: center;
-  background: rgba(255, 255, 255, 0.9);
-  border-radius: 10px;
-  padding: 2px 6px;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-}
-
-.liked .count-badge {
-  color: #8B0000;
-}
-
-.comments-section {
-  margin-top: 1rem;
-}
-
-/* 心脏搏动动画 */
-@keyframes heartbeat {
-  0%, 100% { transform: scale(1); }
-  25% { transform: scale(1.1); }
-  50% { transform: scale(1.2); }
-  75% { transform: scale(1.1); }
-}
-
-/* 暗色主题适配 */
-@media (prefers-color-scheme: dark) {
-  .action-btn {
-    color: #999;
-  }
-
-  .action-btn:hover {
-    background: rgba(255, 255, 255, 0.05);
-  }
-
-  .small-btn:hover {
-    background: transparent;
-    opacity: 0.7;
-  }
-
-  /* 暗色模式下的图标滤镜 */
-  .icon {
-    filter: invert(0.7) brightness(1.2);
-  }
-
-  .like-icon {
-    filter: invert(0.7) brightness(1.2);
-  }
-
-  .liked .like-icon {
-    filter: brightness(0) saturate(100%) invert(8%) sepia(100%) saturate(7500%) hue-rotate(0deg) brightness(70%) contrast(150%);
-    animation: heartbeat 1.5s ease-in-out infinite;
-  }
-
-  .action-btn::before {
-    background: rgba(255, 255, 255, 0.9);
-    color: #000;
-  }
-
-  .count-badge {
-    color: #999;
-    background: rgba(0, 0, 0, 0.7);
-  }
-}
-
-/* 移动端适配 */
-@media (max-width: 768px) {
-  .post-actions-nav {
-    gap: 0.5rem;
-  }
-
-  .left-actions {
-    gap: 0.5rem;
-  }
-
-  .right-actions {
-    gap: 0.25rem;
-  }
-
-  .action-btn {
-    min-width: 44px;
-    height: 44px;
-    padding: 0 6px;
-  }
-
-  .small-btn {
-    min-width: 28px;
-    height: 28px;
-    padding: 0 2px;
-  }
-
-  .action-btn::before {
-    left: 50%;
-    transform: translateX(-50%) translateY(5px);
-  }
-
-  .action-btn:hover::before {
-    transform: translateX(-50%) translateY(0);
-  }
-}
diff --git a/assets/css/content.scss b/assets/css/content.scss
index f671b23d..7fba283f 100644
--- a/assets/css/content.scss
+++ b/assets/css/content.scss
@@ -1,7 +1,6 @@
 @import "utils/mixins";
 
 @import "components/post";
-@import "components/post-tabs";
 
 @import "libraries/littlefoot";
 @import "libraries/fancybox";
diff --git a/layouts/_partials/posts/action-menu.html b/layouts/_partials/posts/action-menu.html
index df2a3c2a..625f33e2 100644
--- a/layouts/_partials/posts/action-menu.html
+++ b/layouts/_partials/posts/action-menu.html
@@ -1,41 +1,66 @@
-<div class="post-actions-container">
+<div class="my-8 mb-4">
   <!-- 操作按钮组 -->
-  <div class="post-actions-nav">
-    <div class="left-actions">
-      <button class="action-btn" id="comments-toggle" title="评论">
-        <img src="/img/comments.svg" width="20" height="20" alt="评论" class="icon" />
-        <span class="count-badge" id="comment-count">...</span>
+  <div class="flex justify-between items-center mb-6">
+    <div class="flex gap-2">
+      <button class="invert-if-dark flex items-center justify-center gap-1.5 min-w-12 h-12 px-2 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:bg-black/5 hover:rounded-lg group" id="comments-toggle" title="评论">
+        <img src="/img/comments.svg" width="20" height="20" alt="评论" class="brightness-40 flex-shrink-0 dark:brightness-70 dark:contrast-120" />
+        <span class="text-xs font-bold text-gray-600 min-w-4 text-center bg-white/90 rounded-xl px-1.5 py-0.5 shadow-sm dark:text-gray-400 dark:bg-black/70" id="comment-count">...</span>
+        <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 translate-y-1 bg-black/80 text-white px-2.5 py-1.5 rounded text-xs whitespace-nowrap opacity-0 invisible transition-all duration-300 pointer-events-none mb-2 z-1000 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 dark:bg-white/90 dark:text-black">评论</div>
       </button>
 
       <!-- 点赞按钮 -->
-      <div class="like-button-container" id="like-container-{{ .File.UniqueID | urlize }}">
-        <button class="action-btn like-btn"
+      <div class="relative" id="like-container-{{ .File.UniqueID | urlize }}">
+        <button class="invert-if-dark flex items-center justify-center gap-1.5 min-w-12 h-12 px-2 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:bg-black/5 hover:rounded-lg group"
                 onclick="sendLike('{{ .File.UniqueID | urlize }}')"
                 id="like-btn-{{ .File.UniqueID | urlize }}"
                 title="为这篇文章献上心脏"
                 data-liked-title="你已经献上心脏了">
-          <img src="/img/heart-organ.svg" width="20" height="20" alt="点赞" class="like-icon" />
-          <span class="count-badge" id="like-count-{{ .File.UniqueID | urlize }}">...</span>
+          <img src="/img/heart-organ.svg" width="20" height="20" alt="点赞" class="brightness-40 flex-shrink-0 transition-all duration-300 dark:brightness-70 dark:contrast-120" id="like-icon-{{ .File.UniqueID | urlize }}" />
+          <span class="text-xs font-bold text-gray-600 min-w-4 text-center bg-white/90 rounded-xl px-1.5 py-0.5 shadow-sm dark:text-gray-400 dark:bg-black/70" id="like-count-{{ .File.UniqueID | urlize }}">...</span>
+          <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 translate-y-1 bg-black/80 text-white px-2.5 py-1.5 rounded text-xs whitespace-nowrap opacity-0 invisible transition-all duration-300 pointer-events-none mb-2 z-1000 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 dark:bg-white/90 dark:text-black">为这篇文章献上心脏</div>
         </button>
       </div>
     </div>
 
-    <div class="right-actions">
-      <a href="https://t.me/teaparty418" target="_blank" class="action-btn small-btn" title="Telegram 群组" data-umami-event="✈️ Click Telegram link from post tabs">
-        <img src="/img/paper-plane.svg" width="16" height="16" alt="Telegram" class="icon" />
+    <div class="flex gap-1">
+      <a href="https://t.me/teaparty418" target="_blank" class="invert-if-dark flex items-center justify-center gap-1.5 min-w-8 h-8 px-1 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:opacity-70 group" title="Telegram 群组" data-umami-event="✈️ Click Telegram link from post tabs">
+        <img src="/img/paper-plane.svg" width="16" height="16" alt="Telegram" class="brightness-40 flex-shrink-0 dark:brightness-70 dark:contrast-120" />
+        <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 translate-y-1 bg-black/80 text-white px-2.5 py-1.5 rounded text-xs whitespace-nowrap opacity-0 invisible transition-all duration-300 pointer-events-none mb-2 z-1000 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 dark:bg-white/90 dark:text-black">Telegram 群组</div>
       </a>
-      <a href="/sponsor" class="action-btn small-btn" title="赞助作者" data-umami-event="💗 Click sponsor button from post tabs">
-        <img src="/img/coffee.svg" width="16" height="16" alt="赞助" class="icon" />
+      <a href="/sponsor" class="invert-if-dark flex items-center justify-center gap-1.5 min-w-8 h-8 px-1 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:opacity-70 group" title="赞助作者" data-umami-event="💗 Click sponsor button from post tabs">
+        <img src="/img/coffee.svg" width="16" height="16" alt="赞助" class="brightness-40 flex-shrink-0 dark:brightness-70 dark:contrast-120" />
+        <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 translate-y-1 bg-black/80 text-white px-2.5 py-1.5 rounded text-xs whitespace-nowrap opacity-0 invisible transition-all duration-300 pointer-events-none mb-2 z-1000 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 dark:bg-white/90 dark:text-black">赞助作者</div>
       </a>
     </div>
   </div>
 
   <!-- 评论区域 -->
-  <div class="comments-section" id="comments-section" style="display: none;">
+  <div class="mt-4" id="comments-section" style="display: none;">
     {{ partial "posts/comment.html" . }}
   </div>
 </div>
 
+<style>
+@keyframes heartbeat {
+  0%, 100% { transform: scale(1); }
+  25% { transform: scale(1.1); }
+  50% { transform: scale(1.2); }
+  75% { transform: scale(1.1); }
+}
+
+.heartbeat {
+  animation: heartbeat 1.5s ease-in-out infinite;
+}
+
+.liked-heart {
+  filter: brightness(0) saturate(100%) invert(8%) sepia(100%) saturate(7500%) hue-rotate(0deg) brightness(70%) contrast(150%) !important;
+}
+
+.liked-count {
+  color: #8B0000 !important;
+}
+</style>
+
 <script>
 // 评论展开/收起功能
 document.addEventListener('DOMContentLoaded', function() {
@@ -95,6 +120,8 @@ function fetchGiscusCommentCount() {
     return;
   }
 
+  const likeIconEl = document.getElementById("like-icon-" + pageId);
+
   function updateTooltip() {
     if (containerEl.classList.contains('liked')) {
       btnEl.setAttribute('title', btnEl.getAttribute('data-liked-title'));
@@ -103,15 +130,25 @@ function fetchGiscusCommentCount() {
     }
   }
 
+  function setLikedState() {
+    if (likeIconEl) {
+      likeIconEl.classList.add('liked-heart', 'heartbeat');
+    }
+    if (countEl) {
+      countEl.classList.add('liked-count');
+    }
+    btnEl.disabled = true;
+    containerEl.classList.add('liked');
+    updateTooltip();
+  }
+
   function fetchLikes() {
     fetch("https://like.guhub.cn/like/" + pageId)
       .then(resp => resp.json())
       .then(data => {
         countEl.innerText = data.likes ?? 0;
         if (localStorage.getItem("liked_" + pageId)) {
-          btnEl.disabled = true;
-          containerEl.classList.add("liked");
-          updateTooltip();
+          setLikedState();
         }
       })
       .catch(() => {
@@ -133,9 +170,7 @@ function fetchGiscusCommentCount() {
       .then(data => {
         localStorage.setItem("liked_" + pageId, "1");
         countEl.innerText = data.likes ?? 1;
-        btnEl.disabled = true;
-        containerEl.classList.add("liked");
-        updateTooltip();
+        setLikedState();
       })
       .catch(() => {
         alert("点赞失败，请稍后再试");