From 1c931c40b3083ac5d0e9b919a26bb3c2b1aefaf2 Mon Sep 17 00:00:00 2001
From: Seven <qiqiwatermelon@gmail.com>
Date: Sat, 3 Jan 2026 17:27:30 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=A4=9A=E7=A7=8D?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB=E6=95=88=E6=9E=9C=EF=BC=8C=E5=8C=85=E6=8B=AC?=
 =?UTF-8?q?=E8=A7=A6=E6=91=B8=E5=8F=8D=E9=A6=88=E3=80=81=E6=B6=9F=E6=BC=AA?=
 =?UTF-8?q?=E3=80=81=E5=BC=B9=E6=80=A7=E7=BC=A9=E6=94=BE=E5=92=8C=E6=BB=91?=
 =?UTF-8?q?=E5=85=A5=E5=8A=A8=E7=94=BB=EF=BC=8C=E4=BC=98=E5=8C=96=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E4=BA=A4=E4=BA=92=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/distribute/assets/css/animations.css | 114 ++++++++++++++++++
 packages/distribute/pages/index.vue           |  19 +--
 2 files changed, 125 insertions(+), 8 deletions(-)

diff --git a/packages/distribute/assets/css/animations.css b/packages/distribute/assets/css/animations.css
index 2d82021..d76b8fe 100644
--- a/packages/distribute/assets/css/animations.css
+++ b/packages/distribute/assets/css/animations.css
@@ -121,3 +121,117 @@
 .animate-rotate-glow {
   animation: rotate-glow 10s linear infinite;
 }
