essentials selectable

src/views/Essentials.vue

@@ -21,14 +21,28 @@
           {{ 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>
@@ -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 {