-
-
-
+
+
+ ⏳
+ 等待中
+
+
+
+
@@ -114,6 +116,9 @@ const placeholderColor = computed(() => {
});
const handleCardClick = () => {
+ // 安装或等待中禁止修改勾选
+ if (props.software.status === 'pending' || props.software.status === 'installing') return;
+
if (props.selectable && props.software.status !== 'installed') {
emit('toggleSelect', props.software.id);
}
@@ -135,7 +140,7 @@ const handleCardClick = () => {
cursor: default;
}
-.software-card:not(.installed-mode):hover {
+.software-card:not(.installed-mode):not(.is-busy):hover {
border-color: rgba(0, 122, 255, 0.3);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
@@ -145,6 +150,10 @@ const handleCardClick = () => {
border-color: rgba(0, 122, 255, 0.4);
}
+.software-card.is-busy {
+ opacity: 0.8;
+}
+
/* 勾选框样式 */
.selection-area {
margin-right: 16px;
@@ -302,31 +311,46 @@ const handleCardClick = () => {
cursor: not-allowed;
}
+.status-pending {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ width: 90px;
+ justify-content: center;
+ color: #AEAEB2;
+}
+
+.wait-icon {
+ font-size: 14px;
+}
+
+.wait-text {
+ font-size: 12px;
+ font-weight: 600;
+}
+
.progress-status {
display: flex;
align-items: center;
- gap: 10px;
+ flex-direction: column;
+ gap: 4px;
width: 90px;
justify-content: center;
}
-.progress-ring {
+.spinning-loader {
width: 18px;
height: 18px;
+ border: 2px solid rgba(0, 122, 255, 0.1);
+ border-top-color: var(--primary-color);
+ border-radius: 50%;
+ animation: spin 1s linear infinite;
}
-.progress-ring svg {
- transform: rotate(-90deg);
-}
-
-.progress-ring .bg {
- stroke: var(--border-color);
-}
-
-.progress-ring .fg {
- stroke: var(--primary-color);
- stroke-linecap: round;
- transition: stroke-dashoffset 0.3s ease;
+.loading-text {
+ font-size: 10px;
+ font-weight: 700;
+ color: var(--primary-color);
}
.status-success, .status-error {
@@ -343,4 +367,8 @@ const handleCardClick = () => {
.status-error {
color: #FF3B30;
}
+
+@keyframes spin {
+ to { transform: rotate(360deg); }
+}
diff --git a/src/store/software.ts b/src/store/software.ts
index 3121190..94fd0bf 100644
--- a/src/store/software.ts
+++ b/src/store/software.ts
@@ -46,24 +46,27 @@ export const useSoftwareStore = defineStore('software', {
});
},
sortedUpdates: (state) => [...state.updates].sort(sortByName),
- sortedAllSoftware: (state) => [...state.allSoftware].sort(sortByName)
+ sortedAllSoftware: (state) => [...state.allSoftware].sort(sortByName),
+ // 全局繁忙状态：只要有任何软件在等待或安装中，就锁定关键操作
+ isBusy: (state) => {
+ const allItems = [...state.essentials, ...state.updates, ...state.allSoftware];
+ return allItems.some(item => item.status === 'pending' || item.status === 'installing');
+ }
},
actions: {
async initializeApp() {
if (this.isInitialized) return;
-
this.initStatus = '正在同步 Winget 模块...';
try {
await invoke('initialize_app');
this.isInitialized = true;
} catch (err) {
this.initStatus = '环境配置失败，请检查运行日志';
- console.error('Init failed:', err);
- // 即使失败也允许进入，让用户看日志
setTimeout(() => { this.isInitialized = true; }, 2000);
}
},
toggleSelection(id: string, type: 'essential' | 'update') {
+ if (this.isBusy) return; // 繁忙时禁止修改勾选
const list = type === 'essential' ? this.selectedEssentialIds : this.selectedUpdateIds;
const index = list.indexOf(id);
if (index === -1) list.push(id);
@@ -95,6 +98,7 @@ export const useSoftwareStore = defineStore('software', {
this.essentials = await invoke('get_essentials')
},
async fetchUpdates() {
+ if (this.isBusy) return;
this.loading = true
try {
const res = await invoke('get_updates')
@@ -105,6 +109,7 @@ export const useSoftwareStore = defineStore('software', {
}
},
async fetchAll() {
+ if (this.isBusy) return;
this.loading = true
try {
const res = await invoke('get_all_software')
@@ -114,6 +119,7 @@ export const useSoftwareStore = defineStore('software', {
}
},
async syncDataIfNeeded(force = false) {
+ if (this.isBusy) return;
const now = Date.now();
const CACHE_TIMEOUT = 5 * 60 * 1000;
if (!force && this.allSoftware.length > 0 && (now - this.lastFetched < CACHE_TIMEOUT)) {
@@ -140,8 +146,12 @@ export const useSoftwareStore = defineStore('software', {
}
},
async install(id: string) {
+ // 这里的 logic 同时负责单个安装和批量安装的任务入队
const software = this.findSoftware(id)
- if (software) software.status = 'pending'
+ if (software) {
+ // 进入队列前统一标记为等待中
+ software.status = 'pending';
+ }
await invoke('install_software', { id })
},
findSoftware(id: string) {
diff --git a/src/views/AllSoftware.vue b/src/views/AllSoftware.vue
index c81db05..ebb3501 100644
--- a/src/views/AllSoftware.vue
+++ b/src/views/AllSoftware.vue
@@ -9,7 +9,7 @@