feat: Add download count formatting function and update card components to use it

This commit is contained in:
jxxghp
2025-10-18 20:13:41 +08:00
parent c172ac0d5c
commit 4a7425a947
3 changed files with 12 additions and 3 deletions

View File

@@ -23,6 +23,13 @@ export function kFormatter(num: number) {
: Math.abs(num).toFixed(0).replace(regex, ',')
}
// 格式化下载量显示超过1000显示为x.xk格式
export function formatDownloadCount(num: number): string {
if (!num || num < 1000) return num?.toLocaleString() || '0'
return `${(num / 1000).toFixed(1)}k`
}
/**
* Format and return date in Humanize format
* Intl docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format

View File

@@ -6,6 +6,7 @@ import type { Plugin } from '@/api/types'
import { getLogoUrl } from '@/utils/imageUtils'
import { getDominantColor } from '@/@core/utils/image'
import { isNullOrEmptyObject } from '@/@core/utils'
import { formatDownloadCount } from '@/@core/utils/formatters'
import ProgressDialog from '@/components/dialog/ProgressDialog.vue'
import { useI18n } from 'vue-i18n'
@@ -244,7 +245,7 @@ const dropdownItems = ref([
</div>
<div v-if="props.count" class="ms-2 flex-shrink-0 download-count align-middle items-center">
<VIcon size="small" icon="mdi-download" />
<span class="text-sm">{{ props.count?.toLocaleString() }}</span>
<span class="text-sm">{{ formatDownloadCount(props.count) }}</span>
</div>
</div>
<div class="absolute bottom-0 right-0">
@@ -327,7 +328,7 @@ const dropdownItems = ref([
}}</VBtn>
<div class="text-xs mt-2" v-if="props.count">
<VIcon icon="mdi-fire" />{{
t('plugin.totalDownloads', { count: props.count?.toLocaleString() })
t('plugin.totalDownloads', { count: formatDownloadCount(props.count) })
}}
</div>
</div>

View File

@@ -6,6 +6,7 @@ import type { Plugin } from '@/api/types'
import { isNullOrEmptyObject } from '@core/utils'
import { getLogoUrl } from '@/utils/imageUtils'
import { getDominantColor } from '@/@core/utils/image'
import { formatDownloadCount } from '@/@core/utils/formatters'
import VersionHistory from '@/components/misc/VersionHistory.vue'
import ProgressDialog from '../dialog/ProgressDialog.vue'
import PluginConfigDialog from '../dialog/PluginConfigDialog.vue'
@@ -492,7 +493,7 @@ watch(
</div>
<span v-if="props.count" class="ms-2 flex-shrink-0 download-count items-center align-middle">
<VIcon size="small" icon="mdi-download" />
<span class="text-sm">{{ props.count?.toLocaleString() }}</span>
<span class="text-sm">{{ formatDownloadCount(props.count) }}</span>
</span>
</div>
<div class="absolute bottom-0 right-0">