💫 添加交互效果

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>