fix updating ui

src/components/SoftwareCard.vue

@@ -3,7 +3,8 @@
     class="software-card" 
     :class="{ 
       'installed-mode': software.status === 'installed',
-      'is-selected': isSelected && software.status !== 'installed'
+      'is-selected': isSelected && software.status !== 'installed',
+      'is-busy': software.status === 'pending' || software.status === 'installing'
     }"
     @click="handleCardClick"
   >
@@ -13,7 +14,7 @@
         class="checkbox" 
         :class="{ 
           'checked': isSelected, 
-          'disabled': software.status === 'installed' 
+          'disabled': software.status === 'installed' || software.status === 'pending' || software.status === 'installing'
         }"
       >
         <span v-if="isSelected">✓</span>
@@ -60,15 +61,16 @@
           已安装
         </button>
         
-        <div v-else-if="software.status === 'installing' || software.status === 'pending'" class="progress-status">
+        <!-- 等待中状态 -->
-          <div class="progress-ring">
+        <div v-else-if="software.status === 'pending'" class="status-pending">
-            <svg viewBox="0 0 32 32">
+          <span class="wait-icon">⏳</span>
-              <circle class="bg" cx="16" cy="16" r="14" fill="none" stroke-width="4" />
+          <span class="wait-text">等待中</span>
-              <circle class="fg" cx="16" cy="16" r="14" fill="none" stroke-width="4" 
-                :style="{ strokeDasharray: 88, strokeDashoffset: 88 - (88 * (software.progress || 0.5)) }" 
-              />
-            </svg>
         </div>
+
+        <!-- 安装中状态：旋转 Loading -->
+        <div v-else-if="software.status === 'installing'" class="progress-status">
+          <div class="spinning-loader"></div>
+          <span class="loading-text">正在安装</span>
         </div>
 
         <div v-else-if="software.status === 'success'" class="status-success">
