fix sync ui

src/store/software.ts

@@ -7,7 +7,8 @@ export const useSoftwareStore = defineStore('software', {
     essentials: [] as any[],
     updates: [] as any[],
     allSoftware: [] as any[],
-    loading: false
+    loading: false,
+    lastFetched: 0 // 记录上次完整同步的时间戳
   }),
   getters: {
     mergedEssentials: (state) => {
@@ -49,18 +50,34 @@ export const useSoftwareStore = defineStore('software', {
       this.allSoftware = await invoke('get_all_software')
       this.loading = false
     },
+    // 智能同步：如果数据较新，则直接返回
+    async syncDataIfNeeded(force = false) {
+      const now = Date.now();
+      const CACHE_TIMEOUT = 5 * 60 * 1000; // 5 分钟缓存
+
+      if (!force && this.allSoftware.length > 0 && (now - this.lastFetched < CACHE_TIMEOUT)) {
+        // 如果不是强制刷新，且数据在 5 分钟内，且已经有数据，则跳过
+        if (this.essentials.length === 0) await this.fetchEssentials();
+        return;
+      }
+
+      await this.fetchAllData();
+    },
     async fetchAllData() {
       this.loading = true;
-      // 并行获取三类数据
-      const [essentials, all, updates] = await Promise.all([
-        invoke('get_essentials'),
-        invoke('get_all_software'),
-        invoke('get_updates')
-      ]);
-      this.essentials = essentials as any[];
-      this.allSoftware = all as any[];
-      this.updates = updates as any[];
-      this.loading = false;
+      try {
+        const [essentials, all, updates] = await Promise.all([
+          invoke('get_essentials'),
+          invoke('get_all_software'),
+          invoke('get_updates')
+        ]);
+        this.essentials = essentials as any[];
+        this.allSoftware = all as any[];
+        this.updates = updates as any[];
+        this.lastFetched = Date.now();
+      } finally {
+        this.loading = false;
+      }
     },
     async install(id: string) {
       const software = this.findSoftware(id)
@@ -68,11 +85,16 @@ export const useSoftwareStore = defineStore('software', {
       await invoke('install_software', { id })
     },
     findSoftware(id: string) {
+      // 这里的逻辑会从多个列表中查找对象
       return this.essentials.find(s => s.id === id) || 
              this.updates.find(s => s.id === id) || 
              this.allSoftware.find(s => s.id === id)
     },
     initListener() {
+      // 避免重复监听
+      if ((window as any).__tauri_listener_init) return;
+      (window as any).__tauri_listener_init = true;
+
       listen('install-status', (event: any) => {
         const { id, status, progress } = event.payload
         const software = this.findSoftware(id)
@@ -80,6 +102,11 @@ export const useSoftwareStore = defineStore('software', {
           software.status = status
           software.progress = progress
         }
+        
+        // 如果安装成功，标记数据过期，以便下次切换或刷新时同步最新状态
+        if (status === 'success') {
+          this.lastFetched = 0;
+        }
       })
     }
   }

src/views/Essentials.vue

@@ -3,9 +3,31 @@
     <header class="content-header">
       <div class="header-left">
         <h1>装机必备</h1>
-        <p class="subtitle" v-if="store.loading">正在同步软件状态...</p>
       </div>
-      <button @click="installAll" class="primary-btn" :disabled="store.loading">一键安装全部</button>
+      <div class="header-actions">
+        <button 
+          @click="store.syncDataIfNeeded(true)" 
+          class="secondary-btn action-btn" 
+          :disabled="store.loading"
+        >
+          <span class="icon" :class="{ 'spinning': store.loading }">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21 2v6h-6"></path>
+              <path d="M3 12a9 9 0 0 1 15-6.7L21 8"></path>
+              <path d="M3 22v-6h6"></path>
+              <path d="M21 12a9 9 0 0 1-15 6.7L3 16"></path>
+            </svg>
+          </span>
+          {{ store.loading ? '正在同步...' : '同步状态' }}
+        </button>
+        <button 
+          @click="installAll" 
+          class="primary-btn action-btn" 
+          :disabled="store.loading"
+        >
+          一键安装全部
+        </button>
+      </div>
     </header>
     
     <div v-if="store.loading && store.mergedEssentials.length === 0" class="loading-state">
@@ -33,7 +55,7 @@ import { onMounted } from 'vue';
 const store = useSoftwareStore();
 
 onMounted(() => {
-  store.fetchAllData();
+  store.syncDataIfNeeded();
   store.initListener();
 });
 
@@ -57,32 +79,40 @@ const installAll = () => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 30px;
+  margin-bottom: 32px;
 }
 
 .content-header h1 {
   font-size: 32px;
   font-weight: 700;
   letter-spacing: -0.5px;
+  color: var(--text-main);
 }
 
-.subtitle {
-  font-size: 14px;
-  color: var(--text-sec);
-  margin-top: 4px;
+.header-actions {
+  display: flex;
+  gap: 12px;
+  align-items: center;
 }
 
-.primary-btn {
-  background-color: var(--primary-color);
-  color: white;
-  border: none;
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
   padding: 10px 20px;
   border-radius: 12px;
   font-weight: 600;
   font-size: 14px;
   cursor: pointer;
-  box-shadow: var(--btn-shadow);
   transition: all 0.2s ease;
+  border: none;
+  white-space: nowrap;
+}
+
+.primary-btn {
+  background-color: var(--primary-color);
+  color: white;
+  box-shadow: var(--btn-shadow);
 }
 
 .primary-btn:hover {
@@ -90,10 +120,31 @@ const installAll = () => {
   transform: translateY(-1px);
 }
 
-.primary-btn:disabled {
-  background-color: var(--border-color);
-  box-shadow: none;
+.secondary-btn {
+  background-color: var(--bg-light);
+  color: var(--text-main);
+  border: 1px solid var(--border-color);
+}
+
+.secondary-btn:hover {
+  background-color: white;
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+}
+
+.action-btn:disabled {
+  opacity: 0.6;
   cursor: not-allowed;
+  transform: none !important;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+}
+
+.icon.spinning {
+  animation: spin 1s linear infinite;
 }
 
 .software-list {