fix logger bug

src/components/SoftwareCard.vue

@@ -66,10 +66,18 @@
           <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 class="progress-ring-container">
+            <svg viewBox="0 0 32 32" class="ring-svg">
+              <circle class="bg" cx="16" cy="16" r="14" fill="none" stroke-width="3" />
+              <circle class="fg" cx="16" cy="16" r="14" fill="none" stroke-width="3" 
+                :style="{ strokeDasharray: 88, strokeDashoffset: 88 - (88 * (software.progress || 0)) }" 
+              />
+            </svg>
+            <div v-if="!software.progress" class="inner-loader"></div>
+          </div>
+          <span class="loading-text">{{ displayProgress }}</span>
         </div>
 
         <div v-else-if="software.status === 'success'" class="status-success">
@@ -105,6 +113,11 @@ const props = defineProps<{
 
 const emit = defineEmits(['install', 'toggleSelect']);
 
+const displayProgress = computed(() => {
+  if (!props.software.progress) return '准备中';
+  return Math.round(props.software.progress * 100) + '%';
+});
+
 const placeholderColor = computed(() => {
   const colors = ['#FF9500', '#FF3B30', '#34C759', '#007AFF', '#5856D6', '#AF52DE'];
   let hash = 0;
@@ -115,9 +128,7 @@ 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);
   }
@@ -150,10 +161,9 @@ const handleCardClick = () => {
 }
 
 .software-card.is-busy {
-  opacity: 0.8;
+  opacity: 0.9;
 }
 
-/* 勾选框样式 */
 .selection-area {
   margin-right: 16px;
   flex-shrink: 0;
@@ -275,7 +285,7 @@ const handleCardClick = () => {
 
 .card-right {
   margin-left: 20px;
-  min-width: 120px;
+  min-width: 100px;
   display: flex;
   justify-content: flex-end;
 }
@@ -328,24 +338,51 @@ const handleCardClick = () => {
   display: flex;
   align-items: center;
   flex-direction: column;
-  gap: 4px;
+  gap: 6px;
   width: 90px;
   justify-content: center;
 }
 
-.spinning-loader {
-  width: 18px;
-  height: 18px;
-  border: 2px solid rgba(0, 122, 255, 0.1);
+.progress-ring-container {
+  position: relative;
+  width: 24px;
+  height: 24px;
+}
+
+.ring-svg {
+  transform: rotate(-90deg);
+  width: 100%;
+  height: 100%;
+}
+
+.ring-svg .bg {
+  stroke: var(--border-color);
+}
+
+.ring-svg .fg {
+  stroke: var(--primary-color);
+  stroke-linecap: round;
+  transition: stroke-dashoffset 0.3s ease;
+}
+
+.inner-loader {
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  width: 16px;
+  height: 16px;
+  border: 2px solid transparent;
   border-top-color: var(--primary-color);
   border-radius: 50%;
-  animation: spin 1s linear infinite;
+  animation: spin 0.8s linear infinite;
 }
 
 .loading-text {
   font-size: 10px;
   font-weight: 700;
   color: var(--primary-color);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
 }
 
 .status-success, .status-error {

src/store/software.ts

@@ -5,6 +5,7 @@ import { listen } from '@tauri-apps/api/event'
 const sortByName = (a: any, b: any) => a.name.localeCompare(b.name, 'zh-CN', { sensitivity: 'accent' });
 
 export interface LogEntry {
+  id: string; // 日志唯一标识
   timestamp: string;
   command: string;
   output: string;
@@ -41,13 +42,11 @@ export const useSoftwareStore = defineStore('software', {
             actionLabel = '已安装';
           }
         }
-        
         return { ...item, status: displayStatus, actionLabel };
       });
     },
     sortedUpdates: (state) => [...state.updates].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');
@@ -66,7 +65,7 @@ export const useSoftwareStore = defineStore('software', {
       }
     },
     toggleSelection(id: string, type: 'essential' | 'update') {
-      if (this.isBusy) return; // 繁忙时禁止修改勾选
+      if (this.isBusy) return;
       const list = type === 'essential' ? this.selectedEssentialIds : this.selectedUpdateIds;
       const index = list.indexOf(id);
       if (index === -1) list.push(id);
@@ -146,12 +145,8 @@ 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) {
@@ -177,9 +172,24 @@ export const useSoftwareStore = defineStore('software', {
         }
       })
 
+      // 日志监听：根据 ID 追加内容
       listen('log-event', (event: any) => {
-        this.logs.unshift(event.payload as LogEntry);
-        if (this.logs.length > 200) this.logs.pop();
+        const payload = event.payload as LogEntry;
+        const existingLog = this.logs.find(l => l.id === payload.id);
+        
+        if (existingLog) {
+          // 如果是增量更新
+          if (payload.output) {
+            existingLog.output += '\n' + payload.output;
+          }
+          if (payload.status !== 'info') {
+            existingLog.status = payload.status;
+          }
+        } else {
+          // 如果是新日志
+          this.logs.unshift(payload);
+          if (this.logs.length > 100) this.logs.pop();
+        }
       })
     }
   }