optimize button ui

src/components/SoftwareCard.vue

@@ -27,7 +27,7 @@
         <button 
           v-if="software.status === 'idle'" 
           @click="$emit('install', software.id)"
-          class="install-btn"
+          class="action-btn install-btn"
         >
           {{ actionLabel }}
         </button>
@@ -35,7 +35,7 @@
         <button 
           v-else-if="software.status === 'installed'" 
           disabled
-          class="installed-btn"
+          class="action-btn installed-btn"
         >
           已安装
         </button>
@@ -206,31 +206,33 @@ const placeholderColor = computed(() => {
   justify-content: flex-end;
 }
 
-.install-btn {
-  padding: 8px 24px;
-  background-color: var(--bg-light);
+.action-btn {
+  width: 90px; /* 固定宽度，确保对齐 */
+  height: 34px; /* 固定高度 */
+  display: flex;
+  align-items: center;
+  justify-content: center;
   border: none;
-  border-radius: 20px;
-  color: var(--primary-color);
+  border-radius: 17px;
   font-weight: 600;
-  font-size: 14px;
+  font-size: 13px;
   cursor: pointer;
   transition: all 0.2s ease;
 }
 
+.install-btn {
+  background-color: rgba(0, 122, 255, 0.05);
+  color: var(--primary-color);
+}
+
 .install-btn:hover {
   background-color: var(--primary-color);
   color: white;
 }
 
 .installed-btn {
-  padding: 8px 24px;
-  background-color: #E5E5E7;
-  border: none;
-  border-radius: 20px;
-  color: #86868B;
-  font-weight: 600;
-  font-size: 14px;
+  background-color: #F2F2F7; /* 更浅的灰色 */
+  color: #AEAEB2; /* 更淡的文字颜色 */
   cursor: not-allowed;
 }
 
@@ -238,11 +240,13 @@ const placeholderColor = computed(() => {
   display: flex;
   align-items: center;
   gap: 10px;
+  width: 90px;
+  justify-content: center;
 }
 
 .progress-ring {
-  width: 20px;
-  height: 20px;
+  width: 18px;
+  height: 18px;
 }
 
 .progress-ring svg {
@@ -260,20 +264,24 @@ const placeholderColor = computed(() => {
 }
 
 .status-text {
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 500;
   color: var(--primary-color);
+  display: none; /* 在固定宽度下隐藏文字，保持简洁 */
+}
+
+.status-success, .status-error {
+  width: 90px;
+  text-align: center;
+  font-weight: 600;
+  font-size: 13px;
 }
 
 .status-success {
   color: #34C759;
-  font-weight: 600;
-  font-size: 14px;
 }
 
 .status-error {
   color: #FF3B30;
-  font-weight: 600;
-  font-size: 14px;
 }
 </style>