update selectable

src/views/Updates.vue

@@ -21,15 +21,29 @@
           {{ store.loading ? '正在检查...' : '检查更新' }}
         </button>
         <button 
-          @click="updateAll" 
+          @click="updateSelected" 
           class="primary-btn action-btn" 
-          :disabled="!store.updates.length || store.loading"
+          :disabled="selectedIds.length === 0 || store.loading"
         >
-          全部更新 ({{ store.updates.length }})
+          更新所选 ({{ selectedIds.length }})
         </button>
       </div>
     </header>
 
+    <!-- 批量选择控制栏 -->
+    <div class="selection-toolbar" v-if="store.sortedUpdates.length > 0">
+      <div class="toolbar-left">
+        <span class="selection-count">已选 {{ selectedIds.length }} / {{ store.sortedUpdates.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.updates.length === 0" class="loading-state">
       <div class="spinner"></div>
       <p>正在使用 Winget 扫描可用的更新...</p>
@@ -46,7 +60,10 @@
         :key="item.id" 
         :software="item"
         action-label="更新"
+        :selectable="true"
+        :is-selected="selectedIds.includes(item.id)"
         @install="store.install"
+        @toggle-select="toggleSelection"
       />
     </div>
   </main>
@@ -55,23 +72,53 @@
 <script setup lang="ts">
 import SoftwareCard from '../components/SoftwareCard.vue';
 import { useSoftwareStore } from '../store/software';
-import { onMounted } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 
 const store = useSoftwareStore();
+const selectedIds = ref<string[]>([]);
+
+// 1. 定义操作函数
+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 = store.sortedUpdates.map(s => s.id);
+};
+
+const deselectAll = () => {
+  selectedIds.value = [];
+};
+
+const invertSelection = () => {
+  const currentIds = store.sortedUpdates.map(s => s.id);
+  selectedIds.value = currentIds.filter(id => !selectedIds.value.includes(id));
+};
+
+const updateSelected = () => {
+  selectedIds.value.forEach(id => {
+    store.install(id);
+  });
+};
+
+// 2. 定义副作用
+watch(() => store.sortedUpdates, (newVal) => {
+  // 仅在初始加载或强制刷新数据后且当前未选择任何项时自动全选
+  if (newVal.length > 0 && selectedIds.value.length === 0) {
+    selectAll();
+  }
+}, { immediate: true });
 
 onMounted(() => {
   if (store.updates.length === 0) {
     store.fetchUpdates();
   }
 });
-
-const updateAll = () => {
-  store.updates.forEach(s => {
-    if (s.status === 'idle') {
-      store.install(s.id);
-    }
-  });
-};
 </script>
 
 <style scoped>
@@ -85,7 +132,7 @@ const updateAll = () => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 32px;
+  margin-bottom: 24px;
 }
 
 .content-header h1 {
@@ -100,6 +147,52 @@ const updateAll = () => {
   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;