selection states preserve

src/store/software.ts

@@ -9,12 +9,14 @@ export const useSoftwareStore = defineStore('software', {
     essentials: [] as any[],
     updates: [] as any[],
     allSoftware: [] as any[],
+    selectedEssentialIds: [] as string[],
+    selectedUpdateIds: [] as string[],
     loading: false,
-    lastFetched: 0 // 记录上次完整同步的时间戳
+    lastFetched: 0
   }),
   getters: {
     mergedEssentials: (state) => {
-      const items = state.essentials.map(item => {
+      return state.essentials.map(item => {
         const isInstalled = state.allSoftware.some(s => s.id.toLowerCase() === item.id.toLowerCase());
         const hasUpdate = state.updates.some(s => s.id.toLowerCase() === item.id.toLowerCase());
         
@@ -30,18 +32,45 @@ export const useSoftwareStore = defineStore('software', {
           }
         }
         
-        return {
+        return { ...item, status: displayStatus, actionLabel };
-          ...item,
-          status: displayStatus,
-          actionLabel
-        };
       });
-      return items; // Essentials 通常保持自定义顺序
     },
     sortedUpdates: (state) => [...state.updates].sort(sortByName),
     sortedAllSoftware: (state) => [...state.allSoftware].sort(sortByName)
   },
   actions: {
+    // 通用的勾选切换逻辑
+    toggleSelection(id: string, type: 'essential' | 'update') {
+      const list = type === 'essential' ? this.selectedEssentialIds : this.selectedUpdateIds;
+      const index = list.indexOf(id);
+      if (index === -1) {
+        list.push(id);
+      } else {
+        list.splice(index, 1);
+      }
+    },
+    selectAll(type: 'essential' | 'update') {
+      if (type === 'essential') {
+        const selectable = this.mergedEssentials.filter(s => s.status !== 'installed');
+        this.selectedEssentialIds = selectable.map(s => s.id);
+      } else {
+        this.selectedUpdateIds = this.updates.map(s => s.id);
+      }
+    },
+    deselectAll(type: 'essential' | 'update') {
+      if (type === 'essential') this.selectedEssentialIds = [];
+      else this.selectedUpdateIds = [];
+    },
+    invertSelection(type: 'essential' | 'update') {
+      if (type === 'essential') {
+        const selectable = this.mergedEssentials.filter(s => s.status !== 'installed').map(s => s.id);
+        this.selectedEssentialIds = selectable.filter(id => !this.selectedEssentialIds.includes(id));
+      } else {
+        const selectable = this.updates.map(s => s.id);
+        this.selectedUpdateIds = selectable.filter(id => !this.selectedUpdateIds.includes(id));
+      }
+    },
+
     async fetchEssentials() {
       this.essentials = await invoke('get_essentials')
     },
@@ -50,6 +79,8 @@ export const useSoftwareStore = defineStore('software', {
       try {
         const res = await invoke('get_updates')
         this.updates = res as any[]
+        // 刷新数据后，如果没选过，默认全选
+        if (this.selectedUpdateIds.length === 0) this.selectAll('update');
       } finally {
         this.loading = false
       }
@@ -63,16 +94,13 @@ export const useSoftwareStore = defineStore('software', {
         this.loading = false
       }
     },
-    // 智能同步：如果数据较新，则直接返回
     async syncDataIfNeeded(force = false) {
       const now = Date.now();
-      const CACHE_TIMEOUT = 5 * 60 * 1000; // 5 分钟缓存
+      const CACHE_TIMEOUT = 5 * 60 * 1000;
-
       if (!force && this.allSoftware.length > 0 && (now - this.lastFetched < CACHE_TIMEOUT)) {
         if (this.essentials.length === 0) await this.fetchEssentials();
         return;
       }
-
       await this.fetchAllData();
     },
     async fetchAllData() {
@@ -87,6 +115,8 @@ export const useSoftwareStore = defineStore('software', {
         this.allSoftware = all as any[];
         this.updates = updates as any[];
         this.lastFetched = Date.now();
+        // 如果没选过，默认全选
+        if (this.selectedEssentialIds.length === 0) this.selectAll('essential');
       } finally {
         this.loading = false;
       }
@@ -112,9 +142,11 @@ export const useSoftwareStore = defineStore('software', {
           software.status = status
           software.progress = progress
         }
-        
         if (status === 'success') {
           this.lastFetched = 0;
+          // 安装成功后从选择列表中移除
+          this.selectedEssentialIds = this.selectedEssentialIds.filter(i => i !== id);
+          this.selectedUpdateIds = this.selectedUpdateIds.filter(i => i !== id);
         }
       })
     }

src/views/Essentials.vue

@@ -23,9 +23,9 @@
         <button 
           @click="installSelected" 
           class="primary-btn action-btn" 
-          :disabled="store.loading || selectedIds.length === 0"
+          :disabled="store.loading || store.selectedEssentialIds.length === 0"
         >
-          安装/更新所选 ({{ selectedIds.length }})
+          安装/更新所选 ({{ store.selectedEssentialIds.length }})
         </button>
       </div>
     </header>
@@ -33,14 +33,14 @@
     <!-- 批量选择控制栏 -->
     <div class="selection-toolbar" v-if="selectableItems.length > 0">
       <div class="toolbar-left">
-        <span class="selection-count">已选 {{ selectedIds.length }} / {{ selectableItems.length }} 项</span>
+        <span class="selection-count">已选 {{ store.selectedEssentialIds.length }} / {{ selectableItems.length }} 项</span>
       </div>
       <div class="toolbar-actions">
-        <button @click="selectAll" class="text-btn">全选</button>
+        <button @click="store.selectAll('essential')" class="text-btn">全选</button>
         <div class="divider"></div>
-        <button @click="deselectAll" class="text-btn">取消</button>
+        <button @click="store.deselectAll('essential')" class="text-btn">取消</button>
         <div class="divider"></div>
-        <button @click="invertSelection" class="text-btn">反选</button>
+        <button @click="store.invertSelection('essential')" class="text-btn">反选</button>
       </div>
     </div>
     
@@ -56,9 +56,9 @@
         :software="item"
         :action-label="item.actionLabel"
         :selectable="true"
-        :is-selected="selectedIds.includes(item.id)"
+        :is-selected="store.selectedEssentialIds.includes(item.id)"
         @install="store.install"
-        @toggle-select="toggleSelection"
+        @toggle-select="id => store.toggleSelection(id, 'essential')"
       />
     </div>
   </main>
@@ -67,51 +67,20 @@
 <script setup lang="ts">
 import SoftwareCard from '../components/SoftwareCard.vue';
 import { useSoftwareStore } from '../store/software';
-import { onMounted, ref, computed, watch } from 'vue';
+import { onMounted, computed } 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.selectedEssentialIds.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();

src/views/Updates.vue

@@ -23,9 +23,9 @@
         <button 
           @click="updateSelected" 
           class="primary-btn action-btn" 
-          :disabled="selectedIds.length === 0 || store.loading"
+          :disabled="store.selectedUpdateIds.length === 0 || store.loading"
         >
-          更新所选 ({{ selectedIds.length }})
+          更新所选 ({{ store.selectedUpdateIds.length }})
         </button>
       </div>
     </header>
@@ -33,14 +33,14 @@
     <!-- 批量选择控制栏 -->
     <div class="selection-toolbar" v-if="store.sortedUpdates.length > 0">
       <div class="toolbar-left">
-        <span class="selection-count">已选 {{ selectedIds.length }} / {{ store.sortedUpdates.length }} 项</span>
+        <span class="selection-count">已选 {{ store.selectedUpdateIds.length }} / {{ store.sortedUpdates.length }} 项</span>
       </div>
       <div class="toolbar-actions">
-        <button @click="selectAll" class="text-btn">全选</button>
+        <button @click="store.selectAll('update')" class="text-btn">全选</button>
         <div class="divider"></div>
-        <button @click="deselectAll" class="text-btn">取消</button>
+        <button @click="store.deselectAll('update')" class="text-btn">取消</button>
         <div class="divider"></div>
-        <button @click="invertSelection" class="text-btn">反选</button>
+        <button @click="store.invertSelection('update')" class="text-btn">反选</button>
       </div>
     </div>
     
@@ -61,9 +61,9 @@
         :software="item"
         action-label="更新"
         :selectable="true"
-        :is-selected="selectedIds.includes(item.id)"
+        :is-selected="store.selectedUpdateIds.includes(item.id)"
         @install="store.install"
-        @toggle-select="toggleSelection"
+        @toggle-select="id => store.toggleSelection(id, 'update')"
       />
     </div>
   </main>
@@ -72,48 +72,16 @@
 <script setup lang="ts">
 import SoftwareCard from '../components/SoftwareCard.vue';
 import { useSoftwareStore } from '../store/software';
-import { onMounted, ref, watch } from 'vue';
+import { onMounted } 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.selectedUpdateIds.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();