spark-store-project/spark-store
15
0
Fork 0
mirror of https://gitee.com/spark-store-project/spark-store synced 2026-04-26 09:20:18 +08:00
Code Issues 1 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Elysia
2026-01-31 00:59:23 +08:00
parent 97997182bc
commit 4ce097bae0
2 changed files with 14 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

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

18
src/components/AppDetailModal.vue
View File

@@ -22,10 +22,12 @@
</div> </div>
<div class="flex flex-wrap gap-2 lg:ml-auto"> <div class="flex flex-wrap gap-2 lg:ml-auto">
<button v-if="!isinstalled" type="button" <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" 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"
@click="handleInstall"> :class="installFeedback ? 'from-emerald-500 to-emerald-600' : 'from-brand to-brand-dark'"
<i class="fas fa-download"></i> @click="handleInstall"
<span>安装</span> :disabled="installFeedback">
<i class="fas" :class="installFeedback ? 'fa-check' : 'fa-download'"></i>
<span>{{ installFeedback ? '已加入队列' : '安装' }}</span>
</button> </button>
<button v-else type="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" 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> </template>
<script setup> <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'; import { APM_STORE_ARCHITECTURE, APM_STORE_BASE_URL } from '../global/storeConfig';
defineOptions({ inheritAttrs: false }); defineOptions({ inheritAttrs: false });
@@ -135,8 +137,14 @@ const closeModal = () => {
emit('close'); emit('close');
}; };
const installFeedback = ref(false);
const handleInstall = () => { const handleInstall = () => {
emit('install'); emit('install');
installFeedback.value = true;
setTimeout(() => {
installFeedback.value = false;
}, 2000);
}; };
const handleRemove = () => { const handleRemove = () => {