feat: 更新安装按钮状态反馈，添加安装队列提示

README.md

@@ -27,7 +27,7 @@
   - [x] 显示本地已安装app
   - [x] 支持显示本地是否已经安装
   - [ ] 本地应用列表区分依赖和用户安装的包（或者干脆不显示依赖包）
-  - [ ] 安装/卸载时UI提示（重要）
+  - [x] 安装/卸载时UI提示（重要）
 - [x] 实现应用搜索
   - [ ] 切换分类时默认不应用搜索，需按下回车键才应用搜索
 - [x] 修改UI，使其更美观（考虑换成如tailwindcss等库）

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 = () => {