essentials selectable

src/components/SoftwareCard.vue

@@ -1,5 +1,25 @@
 <template>
-  <div class="software-card" :class="{ 'installed-mode': software.status === 'installed' }">
+  <div 
+    class="software-card" 
+    :class="{ 
+      'installed-mode': software.status === 'installed',
+      'is-selected': isSelected && software.status !== 'installed'
+    }"
+    @click="handleCardClick"
+  >
+    <!-- 左侧勾选框 -->
+    <div class="selection-area" v-if="selectable">
+      <div 
+        class="checkbox" 
+        :class="{ 
+          'checked': isSelected, 
+          'disabled': software.status === 'installed' 
+        }"
+      >
+        <span v-if="isSelected">✓</span>
+      </div>
+    </div>
+
     <div class="card-left">
       <div class="icon-container">
         <img v-if="software.icon_url" :src="software.icon_url" :alt="software.name" class="software-icon" />
@@ -26,7 +46,7 @@
       <div class="action-wrapper">
         <button 
           v-if="software.status === 'idle'" 
-          @click="$emit('install', software.id)"
+          @click.stop="$emit('install', software.id)"
           class="action-btn install-btn"
         >
           {{ actionLabel }}
@@ -49,7 +69,6 @@
               />
             </svg>
           </div>
-          <span class="status-text">{{ software.status === 'pending' ? '等待中...' : '安装中...' }}</span>
         </div>
 
         <div v-else-if="software.status === 'success'" class="status-success">
@@ -78,9 +97,13 @@ const props = defineProps<{
     status: string;
     progress: number;
   },
-  actionLabel?: string
+  actionLabel?: string,
+  selectable?: boolean,
+  isSelected?: boolean
 }>();
 
+const emit = defineEmits(['install', 'toggleSelect']);
+
 const placeholderColor = computed(() => {
   const colors = ['#FF9500', '#FF3B30', '#34C759', '#007AFF', '#5856D6', '#AF52DE'];
   let hash = 0;
@@ -89,6 +112,12 @@ const placeholderColor = computed(() => {
   }
   return colors[Math.abs(hash) % colors.length];
 });
+
+const handleCardClick = () => {
+  if (props.selectable && props.software.status !== 'installed') {
+    emit('toggleSelect', props.software.id);
+  }
+};
 </script>
 
 <style scoped>
@@ -103,11 +132,49 @@ const placeholderColor = computed(() => {
   justify-content: space-between;
   border: 1px solid rgba(0, 0, 0, 0.02);
   margin-bottom: 12px;
+  cursor: default;
 }
 
-.software-card:hover {
-  transform: scale(1.01);
+.software-card:not(.installed-mode):hover {
+  transform: scale(1.005);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
+  border-color: rgba(0, 122, 255, 0.1);
+}
+
+.software-card.is-selected {
+  background-color: rgba(0, 122, 255, 0.02);
+  border-color: rgba(0, 122, 255, 0.2);
+}
+
+/* 勾选框样式 */
+.selection-area {
+  margin-right: 16px;
+  flex-shrink: 0;
+}
+
+.checkbox {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  border: 2px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  color: white;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.checkbox.checked {
+  background-color: var(--primary-color);
+  border-color: var(--primary-color);
+}
+
+.checkbox.disabled {
+  background-color: #F2F2F7;
+  border-color: #E5E5E7;
+  cursor: not-allowed;
 }
 
 .card-left {
@@ -207,8 +274,8 @@ const placeholderColor = computed(() => {
 }
 
 .action-btn {
-  width: 90px; /* 固定宽度，确保对齐 */
-  height: 34px; /* 固定高度 */
+  width: 90px;
+  height: 34px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -231,8 +298,8 @@ const placeholderColor = computed(() => {
 }
 
 .installed-btn {
-  background-color: #F2F2F7; /* 更浅的灰色 */
-  color: #AEAEB2; /* 更淡的文字颜色 */
+  background-color: #F2F2F7;
+  color: #AEAEB2;
   cursor: not-allowed;
 }
 
@@ -263,13 +330,6 @@ const placeholderColor = computed(() => {
   transition: stroke-dashoffset 0.3s ease;
 }
 
-.status-text {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--primary-color);
-  display: none; /* 在固定宽度下隐藏文字，保持简洁 */
-}
-
 .status-success, .status-error {
   width: 90px;
   text-align: center;