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 {