sortable

src/store/software.ts

@@ -2,6 +2,8 @@ import { defineStore } from 'pinia'
 import { invoke } from '@tauri-apps/api/core'
 import { listen } from '@tauri-apps/api/event'
 
+const sortByName = (a: any, b: any) => a.name.localeCompare(b.name, 'zh-CN', { sensitivity: 'accent' });
+
 export const useSoftwareStore = defineStore('software', {
   state: () => ({
     essentials: [] as any[],
@@ -12,7 +14,7 @@ export const useSoftwareStore = defineStore('software', {
   }),
   getters: {
     mergedEssentials: (state) => {
-      return state.essentials.map(item => {
+      const items = 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());
         
@@ -34,7 +36,10 @@ export const useSoftwareStore = defineStore('software', {
           actionLabel
         };
       });
-    }
+      return items; // Essentials 通常保持自定义顺序
+    },
+    sortedUpdates: (state) => [...state.updates].sort(sortByName),
+    sortedAllSoftware: (state) => [...state.allSoftware].sort(sortByName)
   },
   actions: {
     async fetchEssentials() {
@@ -42,13 +47,21 @@ export const useSoftwareStore = defineStore('software', {
     },
     async fetchUpdates() {
       this.loading = true
-      this.updates = await invoke('get_updates')
+      try {
-      this.loading = false
+        const res = await invoke('get_updates')
+        this.updates = res as any[]
+      } finally {
+        this.loading = false
+      }
     },
     async fetchAll() {
       this.loading = true
-      this.allSoftware = await invoke('get_all_software')
+      try {
-      this.loading = false
+        const res = await invoke('get_all_software')
+        this.allSoftware = res as any[]
+      } finally {
+        this.loading = false
+      }
     },
     // 智能同步：如果数据较新，则直接返回
     async syncDataIfNeeded(force = false) {
@@ -56,7 +69,6 @@ export const useSoftwareStore = defineStore('software', {
       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;
       }
@@ -85,13 +97,11 @@ 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;
 
@@ -103,7 +113,6 @@ export const useSoftwareStore = defineStore('software', {
           software.progress = progress
         }
         
-        // 如果安装成功，标记数据过期，以便下次切换或刷新时同步最新状态
         if (status === 'success') {
           this.lastFetched = 0;
         }

src/views/AllSoftware.vue

@@ -5,17 +5,34 @@
         <h1>全部软件</h1>
         <p class="count">共 {{ filteredSoftware.length }} 个项目</p>
       </div>
-      <div class="search-box">
+      <div class="header-actions">
-        <input 
+        <button 
-          type="text" 
+          @click="store.fetchAll" 
-          v-model="searchQuery" 
+          class="secondary-btn action-btn" 
-          placeholder="搜索已安装的软件..." 
+          :disabled="store.loading"
-          class="search-input"
+        >
-        />
+          <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>
+        <div class="search-box">
+          <input 
+            type="text" 
+            v-model="searchQuery" 
+            placeholder="搜索已安装的软件..." 
+            class="search-input"
+          />
+        </div>
       </div>
     </header>
     
-    <div v-if="store.loading" class="loading-state">
+    <div v-if="store.loading && store.sortedAllSoftware.length === 0" class="loading-state">
       <div class="spinner"></div>
       <p>正在读取已安装软件列表...</p>
     </div>
@@ -45,9 +62,10 @@ onMounted(() => {
 });
 
 const filteredSoftware = computed(() => {
-  if (!searchQuery.value) return store.allSoftware;
+  const data = store.sortedAllSoftware;
+  if (!searchQuery.value) return data;
   const q = searchQuery.value.toLowerCase();
-  return store.allSoftware.filter(s => 
+  return data.filter(s => 
     s.name.toLowerCase().includes(q) || s.id.toLowerCase().includes(q)
   );
 });
@@ -78,20 +96,62 @@ const filteredSoftware = computed(() => {
   margin-top: 4px;
 }
 
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  border-radius: 10px;
+  font-weight: 600;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 1px solid var(--border-color);
+  background-color: var(--bg-light);
+  color: var(--text-main);
+  white-space: nowrap;
+}
+
+.action-btn:hover {
+  background-color: white;
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+}
+
+.action-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+}
+
+.icon.spinning {
+  animation: spin 1s linear infinite;
+}
+
 .search-input {
-  width: 280px;
+  width: 240px;
-  padding: 10px 16px;
+  padding: 8px 16px;
-  border-radius: 12px;
+  border-radius: 10px;
   border: 1px solid var(--border-color);
   background-color: white;
-  font-size: 14px;
+  font-size: 13px;
   outline: none;
   transition: all 0.2s ease;
 }
 
 .search-input:focus {
   border-color: var(--primary-color);
-  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
+  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
 }
 
 .software-list {

src/views/Updates.vue

@@ -1,28 +1,48 @@
 <template>
   <main class="content">
     <header class="content-header">
-      <h1>软件更新</h1>
+      <div class="header-left">
-      <div class="actions">
+        <h1>软件更新</h1>
-        <button @click="store.fetchUpdates" class="secondary-btn" :disabled="store.loading">
+      </div>
-          {{ store.loading ? '检查中...' : '检查更新' }}
+      <div class="header-actions">
+        <button 
+          @click="store.fetchUpdates" 
+          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="updateAll" 
+          class="primary-btn action-btn" 
+          :disabled="!store.updates.length || store.loading"
+        >
+          全部更新 ({{ store.updates.length }})
         </button>
-        <button @click="updateAll" class="primary-btn" :disabled="!store.updates.length">全部更新</button>
       </div>
     </header>
     
-    <div v-if="store.loading" class="loading-state">
+    <div v-if="store.loading && store.updates.length === 0" class="loading-state">
       <div class="spinner"></div>
       <p>正在使用 Winget 扫描可用的更新...</p>
     </div>
 
-    <div v-else-if="store.updates.length === 0" class="empty-state">
+    <div v-else-if="store.updates.length === 0 && !store.loading" class="empty-state">
       <span class="empty-icon">✅</span>
       <p>所有软件已是最新版本</p>
     </div>
 
     <div v-else class="software-list">
       <SoftwareCard 
-        v-for="item in store.updates" 
+        v-for="item in store.sortedUpdates" 
         :key="item.id" 
         :software="item"
         action-label="更新"
@@ -65,27 +85,33 @@ const updateAll = () => {
   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;
 }
 
-.actions {
+.header-actions {
   display: flex;
   gap: 12px;
+  align-items: center;
 }
 
-.primary-btn, .secondary-btn {
+.action-btn {
-  border: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
   padding: 10px 20px;
   border-radius: 12px;
   font-weight: 600;
   font-size: 14px;
   cursor: pointer;
   transition: all 0.2s ease;
+  border: none;
+  white-space: nowrap;
 }
 
 .primary-btn {
@@ -94,15 +120,36 @@ const updateAll = () => {
   box-shadow: var(--btn-shadow);
 }
 
-.primary-btn:disabled {
+.primary-btn:hover {
-  background-color: var(--border-color);
+  background-color: var(--primary-hover);
-  box-shadow: none;
+  transform: translateY(-1px);
-  cursor: not-allowed;
 }
 
 .secondary-btn {
-  background-color: var(--border-color);
+  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.5;
+  cursor: not-allowed;
+  transform: none !important;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+}
+
+.icon.spinning {
+  animation: spin 1s linear infinite;
 }
 
 .software-list {