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 {
+.software-card:not(.installed-mode):hover {
-  transform: scale(1.01);
+  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; /* 固定宽度，确保对齐 */
+  width: 90px;
-  height: 34px; /* 固定高度 */
+  height: 34px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -231,8 +298,8 @@ const placeholderColor = computed(() => {
 }
 
 .installed-btn {
-  background-color: #F2F2F7; /* 更浅的灰色 */
+  background-color: #F2F2F7;
-  color: #AEAEB2; /* 更淡的文字颜色 */
+  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;

src/views/Essentials.vue

@@ -21,15 +21,29 @@
           {{ store.loading ? '正在同步...' : '同步状态' }}
         </button>
         <button 
-          @click="installAll" 
+          @click="installSelected" 
           class="primary-btn action-btn" 
-          :disabled="store.loading"
+          :disabled="store.loading || selectedIds.length === 0"
         >
-          一键安装全部
+          安装/更新所选 ({{ selectedIds.length }})
         </button>
       </div>
     </header>
 
+    <!-- 批量选择控制栏 -->
+    <div class="selection-toolbar" v-if="selectableItems.length > 0">
+      <div class="toolbar-left">
+        <span class="selection-count">已选 {{ selectedIds.length }} / {{ selectableItems.length }} 项</span>
+      </div>
+      <div class="toolbar-actions">
+        <button @click="selectAll" class="text-btn">全选</button>
+        <div class="divider"></div>
+        <button @click="deselectAll" class="text-btn">取消</button>
+        <div class="divider"></div>
+        <button @click="invertSelection" class="text-btn">反选</button>
+      </div>
+    </div>
+    
     <div v-if="store.loading && store.mergedEssentials.length === 0" class="loading-state">
       <div class="spinner"></div>
       <p>正在读取必备软件列表...</p>
@@ -41,7 +55,10 @@
         :key="item.id" 
         :software="item"
         :action-label="item.actionLabel"
+        :selectable="true"
+        :is-selected="selectedIds.includes(item.id)"
         @install="store.install"
+        @toggle-select="toggleSelection"
       />
     </div>
   </main>
@@ -50,22 +67,55 @@
 <script setup lang="ts">
 import SoftwareCard from '../components/SoftwareCard.vue';
 import { useSoftwareStore } from '../store/software';
-import { onMounted } from 'vue';
+import { onMounted, ref, computed, watch } from 'vue';
 
 const store = useSoftwareStore();
+const selectedIds = ref<string[]>([]);
+
+// 1. 先定义所有计算属性和函数
+const selectableItems = computed(() => {
+  return store.mergedEssentials.filter(s => s.status !== 'installed');
+});
+
+const toggleSelection = (id: string) => {
+  const index = selectedIds.value.indexOf(id);
+  if (index === -1) {
+    selectedIds.value.push(id);
+  } else {
+    selectedIds.value.splice(index, 1);
+  }
+};
+
+const selectAll = () => {
+  selectedIds.value = selectableItems.value.map(s => s.id);
+};
+
+const deselectAll = () => {
+  selectedIds.value = [];
+};
+
+const invertSelection = () => {
+  const currentSelectable = selectableItems.value.map(s => s.id);
+  selectedIds.value = currentSelectable.filter(id => !selectedIds.value.includes(id));
+};
+
+const installSelected = () => {
+  selectedIds.value.forEach(id => {
+    store.install(id);
+  });
+};
+
+// 2. 再定义副作用（watch, onMounted）
+watch(() => store.mergedEssentials, (newVal) => {
+  if (newVal.length > 0 && selectedIds.value.length === 0) {
+    selectAll();
+  }
+}, { immediate: true });
 
 onMounted(() => {
   store.syncDataIfNeeded();
   store.initListener();
 });
-
-const installAll = () => {
-  store.mergedEssentials.forEach(s => {
-    if (s.status === 'idle') {
-      store.install(s.id);
-    }
-  });
-};
 </script>
 
 <style scoped>
@@ -79,7 +129,7 @@ const installAll = () => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 32px;
+  margin-bottom: 24px;
 }
 
 .content-header h1 {
@@ -95,6 +145,52 @@ const installAll = () => {
   align-items: center;
 }
 
+/* 批量选择工具栏 */
+.selection-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 20px;
+  background-color: rgba(0, 0, 0, 0.02);
+  border-radius: 12px;
+  margin-bottom: 20px;
+  border: 1px solid rgba(0, 0, 0, 0.03);
+}
+
+.selection-count {
+  font-size: 13px;
+  color: var(--text-sec);
+  font-weight: 500;
+}
+
+.toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.text-btn {
+  background: none;
+  border: none;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--primary-color);
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.text-btn:hover {
+  background-color: rgba(0, 122, 255, 0.08);
+}
+
+.divider {
+  width: 1px;
+  height: 12px;
+  background-color: var(--border-color);
+}
+
 .action-btn {
   display: flex;
   align-items: center;
@@ -133,9 +229,10 @@ const installAll = () => {
 }
 
 .action-btn:disabled {
-  opacity: 0.6;
+  opacity: 0.5;
   cursor: not-allowed;
   transform: none !important;
+  box-shadow: none;
 }
 
 .icon {