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

essentials selectable

Browse Source
This commit is contained in:
Julian Freeman
2026-03-14 18:40:34 -04:00
parent 66ad8da599
commit 2955e1eada
2 changed files with 188 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/components/SoftwareCard.vue
View File

@@ -1,5 +1,25 @@
<template>
<div class="software-card" :class="{ 'installed-mode': software.status === 'installed' }">
<div
class="software-card"
:class="{
'installed-mode': software.status === 'installed',
'is-selected': isSelected && software.status !== 'installed'
}"
@click="handleCardClick"
>
<!-- 左侧勾选框 -->
<div class="selection-area" v-if="selectable">
<div
class="checkbox"
:class="{
'checked': isSelected,
'disabled': software.status === 'installed'
}"
>
<span v-if="isSelected">✓</span>
</div>
</div>
<div class="card-left">
<div class="icon-container">
<img v-if="software.icon_url" :src="software.icon_url" :alt="software.name" class="software-icon" />
@@ -26,7 +46,7 @@
<div class="action-wrapper">
<button
v-if="software.status === 'idle'"
@click="$emit('install', software.id)"
@click.stop="$emit('install', software.id)"
class="action-btn install-btn"
>
{{ actionLabel }}
@@ -49,7 +69,6 @@
/>
</svg>
</div>
<span class="status-text">{{ software.status === 'pending' ? '等待中...' : '安装中...' }}</span>
</div>
<div v-else-if="software.status === 'success'" class="status-success">
@@ -78,9 +97,13 @@ const props = defineProps<{
status: string;
progress: number;
},
actionLabel?: string
actionLabel?: string,
selectable?: boolean,
isSelected?: boolean
}>();
const emit = defineEmits(['install', 'toggleSelect']);
const placeholderColor = computed(() => {
const colors = ['#FF9500', '#FF3B30', '#34C759', '#007AFF', '#5856D6', '#AF52DE'];
let hash = 0;
@@ -89,6 +112,12 @@ const placeholderColor = computed(() => {
}
return colors[Math.abs(hash) % colors.length];
});
const handleCardClick = () => {
if (props.selectable && props.software.status !== 'installed') {
emit('toggleSelect', props.software.id);
}
};
</script>
<style scoped>
@@ -103,11 +132,49 @@ const placeholderColor = computed(() => {
justify-content: space-between;
border: 1px solid rgba(0, 0, 0, 0.02);
margin-bottom: 12px;
cursor: default;
}
.software-card:hover {
transform: scale(1.01);
.software-card:not(.installed-mode):hover {
transform: scale(1.005);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
border-color: rgba(0, 122, 255, 0.1);
}
.software-card.is-selected {
background-color: rgba(0, 122, 255, 0.02);
border-color: rgba(0, 122, 255, 0.2);
}
/* 勾选框样式 */
.selection-area {
margin-right: 16px;
flex-shrink: 0;
}
.checkbox {
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid var(--border-color);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
color: white;
font-size: 12px;
font-weight: bold;
}
.checkbox.checked {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.checkbox.disabled {
background-color: #F2F2F7;
border-color: #E5E5E7;
cursor: not-allowed;
}
.card-left {
@@ -207,8 +274,8 @@ const placeholderColor = computed(() => {
}
.action-btn {
width: 90px; /* 固定宽度，确保对齐 */
height: 34px; /* 固定高度 */
width: 90px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
@@ -231,8 +298,8 @@ const placeholderColor = computed(() => {
}
.installed-btn {
background-color: #F2F2F7; /* 更浅的灰色 */
color: #AEAEB2; /* 更淡的文字颜色 */
background-color: #F2F2F7;
color: #AEAEB2;
cursor: not-allowed;
}
@@ -263,13 +330,6 @@ const placeholderColor = computed(() => {
transition: stroke-dashoffset 0.3s ease;
}
.status-text {
font-size: 12px;
font-weight: 500;
color: var(--primary-color);
display: none; /* 在固定宽度下隐藏文字，保持简洁 */
}
.status-success, .status-error {
width: 90px;
text-align: center;

125
src/views/Essentials.vue
View File

@@ -21,14 +21,28 @@
{{ store.loading ? '正在同步...' : '同步状态' }}
</button>
<button
@click="installAll"
@click="installSelected"
class="primary-btn action-btn"
:disabled="store.loading"
:disabled="store.loading || selectedIds.length === 0"
>
一键安装全部
安装/更新所选 ({{ selectedIds.length }})
</button>
</div>
</header>
<!-- 批量选择控制栏 -->
<div class="selection-toolbar" v-if="selectableItems.length > 0">
<div class="toolbar-left">
<span class="selection-count">已选 {{ selectedIds.length }} / {{ selectableItems.length }} 项</span>
</div>
<div class="toolbar-actions">
<button @click="selectAll" class="text-btn">全选</button>
<div class="divider"></div>
<button @click="deselectAll" class="text-btn">取消</button>
<div class="divider"></div>
<button @click="invertSelection" class="text-btn">反选</button>
</div>
</div>
<div v-if="store.loading && store.mergedEssentials.length === 0" class="loading-state">
<div class="spinner"></div>
@@ -41,7 +55,10 @@
:key="item.id"
:software="item"
:action-label="item.actionLabel"
:selectable="true"
:is-selected="selectedIds.includes(item.id)"
@install="store.install"
@toggle-select="toggleSelection"
/>
</div>
</main>
@@ -50,22 +67,55 @@
<script setup lang="ts">
import SoftwareCard from '../components/SoftwareCard.vue';
import { useSoftwareStore } from '../store/software';
import { onMounted } from 'vue';
import { onMounted, ref, computed, watch } from 'vue';
const store = useSoftwareStore();
const selectedIds = ref<string[]>([]);
// 1. 先定义所有计算属性和函数
const selectableItems = computed(() => {
return store.mergedEssentials.filter(s => s.status !== 'installed');
});
const toggleSelection = (id: string) => {
const index = selectedIds.value.indexOf(id);
if (index === -1) {
selectedIds.value.push(id);
} else {
selectedIds.value.splice(index, 1);
}
};
const selectAll = () => {
selectedIds.value = selectableItems.value.map(s => s.id);
};
const deselectAll = () => {
selectedIds.value = [];
};
const invertSelection = () => {
const currentSelectable = selectableItems.value.map(s => s.id);
selectedIds.value = currentSelectable.filter(id => !selectedIds.value.includes(id));
};
const installSelected = () => {
selectedIds.value.forEach(id => {
store.install(id);
});
};
// 2. 再定义副作用（watch, onMounted）
watch(() => store.mergedEssentials, (newVal) => {
if (newVal.length > 0 && selectedIds.value.length === 0) {
selectAll();
}
}, { immediate: true });
onMounted(() => {
store.syncDataIfNeeded();
store.initListener();
});
const installAll = () => {
store.mergedEssentials.forEach(s => {
if (s.status === 'idle') {
store.install(s.id);
}
});
};
</script>
<style scoped>
@@ -79,7 +129,7 @@ const installAll = () => {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 32px;
margin-bottom: 24px;
}
.content-header h1 {
@@ -95,6 +145,52 @@ const installAll = () => {
align-items: center;
}
/* 批量选择工具栏 */
.selection-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 20px;
background-color: rgba(0, 0, 0, 0.02);
border-radius: 12px;
margin-bottom: 20px;
border: 1px solid rgba(0, 0, 0, 0.03);
}
.selection-count {
font-size: 13px;
color: var(--text-sec);
font-weight: 500;
}
.toolbar-actions {
display: flex;
align-items: center;
gap: 8px;
}
.text-btn {
background: none;
border: none;
font-size: 13px;
font-weight: 600;
color: var(--primary-color);
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
transition: all 0.2s ease;
}
.text-btn:hover {
background-color: rgba(0, 122, 255, 0.08);
}
.divider {
width: 1px;
height: 12px;
background-color: var(--border-color);
}
.action-btn {
display: flex;
align-items: center;
@@ -133,9 +229,10 @@ const installAll = () => {
}
.action-btn:disabled {
opacity: 0.6;
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
box-shadow: none;
}
.icon {