@@ -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 {
+.loading-text {
-  transform: rotate(-90deg);
+  font-size: 10px;
-}
+  font-weight: 700;
-
+  color: var(--primary-color);
-.progress-ring .bg {
-  stroke: var(--border-color);
-}
-
-.progress-ring .fg {
-  stroke: var(--primary-color);
-  stroke-linecap: round;
-  transition: stroke-dashoffset 0.3s ease;
 }
 
 .status-success, .status-error {
@@ -343,4 +367,8 @@ const handleCardClick = () => {
 .status-error {
   color: #FF3B30;
 }
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
 </style>

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

src/views/AllSoftware.vue

@@ -9,7 +9,7 @@
         <button 
           @click="store.fetchAll" 
           class="secondary-btn action-btn" 
-          :disabled="store.loading"
+          :disabled="store.loading || store.isBusy"
         >
           <span class="icon" :class="{ 'spinning': store.loading }">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
@@ -27,6 +27,7 @@
             v-model="searchQuery" 
             placeholder="搜索已安装的软件..." 
             class="search-input"
+            :disabled="store.isBusy"
           />
         </div>
       </div>
@@ -118,7 +119,7 @@ const filteredSoftware = computed(() => {
   white-space: nowrap;
 }
 
-.action-btn:hover {
+.action-btn:hover:not(:disabled) {
   background-color: white;
   border-color: var(--primary-color);
   color: var(--primary-color);
@@ -154,6 +155,11 @@ const filteredSoftware = computed(() => {
   box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
 }
 
+.search-input:disabled {
+  background-color: #F2F2F7;
+  cursor: not-allowed;
+}
+
 .software-list {
   display: flex;
   flex-direction: column;

src/views/Essentials.vue

@@ -8,7 +8,7 @@
         <button 
           @click="store.syncDataIfNeeded(true)" 
           class="secondary-btn action-btn" 
-          :disabled="store.loading"
+          :disabled="store.loading || store.isBusy"
         >
           <span class="icon" :class="{ 'spinning': store.loading }">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
@@ -23,7 +23,7 @@
         <button 
           @click="installSelected" 
           class="primary-btn action-btn" 
-          :disabled="store.loading || store.selectedEssentialIds.length === 0"
+          :disabled="store.loading || store.isBusy || store.selectedEssentialIds.length === 0"
         >
           安装/更新所选 ({{ store.selectedEssentialIds.length }})
         </button>
@@ -36,11 +36,11 @@
         <span class="selection-count">已选 {{ store.selectedEssentialIds.length }} / {{ selectableItems.length }} 项</span>
       </div>
       <div class="toolbar-actions">
-        <button @click="store.selectAll('essential')" class="text-btn">全选</button>
+        <button @click="store.selectAll('essential')" class="text-btn" :disabled="store.isBusy">全选</button>
         <div class="divider"></div>
-        <button @click="store.deselectAll('essential')" class="text-btn">取消</button>
+        <button @click="store.deselectAll('essential')" class="text-btn" :disabled="store.isBusy">取消</button>
         <div class="divider"></div>
-        <button @click="store.invertSelection('essential')" class="text-btn">反选</button>
+        <button @click="store.invertSelection('essential')" class="text-btn" :disabled="store.isBusy">反选</button>
       </div>
     </div>
     
@@ -150,10 +150,15 @@ onMounted(() => {
   transition: all 0.2s ease;
 }
 
-.text-btn:hover {
+.text-btn:hover:not(:disabled) {
   background-color: rgba(0, 122, 255, 0.08);
 }
 
+.text-btn:disabled {
+  color: #AEAEB2;
+  cursor: not-allowed;
+}
+
 .divider {
   width: 1px;
   height: 12px;
@@ -180,7 +185,7 @@ onMounted(() => {
   box-shadow: var(--btn-shadow);
 }
 
-.primary-btn:hover {
+.primary-btn:hover:not(:disabled) {
   background-color: var(--primary-hover);
 }
 
@@ -190,7 +195,7 @@ onMounted(() => {
   border: 1px solid var(--border-color);
 }
 
-.secondary-btn:hover {
+.secondary-btn:hover:not(:disabled) {
   background-color: white;
   border-color: var(--primary-color);
   color: var(--primary-color);
@@ -199,7 +204,6 @@ onMounted(() => {
 .action-btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
-  transform: none !important;
   box-shadow: none;
 }
 

src/views/Updates.vue

@@ -8,7 +8,7 @@
         <button 
           @click="store.fetchUpdates" 
           class="secondary-btn action-btn" 
-          :disabled="store.loading"
+          :disabled="store.loading || store.isBusy"
         >
           <span class="icon" :class="{ 'spinning': store.loading }">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
@@ -23,7 +23,7 @@
         <button 
           @click="updateSelected" 
           class="primary-btn action-btn" 
-          :disabled="store.selectedUpdateIds.length === 0 || store.loading"
+          :disabled="store.selectedUpdateIds.length === 0 || store.loading || store.isBusy"
         >
           更新所选 ({{ store.selectedUpdateIds.length }})
         </button>
@@ -36,11 +36,11 @@
         <span class="selection-count">已选 {{ store.selectedUpdateIds.length }} / {{ store.sortedUpdates.length }} 项</span>
       </div>
       <div class="toolbar-actions">
-        <button @click="store.selectAll('update')" class="text-btn">全选</button>
+        <button @click="store.selectAll('update')" class="text-btn" :disabled="store.isBusy">全选</button>
         <div class="divider"></div>
-        <button @click="store.deselectAll('update')" class="text-btn">取消</button>
+        <button @click="store.deselectAll('update')" class="text-btn" :disabled="store.isBusy">取消</button>
         <div class="divider"></div>
-        <button @click="store.invertSelection('update')" class="text-btn">反选</button>
+        <button @click="store.invertSelection('update')" class="text-btn" :disabled="store.isBusy">反选</button>
       </div>
     </div>
     
@@ -151,10 +151,15 @@ onMounted(() => {
   transition: all 0.2s ease;
 }
 
-.text-btn:hover {
+.text-btn:hover:not(:disabled) {
   background-color: rgba(0, 122, 255, 0.08);
 }
 
+.text-btn:disabled {
+  color: #AEAEB2;
+  cursor: not-allowed;
+}
+
 .divider {
   width: 1px;
   height: 12px;
@@ -181,7 +186,7 @@ onMounted(() => {
   box-shadow: var(--btn-shadow);
 }
 
-.primary-btn:hover {
+.primary-btn:hover:not(:disabled) {
   background-color: var(--primary-hover);
 }
 
@@ -191,7 +196,7 @@ onMounted(() => {
   border: 1px solid var(--border-color);
 }
 
-.secondary-btn:hover {
+.secondary-btn:hover:not(:disabled) {
   background-color: white;
   border-color: var(--primary-color);
   color: var(--primary-color);
@@ -200,7 +205,6 @@ onMounted(() => {
 .action-btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
-  transform: none !important;
 }
 
 .icon {