sortable

2026-03-14 18:49:38 -04:00
parent 2955e1eada
commit 8d700770aa
3 changed files with 158 additions and 42 deletions
--- a/src/store/software.ts
+++ b/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')
-      this.loading = false
+      try {
+        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')
-      this.loading = false
+      try {
+        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;
        }
--- a/src/views/AllSoftware.vue
+++ b/src/views/AllSoftware.vue
@@ -5,17 +5,34 @@
        <h1>全部软件</h1>
        <p class="count">共 {{ filteredSoftware.length }} 个项目</p>
      </div>
-      <div class="search-box">
-        <input 
-          type="text" 
-          v-model="searchQuery" 
-          placeholder="搜索已安装的软件..." 
-          class="search-input"
-        />
+      <div class="header-actions">
+        <button 
+          @click="store.fetchAll" 
+          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>
+        <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;
-  padding: 10px 16px;
-  border-radius: 12px;
+  width: 240px;
+  padding: 8px 16px;
+  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 {
--- a/src/views/Updates.vue
+++ b/src/views/Updates.vue
@@ -1,28 +1,48 @@
 <template>
  <main class="content">
    <header class="content-header">
-      <h1>软件更新</h1>
-      <div class="actions">
-        <button @click="store.fetchUpdates" class="secondary-btn" :disabled="store.loading">
-          {{ store.loading ? '检查中...' : '检查更新' }}
+      <div class="header-left">
+        <h1>软件更新</h1>
+      </div>
+      <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 {
-  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;
  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 {
-  background-color: var(--border-color);
-  box-shadow: none;
-  cursor: not-allowed;
+.primary-btn:hover {
+  background-color: var(--primary-hover);
+  transform: translateY(-1px);
 }

 .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 {