feat(website): default cloud-nodes sort to most-installed

Adds a 'Most installed' sort option (downloads desc) and uses it as
the default. The packs in the snapshot already carry registry-served
download counts so the index now leads with what the community uses
most. Custom-styled chevron with extra right-padding (pr-12) so the
text never crowds the dropdown indicator.
This commit is contained in:
Glary-Bot
2026-05-04 16:34:54 +00:00
parent 1b6c36283e
commit d00a9f22d9
2 changed files with 19 additions and 4 deletions

View File

@@ -10,7 +10,7 @@ import { t } from '../../i18n/translations'
import SectionLabel from '../common/SectionLabel.vue'
import PackCard from './PackCard.vue'
type SortMode = 'mostNodes' | 'az' | 'recentlyUpdated'
type SortMode = 'downloads' | 'mostNodes' | 'az' | 'recentlyUpdated'
const { locale = 'en', packs } = defineProps<{
locale?: Locale
@@ -18,7 +18,7 @@ const { locale = 'en', packs } = defineProps<{
}>()
const query = defineModel<string>('query', { default: '' })
const sortMode = ref<SortMode>('mostNodes')
const sortMode = ref<SortMode>('downloads')
const filteredPacks = computed(() => {
const normalizedQuery = query.value.trim().toLowerCase()
@@ -49,7 +49,11 @@ const filteredPacks = computed(() => {
})
}
return matching.sort((a, b) => b.nodes.length - a.nodes.length)
if (sortMode.value === 'mostNodes') {
return matching.sort((a, b) => b.nodes.length - a.nodes.length)
}
return matching.sort((a, b) => (b.downloads ?? 0) - (a.downloads ?? 0))
})
</script>
@@ -91,8 +95,15 @@ const filteredPacks = computed(() => {
<select
id="cloud-nodes-sort"
v-model="sortMode"
class="bg-transparency-white-t5 border-primary-warm-gray/30 text-primary-comfy-canvas w-full rounded-2xl border py-3 pl-4 pr-10 text-sm md:w-64"
class="bg-transparency-white-t5 border-primary-warm-gray/30 text-primary-comfy-canvas w-full appearance-none rounded-2xl border bg-[length:0.65rem_0.65rem] bg-[right_1rem_center] bg-no-repeat py-3 pl-4 pr-12 text-sm md:w-64"
:style="{
backgroundImage:
'url(\'data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 12 12%22 fill=%22%23a39b8d%22><path d=%22M6 9.2L1.4 4.6 2.8 3.2 6 6.4l3.2-3.2 1.4 1.4z%22/></svg>\')'
}"
>
<option value="downloads">
{{ t('cloudNodes.sort.downloads', locale) }}
</option>
<option value="mostNodes">
{{ t('cloudNodes.sort.mostNodes', locale) }}
</option>

View File

@@ -756,6 +756,10 @@ const translations = {
en: 'Search packs or nodes',
'zh-CN': '搜索节点包或节点名称'
},
'cloudNodes.sort.downloads': {
en: 'Most installed',
'zh-CN': '按安装量'
},
'cloudNodes.sort.mostNodes': {
en: 'Most nodes',
'zh-CN': '按节点数量'