💫 添加交互效果

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);
   }
 }
 

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);
   }
 }
 

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 {

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 {

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>

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 {

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 {

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 {