From 87f9df80a53b3a405261f1b21054057f8d3f152b Mon Sep 17 00:00:00 2001
From: BTMuli <bt-muli@outlook.com>
Date: Tue, 17 Mar 2026 21:08:42 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=AB=20=E6=B7=BB=E5=8A=A0=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=92=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/app/t-pinWin.vue            | 23 ++++++++++++++++++++++
 src/components/app/t-postWidth.vue         | 23 ++++++++++++++++++++++
 src/components/app/t-shareBtn.vue          | 10 ++++++++++
 src/components/app/t-sidebar.vue           |  5 +++++
 src/components/app/t-switchTheme.vue       | 13 +++++++++++-
 src/components/func/loading.vue            |  4 ++--
 src/components/viewPost/vp-btn-collect.vue | 10 ++++++++++
 src/components/viewPost/vp-btn-reply.vue   | 10 ++++++++++
 8 files changed, 95 insertions(+), 3 deletions(-)

diff --git a/src/components/app/t-pinWin.vue b/src/components/app/t-pinWin.vue
index fbea919d..7f658cb7 100644
--- a/src/components/app/t-pinWin.vue
+++ b/src/components/app/t-pinWin.vue
@@ -45,8 +45,16 @@ async function switchPin(): Promise<void> {
   justify-content: center;
   border-radius: 50%;
   cursor: pointer;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+
+  &:active {
+    transform: scale(0.92);
+  }
 
   &.active {
+    animation: pin-pulse 0.3s ease;
     background: var(--tgc-btn-1);
     box-shadow: 1px 3px 6px var(--common-shadow-2);
     color: var(--btn-text);
@@ -54,6 +62,21 @@ async function switchPin(): Promise<void> {
 
   &:hover:not(.active) {
     background: var(--common-shadow-1);
+    transform: scale(1.05);
+  }
+}
+
+@keyframes pin-pulse {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.15);
+  }
+
+  100% {
+    transform: scale(1);
   }
 }
 
diff --git a/src/components/app/t-postWidth.vue b/src/components/app/t-postWidth.vue
index df244af8..cf007a1e 100644
--- a/src/components/app/t-postWidth.vue
+++ b/src/components/app/t-postWidth.vue
@@ -42,8 +42,16 @@ function switchPostWidth(): void {
   justify-content: center;
   border-radius: 50%;
   cursor: pointer;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+
+  &:active {
+    transform: scale(0.92);
+  }
 
   &.active {
+    animation: width-pulse 0.3s ease;
     background: var(--tgc-btn-1);
     box-shadow: 1px 3px 6px var(--common-shadow-2);
     color: var(--btn-text);
@@ -51,6 +59,21 @@ function switchPostWidth(): void {
 
   &:hover:not(.active) {
     background: var(--common-shadow-1);
+    transform: scale(1.05);
+  }
+}
+
+@keyframes width-pulse {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.15);
+  }
+
+  100% {
+    transform: scale(1);
   }
 }
 
