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">
-            <svg viewBox="0 0 32 32">
-              <circle class="bg" cx="16" cy="16" r="14" fill="none" stroke-width="4" />
-              <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>
+        <!-- 等待中状态 -->
+        <div v-else-if="software.status === 'pending'" class="status-pending">
+          <span class="wait-icon">⏳</span>
+          <span class="wait-text">等待中</span>
+        </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 {
-  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); }
+}
 </style>