selection states preserve

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();