diff --git a/src/components/app/t-shareBtn.vue b/src/components/app/t-shareBtn.vue
index f90e837d..52ac9dcf 100644
--- a/src/components/app/t-shareBtn.vue
+++ b/src/components/app/t-shareBtn.vue
@@ -55,6 +55,16 @@ async function shareContent(): Promise<void> {
   box-shadow: 1px 3px 6px var(--common-shadow-2);
   color: var(--btn-text);
   cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.share-box:hover {
+  box-shadow: 2px 4px 12px var(--common-shadow-4);
+  transform: scale(1.15);
+}
+
+.share-box:active {
+  transform: scale(0.95);
 }
 
 .dark .share-box {
diff --git a/src/components/app/t-sidebar.vue b/src/components/app/t-sidebar.vue
index 6aa6e8e3..d179e2cb 100644
--- a/src/components/app/t-sidebar.vue
+++ b/src/components/app/t-sidebar.vue
@@ -816,6 +816,7 @@ async function tryLaunchGame(): Promise<void> {
   width: 24px;
   height: 24px;
   border-radius: 4px;
+  transition: transform 0.2s ease;
 
   &.paimon {
     position: relative;
@@ -824,6 +825,10 @@ async function tryLaunchGame(): Promise<void> {
     height: 32px;
     border-radius: 50%;
   }
+
+  &:hover {
+    transform: scale(1.15);
+  }
 }
 
 .side-list-menu {
diff --git a/src/components/app/t-switchTheme.vue b/src/components/app/t-switchTheme.vue
index 0631220c..51ecaedc 100644
--- a/src/components/app/t-switchTheme.vue
+++ b/src/components/app/t-switchTheme.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="switch-box" :title="isDefault ? '切换到深色模式' : '切换到浅色模式'">
-    <div class="switch-btn" @click="switchTheme()">
+    <div class="switch-btn" :class="{ 'is-dark': !isDefault }" @click="switchTheme()">
       <v-icon size="20">
         {{ isDefault ? "mdi-weather-night" : "mdi-weather-sunny" }}
       </v-icon>
@@ -57,6 +57,12 @@ onUnmounted(() => {
   box-shadow: 1px 3px 6px var(--common-shadow-2);
   color: var(--btn-text);
   cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.switch-box:hover {
+  box-shadow: 1px 3px 10px var(--common-shadow-4);
+  transform: scale(1.1);
 }
 
 .dark .switch-box {
@@ -72,5 +78,10 @@ onUnmounted(() => {
   height: 20px;
   align-items: center;
   justify-content: center;
+  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+
+.switch-btn.is-dark {
+  transform: rotate(360deg);
 }
 </style>
diff --git a/src/components/func/loading.vue b/src/components/func/loading.vue
index 089ece65..b89478da 100644
--- a/src/components/func/loading.vue
+++ b/src/components/func/loading.vue
@@ -176,9 +176,9 @@ defineExpose({ displayBox });
   align-items: center;
   justify-content: center;
   padding: 10px;
-  border: #f4d8a8ff 1px solid;
+  border: var(--tgc-yellow-3) 1px solid;
   border-radius: 5px;
-  color: #f4d8a8ff;
+  color: var(--tgc-yellow-2);
 }
 
 .loading-title {
diff --git a/src/components/viewPost/vp-btn-collect.vue b/src/components/viewPost/vp-btn-collect.vue
index 611303b8..2d7c4854 100644
--- a/src/components/viewPost/vp-btn-collect.vue
+++ b/src/components/viewPost/vp-btn-collect.vue
@@ -98,6 +98,7 @@ async function switchCollect(): Promise<void> {
   justify-content: center;
   border-radius: 50%;
   cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
   &.active {
     background: var(--tgc-btn-1);
@@ -108,6 +109,15 @@ async function switchCollect(): Promise<void> {
   &:hover:not(.active) {
     background: var(--common-shadow-1);
   }
+
+  &:hover {
+    box-shadow: 2px 4px 12px var(--common-shadow-4);
+    transform: scale(1.15);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
 }
 
 .dark .tbc-box {
diff --git a/src/components/viewPost/vp-btn-reply.vue b/src/components/viewPost/vp-btn-reply.vue
index f270fb40..aba95f7f 100644
--- a/src/components/viewPost/vp-btn-reply.vue
+++ b/src/components/viewPost/vp-btn-reply.vue
@@ -225,6 +225,16 @@ async function handleDebug(): Promise<void> {
   box-shadow: 1px 3px 6px var(--common-shadow-2);
   color: var(--btn-text);
   cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.tpr-main-box:hover {
+  box-shadow: 2px 4px 12px var(--common-shadow-4);
+  transform: scale(1.15);
+}
+
+.tpr-main-box:active {
+  transform: scale(0.95);
 }
 
 .dark .tpr-main-box {