Mplan/opencloud
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(frontend): adapt to updated profile APIs

Browse Source
This commit is contained in:
Mplan
2026-07-28 23:23:19 +08:00
parent ccf7049ae0
commit 1a7fd11eee
8 changed files with 237 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/profile/ContributionHeatmap.vue
+66 -22
View File
@@ -22,15 +22,11 @@ const props = withDefaults(defineProps<{
cells: ContributionHeatmapCell[]
totalCount: number
activeDays: number
currentStreak: number
bestStreak: number
activeDate?: string | null
title?: string
subtitle?: string
}>(), {
activeDate: null,
title: '上传活跃度',
subtitle: '按上传日期统计',
})
const emit = defineEmits<{
@@ -154,31 +150,38 @@ const visibleCells = computed(() => {
return cells
})
const maxCount = computed(() => {
return visibleCells.value.reduce((max, cell) => Math.max(max, cell.count), 0)
const contributionQuartiles = computed(() => {
const counts = visibleCells.value
.filter(cell => cell.inRange && cell.count > 0)
.map(cell => cell.count)
.sort((a, b) => a - b)
if (!counts.length) return [0, 0, 0] as const
const percentile = (value: number) => {
const index = Math.ceil(counts.length * value) - 1
return counts[Math.max(0, index)] || 0
}
return [percentile(0.25), percentile(0.5), percentile(0.75)] as const
})
function getLevel(count: number) {
if (count <= 0) return 0
const max = Math.max(maxCount.value, 1)
const ratio = count / max
const [firstQuartile, secondQuartile, thirdQuartile] = contributionQuartiles.value
if (ratio >= 0.75 || count >= 8) return 4
if (ratio >= 0.5 || count >= 5) return 3
if (ratio >= 0.25 || count >= 3) return 2
return 1
if (count <= firstQuartile) return 1
if (count <= secondQuartile) return 2
if (count <= thirdQuartile) return 3
return 4
}
function getCellClass(cell: { count: number; inRange: boolean }) {
if (!cell.inRange) return 'bg-transparent border-transparent'
const level = getLevel(cell.count)
if (level === 0) return 'bg-zinc-100 border-zinc-200'
if (level === 1) return 'bg-[#e0f2fe] border-[#bae6fd]'
if (level === 2) return 'bg-[#7dd3fc] border-[#38bdf8]'
if (level === 3) return 'bg-[#0ea5e9] border-[#0284c7]'
return 'bg-[#0f3d63] border-[#0b2f4d]'
return `oc-heatmap-cell--level-${level}`
}
const weeks = computed(() => {
@@ -396,12 +399,53 @@ function formatMonthTooltip(monthKey: string) {
<div class="mt-5 flex items-center justify-end gap-2 text-xs text-slate-500">
<span>少</span>
<span class="h-3 w-3 border border-slate-200 bg-slate-100"></span>
<span class="h-3 w-3 border border-sky-200 bg-sky-100"></span>
<span class="h-3 w-3 border border-sky-400 bg-sky-300"></span>
<span class="h-3 w-3 border border-teal-600 bg-teal-500"></span>
<span class="h-3 w-3 border border-slate-900 bg-slate-900"></span>
<span class="oc-heatmap-legend-cell oc-heatmap-cell--level-0"></span>
<span class="oc-heatmap-legend-cell oc-heatmap-cell--level-1"></span>
<span class="oc-heatmap-legend-cell oc-heatmap-cell--level-2"></span>
<span class="oc-heatmap-legend-cell oc-heatmap-cell--level-3"></span>
<span class="oc-heatmap-legend-cell oc-heatmap-cell--level-4"></span>
<span>多</span>
</div>
</div>
</template>
<style scoped>
.oc-heatmap-cell,
.oc-heatmap-legend-cell {
transition:
background-color var(--oc-duration-fast) var(--oc-ease-standard),
border-color var(--oc-duration-fast) var(--oc-ease-standard),
transform var(--oc-duration-fast) var(--oc-ease-standard);
}
.oc-heatmap-legend-cell {
width: 0.75rem;
height: 0.75rem;
border-width: 1px;
}
.oc-heatmap-cell--level-0 {
background: var(--oc-heatmap-empty);
border-color: var(--oc-heatmap-empty-border);
}
.oc-heatmap-cell--level-1 {
background: var(--oc-heatmap-level-1);
border-color: var(--oc-heatmap-level-1-border);
}
.oc-heatmap-cell--level-2 {
background: var(--oc-heatmap-level-2);
border-color: var(--oc-heatmap-level-2-border);
}
.oc-heatmap-cell--level-3 {
background: var(--oc-heatmap-level-3);
border-color: var(--oc-heatmap-level-3-border);
}
.oc-heatmap-cell--level-4 {
background: var(--oc-heatmap-level-4);
border-color: var(--oc-heatmap-level-4-border);
}
</style>