+
+/* 移动端触摸反馈动画 */
+@keyframes tap-feedback {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(0.95);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.animate-tap {
+  animation: tap-feedback 0.2s ease-out;
+}
+
+/* 涟漪效果 */
+@keyframes ripple {
+  0% {
+    transform: scale(0);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
+
+.animate-ripple {
+  animation: ripple 0.6s ease-out;
+}
+
+/* 弹性缩放动画 */
+@keyframes bounce-scale {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.animate-bounce-scale {
+  animation: bounce-scale 0.3s ease-out;
+}
+
+/* 滑入动画 - 从左 */
+@keyframes slide-in-left {
+  from {
+    opacity: 0;
+    transform: translateX(-30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.animate-slide-in-left {
+  animation: slide-in-left 0.4s ease-out forwards;
+  opacity: 0;
+}
+
+/* 滑入动画 - 从右 */
+@keyframes slide-in-right {
+  from {
+    opacity: 0;
+    transform: translateX(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.animate-slide-in-right {
+  animation: slide-in-right 0.4s ease-out forwards;
+  opacity: 0;
+}
+
+/* 脉冲缩放动画 */
+@keyframes pulse-scale {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.02);
+  }
+}
+
+.animate-pulse-scale {
+  animation: pulse-scale 2s ease-in-out infinite;
+}
+
+/* 隐藏滚动条 */
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+/* 平滑滚动 */
+.smooth-scroll {
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+}
diff --git a/packages/distribute/pages/index.vue b/packages/distribute/pages/index.vue
index d343a69..799a390 100644
--- a/packages/distribute/pages/index.vue
+++ b/packages/distribute/pages/index.vue
@@ -116,12 +116,14 @@ useHead({
               :label="locale === 'zh-CN' ? 'EN' : '中文'"
               color="neutral"
               variant="ghost"
+              class="transition-all duration-300 active:scale-90 touch-manipulation"
               @click="toggleLanguage"
             />
             <UButton
               :icon="isDark ? 'i-heroicons-sun' : 'i-heroicons-moon'"
               color="neutral"
               variant="ghost"
+              class="transition-all duration-300 active:scale-90 active:rotate-180 touch-manipulation"
               @click="colorMode.preference = isDark ? 'light' : 'dark'"
             />
           </div>
@@ -146,13 +148,14 @@ useHead({
         </div>
 
         <!-- Categories -->
-        <div class="flex items-center gap-2 overflow-x-auto pb-2">
+        <div class="flex items-center gap-2 overflow-x-auto pb-2 scrollbar-hide">
           <UButton
             v-for="category in categories"
             :key="category.id"
             :label="category.name[locale as 'zh-CN' | 'en-US']"
             :color="selectedCategory === category.id ? 'primary' : 'neutral'"
             :variant="selectedCategory === category.id ? 'solid' : 'ghost'"
+            class="transition-all duration-300 active:scale-90 touch-manipulation"
             @click="selectedCategory = category.id"
           />
         </div>
@@ -170,7 +173,7 @@ useHead({
           <div class="absolute -inset-0.5 bg-gradient-to-r from-primary-500 via-purple-500 to-blue-500 rounded-2xl opacity-0 group-hover:opacity-100 blur transition-all duration-500 group-hover:blur-md"></div>
           
           <UCard
-            class="cursor-pointer backdrop-blur-sm bg-white/90 dark:bg-gray-900/90 border border-gray-200/50 dark:border-gray-800/50 transition-all duration-500 hover:shadow-2xl hover:shadow-primary-500/20 hover:-translate-y-2 relative overflow-hidden"
+            class="cursor-pointer backdrop-blur-sm bg-white/90 dark:bg-gray-900/90 border border-gray-200/50 dark:border-gray-800/50 transition-all duration-500 hover:shadow-2xl hover:shadow-primary-500/20 hover:-translate-y-2 active:scale-95 active:shadow-lg relative overflow-hidden touch-manipulation"
             @click="openAppDetail(app)"
           >
             <!-- 内部发光效果 -->
@@ -178,9 +181,9 @@ useHead({
             
             <div class="flex items-start gap-4 relative z-10">
               <!-- App Icon -->
-              <div class="size-16 rounded-2xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white font-bold text-2xl shrink-0 shadow-lg shadow-blue-500/50 relative overflow-hidden group-hover:shadow-2xl group-hover:shadow-blue-500/60 transition-all duration-500 group-hover:scale-110 group-hover:rotate-3 p-2">
-                <div class="absolute inset-0 bg-gradient-to-tr from-white/0 via-white/30 to-white/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700"></div>
-                <img :src="app.icon" :alt="app.name" class="size-full object-contain relative z-10 rounded-lg" />
+              <div class="size-16 rounded-2xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white font-bold text-2xl shrink-0 shadow-lg shadow-blue-500/50 relative overflow-hidden group-hover:shadow-2xl group-hover:shadow-blue-500/60 transition-all duration-500 group-hover:scale-110 group-hover:rotate-3 group-active:scale-105 group-active:rotate-1 p-2">
+                <div class="absolute inset-0 bg-gradient-to-tr from-white/0 via-white/30 to-white/0 translate-x-[-100%] group-hover:translate-x-[100%] group-active:translate-x-[50%] transition-transform duration-700"></div>
+                <img :src="app.icon" :alt="app.name" class="size-full object-contain relative z-10 rounded-lg transition-transform duration-300 group-active:scale-95" />
               </div>
 
             <!-- App Info -->
@@ -207,7 +210,7 @@ useHead({
                 label="iOS"
                 size="sm"
                 block
-                class="transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/50 hover:-translate-y-1"
+                class="transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/50 hover:-translate-y-1 active:scale-95 active:shadow-md touch-manipulation"
                 @click.stop="handleDownload(app, 'ios')"
               />
               <UButton
@@ -216,7 +219,7 @@ useHead({
                 label="Android"
                 size="sm"
                 block
-                class="transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/50 hover:-translate-y-1"
+                class="transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/50 hover:-translate-y-1 active:scale-95 active:shadow-md touch-manipulation"
                 @click.stop="handleDownload(app, 'android')"
               />
               <UButton
@@ -225,7 +228,7 @@ useHead({
                 label="Web"
                 size="sm"
                 block
-                class="transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/50 hover:-translate-y-1"
+                class="transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/50 hover:-translate-y-1 active:scale-95 active:shadow-md touch-manipulation"
                 @click.stop="handleDownload(app, 'h5')"
               />
             </div>