julian/win-softmgr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix updating ui

Browse Source
This commit is contained in:
Julian Freeman
2026-03-14 21:47:04 -04:00
parent 1552f1cad8
commit 1c4587e945
5 changed files with 103 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/components/SoftwareCard.vue
View File

@@ -3,7 +3,8 @@
class="software-card"
:class="{
'installed-mode': software.status === 'installed',
'is-selected': isSelected && software.status !== 'installed'
'is-selected': isSelected && software.status !== 'installed',
'is-busy': software.status === 'pending' || software.status === 'installing'
}"
@click="handleCardClick"
>
@@ -13,7 +14,7 @@
class="checkbox"
:class="{
'checked': isSelected,
'disabled': software.status === 'installed'
'disabled': software.status === 'installed' || software.status === 'pending' || software.status === 'installing'
}"
>
<span v-if="isSelected">✓</span>
@@ -60,15 +61,16 @@
已安装
</button>
<div v-else-if="software.status === 'installing' || software.status === 'pending'" class="progress-status">
<div class="progress-ring">
<svg viewBox="0 0 32 32">
<circle class="bg" cx="16" cy="16" r="14" fill="none" stroke-width="4" />
<circle class="fg" cx="16" cy="16" r="14" fill="none" stroke-width="4"
:style="{ strokeDasharray: 88, strokeDashoffset: 88 - (88 * (software.progress || 0.5)) }"
/>
</svg>
</div>
<!-- 等待中状态 -->
<div v-else-if="software.status === 'pending'" class="status-pending">
<span class="wait-icon">⏳</span>
<span class="wait-text">等待中</span>
</div>
<!-- 安装中状态：旋转 Loading -->
<div v-else-if="software.status === 'installing'" class="progress-status">
<div class="spinning-loader"></div>
<span class="loading-text">正在安装</span>
</div>
<div v-else-if="software.status === 'success'" class="status-success">
@@ -114,6 +116,9 @@ const placeholderColor = computed(() => {
});
const handleCardClick = () => {
// 安装或等待中禁止修改勾选
if (props.software.status === 'pending' || props.software.status === 'installing') return;
if (props.selectable && props.software.status !== 'installed') {
emit('toggleSelect', props.software.id);
}
@@ -135,7 +140,7 @@ const handleCardClick = () => {
cursor: default;
}
.software-card:not(.installed-mode):hover {
.software-card:not(.installed-mode):not(.is-busy):hover {
border-color: rgba(0, 122, 255, 0.3);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
@@ -145,6 +150,10 @@ const handleCardClick = () => {
border-color: rgba(0, 122, 255, 0.4);
}
.software-card.is-busy {
opacity: 0.8;
}
/* 勾选框样式 */
.selection-area {
margin-right: 16px;
@@ -302,31 +311,46 @@ const handleCardClick = () => {
cursor: not-allowed;
}
.status-pending {
display: flex;
align-items: center;
gap: 6px;
width: 90px;
justify-content: center;
color: #AEAEB2;
}
.wait-icon {
font-size: 14px;
}
.wait-text {
font-size: 12px;
font-weight: 600;
}
.progress-status {
display: flex;
align-items: center;
gap: 10px;
flex-direction: column;
gap: 4px;
width: 90px;
justify-content: center;
}
.progress-ring {
.spinning-loader {
width: 18px;
height: 18px;
border: 2px solid rgba(0, 122, 255, 0.1);
border-top-color: var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
}
.progress-ring svg {
transform: rotate(-90deg);
}
.progress-ring .bg {
stroke: var(--border-color);
}
.progress-ring .fg {
stroke: var(--primary-color);
stroke-linecap: round;
transition: stroke-dashoffset 0.3s ease;
.loading-text {
font-size: 10px;
font-weight: 700;
color: var(--primary-color);
}
.status-success, .status-error {
@@ -343,4 +367,8 @@ const handleCardClick = () => {
.status-error {
color: #FF3B30;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>

20
src/store/software.ts
View File

@@ -46,24 +46,27 @@ export const useSoftwareStore = defineStore('software', {
});
},
sortedUpdates: (state) => [...state.updates].sort(sortByName),
sortedAllSoftware: (state) => [...state.allSoftware].sort(sortByName)
sortedAllSoftware: (state) => [...state.allSoftware].sort(sortByName),
// 全局繁忙状态：只要有任何软件在等待或安装中，就锁定关键操作
isBusy: (state) => {
const allItems = [...state.essentials, ...state.updates, ...state.allSoftware];
return allItems.some(item => item.status === 'pending' || item.status === 'installing');
}
},
actions: {
async initializeApp() {
if (this.isInitialized) return;
this.initStatus = '正在同步 Winget 模块...';
try {
await invoke('initialize_app');
this.isInitialized = true;
} catch (err) {
this.initStatus = '环境配置失败，请检查运行日志';
console.error('Init failed:', err);
// 即使失败也允许进入，让用户看日志
setTimeout(() => { this.isInitialized = true; }, 2000);
}
},
toggleSelection(id: string, type: 'essential' | 'update') {
if (this.isBusy) return; // 繁忙时禁止修改勾选
const list = type === 'essential' ? this.selectedEssentialIds : this.selectedUpdateIds;
const index = list.indexOf(id);
if (index === -1) list.push(id);
@@ -95,6 +98,7 @@ export const useSoftwareStore = defineStore('software', {
this.essentials = await invoke('get_essentials')
},
async fetchUpdates() {
if (this.isBusy) return;
this.loading = true
try {
const res = await invoke('get_updates')
@@ -105,6 +109,7 @@ export const useSoftwareStore = defineStore('software', {
}
},
async fetchAll() {
if (this.isBusy) return;
this.loading = true
try {
const res = await invoke('get_all_software')
@@ -114,6 +119,7 @@ export const useSoftwareStore = defineStore('software', {
}
},
async syncDataIfNeeded(force = false) {
if (this.isBusy) return;
const now = Date.now();
const CACHE_TIMEOUT = 5 * 60 * 1000;
if (!force && this.allSoftware.length > 0 && (now - this.lastFetched < CACHE_TIMEOUT)) {
@@ -140,8 +146,12 @@ export const useSoftwareStore = defineStore('software', {
}
},
async install(id: string) {
// 这里的 logic 同时负责单个安装和批量安装的任务入队
const software = this.findSoftware(id)
if (software) software.status = 'pending'
if (software) {
// 进入队列前统一标记为等待中
software.status = 'pending';
}
await invoke('install_software', { id })
},
findSoftware(id: string) {

10
src/views/AllSoftware.vue
View File

@@ -9,7 +9,7 @@
<button
@click="store.fetchAll"
class="secondary-btn action-btn"
:disabled="store.loading"
:disabled="store.loading || store.isBusy"
>
<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">
@@ -27,6 +27,7 @@
v-model="searchQuery"
placeholder="搜索已安装的软件..."
class="search-input"
:disabled="store.isBusy"
/>
</div>
</div>
@@ -118,7 +119,7 @@ const filteredSoftware = computed(() => {
white-space: nowrap;
}
.action-btn:hover {
.action-btn:hover:not(:disabled) {
background-color: white;
border-color: var(--primary-color);
color: var(--primary-color);
@@ -154,6 +155,11 @@ const filteredSoftware = computed(() => {
box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}
.search-input:disabled {
background-color: #F2F2F7;
cursor: not-allowed;
}
.software-list {
display: flex;
flex-direction: column;

22
src/views/Essentials.vue
View File

@@ -8,7 +8,7 @@
<button
@click="store.syncDataIfNeeded(true)"
class="secondary-btn action-btn"
:disabled="store.loading"
:disabled="store.loading || store.isBusy"
>
<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">
@@ -23,7 +23,7 @@
<button
@click="installSelected"
class="primary-btn action-btn"
:disabled="store.loading || store.selectedEssentialIds.length === 0"
:disabled="store.loading || store.isBusy || store.selectedEssentialIds.length === 0"
>
安装/更新所选 ({{ store.selectedEssentialIds.length }})
</button>
@@ -36,11 +36,11 @@
<span class="selection-count">已选 {{ store.selectedEssentialIds.length }} / {{ selectableItems.length }} 项</span>
</div>
<div class="toolbar-actions">
<button @click="store.selectAll('essential')" class="text-btn">全选</button>
<button @click="store.selectAll('essential')" class="text-btn" :disabled="store.isBusy">全选</button>
<div class="divider"></div>
<button @click="store.deselectAll('essential')" class="text-btn">取消</button>
<button @click="store.deselectAll('essential')" class="text-btn" :disabled="store.isBusy">取消</button>
<div class="divider"></div>
<button @click="store.invertSelection('essential')" class="text-btn">反选</button>
<button @click="store.invertSelection('essential')" class="text-btn" :disabled="store.isBusy">反选</button>
</div>
</div>
@@ -150,10 +150,15 @@ onMounted(() => {
transition: all 0.2s ease;
}
.text-btn:hover {
.text-btn:hover:not(:disabled) {
background-color: rgba(0, 122, 255, 0.08);
}
.text-btn:disabled {
color: #AEAEB2;
cursor: not-allowed;
}
.divider {
width: 1px;
height: 12px;
@@ -180,7 +185,7 @@ onMounted(() => {
box-shadow: var(--btn-shadow);
}
.primary-btn:hover {
.primary-btn:hover:not(:disabled) {
background-color: var(--primary-hover);
}
@@ -190,7 +195,7 @@ onMounted(() => {
border: 1px solid var(--border-color);
}
.secondary-btn:hover {
.secondary-btn:hover:not(:disabled) {
background-color: white;
border-color: var(--primary-color);
color: var(--primary-color);
@@ -199,7 +204,6 @@ onMounted(() => {
.action-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
box-shadow: none;
}

22
src/views/Updates.vue
View File

@@ -8,7 +8,7 @@
<button
@click="store.fetchUpdates"
class="secondary-btn action-btn"
:disabled="store.loading"
:disabled="store.loading || store.isBusy"
>
<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">
@@ -23,7 +23,7 @@
<button
@click="updateSelected"
class="primary-btn action-btn"
:disabled="store.selectedUpdateIds.length === 0 || store.loading"
:disabled="store.selectedUpdateIds.length === 0 || store.loading || store.isBusy"
>
更新所选 ({{ store.selectedUpdateIds.length }})
</button>
@@ -36,11 +36,11 @@
<span class="selection-count">已选 {{ store.selectedUpdateIds.length }} / {{ store.sortedUpdates.length }} 项</span>
</div>
<div class="toolbar-actions">
<button @click="store.selectAll('update')" class="text-btn">全选</button>
<button @click="store.selectAll('update')" class="text-btn" :disabled="store.isBusy">全选</button>
<div class="divider"></div>
<button @click="store.deselectAll('update')" class="text-btn">取消</button>
<button @click="store.deselectAll('update')" class="text-btn" :disabled="store.isBusy">取消</button>
<div class="divider"></div>
<button @click="store.invertSelection('update')" class="text-btn">反选</button>
<button @click="store.invertSelection('update')" class="text-btn" :disabled="store.isBusy">反选</button>
</div>
</div>
@@ -151,10 +151,15 @@ onMounted(() => {
transition: all 0.2s ease;
}
.text-btn:hover {
.text-btn:hover:not(:disabled) {
background-color: rgba(0, 122, 255, 0.08);
}
.text-btn:disabled {
color: #AEAEB2;
cursor: not-allowed;
}
.divider {
width: 1px;
height: 12px;
@@ -181,7 +186,7 @@ onMounted(() => {
box-shadow: var(--btn-shadow);
}
.primary-btn:hover {
.primary-btn:hover:not(:disabled) {
background-color: var(--primary-hover);
}
@@ -191,7 +196,7 @@ onMounted(() => {
border: 1px solid var(--border-color);
}
.secondary-btn:hover {
.secondary-btn:hover:not(:disabled) {
background-color: white;
border-color: var(--primary-color);
color: var(--primary-color);
@@ -200,7 +205,6 @@ onMounted(() => {
.action-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
}
.icon {