From 4ce097bae032601572112d4647f6374875ca9719 Mon Sep 17 00:00:00 2001
From: Elysia <a.elysia@proton.me>
Date: Sat, 31 Jan 2026 00:59:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E5=AE=89=E8=A3=85?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E7=8A=B6=E6=80=81=E5=8F=8D=E9=A6=88=EF=BC=8C?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=AE=89=E8=A3=85=E9=98=9F=E5=88=97=E6=8F=90?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                         |  2 +-
 src/components/AppDetailModal.vue | 18 +++++++++++++-----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 5d9f9c43..8e7fa807 100644
--- a/README.md
+++ b/README.md
@@ -27,7 +27,7 @@
   - [x] 显示本地已安装app
   - [x] 支持显示本地是否已经安装
   - [ ] 本地应用列表区分依赖和用户安装的包（或者干脆不显示依赖包）
-  - [ ] 安装/卸载时UI提示（重要）
+  - [x] 安装/卸载时UI提示（重要）
 - [x] 实现应用搜索
   - [ ] 切换分类时默认不应用搜索，需按下回车键才应用搜索
 - [x] 修改UI，使其更美观（考虑换成如tailwindcss等库）
diff --git a/src/components/AppDetailModal.vue b/src/components/AppDetailModal.vue
index 69816aad..6f0973b7 100644
--- a/src/components/AppDetailModal.vue
+++ b/src/components/AppDetailModal.vue
@@ -22,10 +22,12 @@
           </div>
           <div class="flex flex-wrap gap-2 lg:ml-auto">
             <button v-if="!isinstalled" type="button"
-              class="inline-flex items-center gap-2 rounded-2xl bg-gradient-to-r from-brand to-brand-dark px-4 py-2 text-sm font-semibold text-white shadow-lg disabled:opacity-40 transition hover:-translate-y-0.5"
-              @click="handleInstall">
-              <i class="fas fa-download"></i>
-              <span>安装</span>
+              class="inline-flex items-center gap-2 rounded-2xl bg-gradient-to-r px-4 py-2 text-sm font-semibold text-white shadow-lg disabled:opacity-40 transition hover:-translate-y-0.5"
+              :class="installFeedback ? 'from-emerald-500 to-emerald-600' : 'from-brand to-brand-dark'"
+              @click="handleInstall"
+              :disabled="installFeedback">
+              <i class="fas" :class="installFeedback ? 'fa-check' : 'fa-download'"></i>
+              <span>{{ installFeedback ? '已加入队列' : '安装' }}</span>
             </button>
             <button v-else type="button"
               class="inline-flex items-center gap-2 rounded-2xl bg-gradient-to-r from-rose-500 to-rose-600 px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-rose-500/30 disabled:opacity-40 transition hover:-translate-y-0.5"
@@ -99,7 +101,7 @@
 </template>
 
 <script setup>
-import { computed, defineProps, defineEmits, useAttrs } from 'vue';
+import { computed, defineProps, defineEmits, useAttrs, ref } from 'vue';
 import { APM_STORE_ARCHITECTURE, APM_STORE_BASE_URL } from '../global/storeConfig';
 
 defineOptions({ inheritAttrs: false });
@@ -135,8 +137,14 @@ const closeModal = () => {
   emit('close');
 };
 
+const installFeedback = ref(false);
+
 const handleInstall = () => {
   emit('install');
+  installFeedback.value = true;
+  setTimeout(() => {
+    installFeedback.value = false;
+  }, 2000);
 };
 
 const handleRemove = () => {