From 8d700770aace346c6291df75e265d7f842b0cf67 Mon Sep 17 00:00:00 2001 From: Julian Freeman Date: Sat, 14 Mar 2026 18:49:38 -0400 Subject: [PATCH] sortable --- src/store/software.ts | 29 ++++++++----- src/views/AllSoftware.vue | 90 ++++++++++++++++++++++++++++++++------- src/views/Updates.vue | 81 +++++++++++++++++++++++++++-------- 3 files changed, 158 insertions(+), 42 deletions(-) diff --git a/src/store/software.ts b/src/store/software.ts index b562ce5..3b35601 100644 --- 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; } diff --git a/src/views/AllSoftware.vue b/src/views/AllSoftware.vue index f8286db..c81db05 100644 --- a/src/views/AllSoftware.vue +++ b/src/views/AllSoftware.vue @@ -5,17 +5,34 @@

全部软件

共 {{ filteredSoftware.length }} 个项目

-
- +
+ +
+ +
-
+

正在读取已安装软件列表...

@@ -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 { diff --git a/src/views/Updates.vue b/src/views/Updates.vue index 6707286..227765c 100644 --- a/src/views/Updates.vue +++ b/src/views/Updates.vue @@ -1,28 +1,48 @@