1896 lines
68 KiB
Vue
1896 lines
68 KiB
Vue
<template>
|
||
<div class="px-5 rewind-bg">
|
||
<!-- Loading State -->
|
||
<div
|
||
v-if="pending"
|
||
class="text-center min-h-compact-layout flex flex-col justify-center"
|
||
>
|
||
<n-spin size="large" />
|
||
<p class="mt-4 text-lg">正在整理你的回顾数据……</p>
|
||
</div>
|
||
|
||
<!-- Error State -->
|
||
<div
|
||
v-else-if="error"
|
||
class="text-center min-h-compact-layout flex flex-col justify-center max-w-2xl mx-auto"
|
||
>
|
||
<n-alert
|
||
type="error"
|
||
title="Error Loading Rewind"
|
||
class="mb-4"
|
||
:closable="false"
|
||
>
|
||
{{
|
||
error instanceof Error
|
||
? error.message
|
||
: "看起来出了点问题，请稍后再试。"
|
||
}}
|
||
</n-alert>
|
||
<n-button @click="fetchRewindData">重试</n-button>
|
||
</div>
|
||
|
||
<!-- Main Content -->
|
||
<div v-else-if="rewindData" id="intro" class="mx-auto">
|
||
<!-- Header Section -->
|
||
<div
|
||
class="header text-center mb-8 min-h-compact-layout flex flex-col justify-center relative"
|
||
>
|
||
<img :src="CloudyRewind" class="w-36 h-36 mx-auto" />
|
||
<h1 class="text-4xl font-bold mb-1">Solar Network 年度回顾</h1>
|
||
<n-tooltip placement="bottom">
|
||
<template #trigger>
|
||
<div class="text-lg opacity-80">
|
||
回顾你的 {{ rewindData.year }} 年在 Solar Network 的精彩旅程
|
||
</div>
|
||
</template>
|
||
数据范围 2024/12/26 - 2025/12/25
|
||
</n-tooltip>
|
||
<n-alert v-if="notMyRewind" type="info" class="max-w-lg mx-auto mt-4">
|
||
<template #header> 这不是你的年度总结</template>
|
||
你正在通过公开分享连接查看 {{ rewindData.account.nick }} 的年度总结。
|
||
<nuxt-link to="/rewind/me">
|
||
<n-a>前往此处查看你的年度总结。</n-a>
|
||
</nuxt-link>
|
||
</n-alert>
|
||
<div class="scroll-hint absolute bottom-10 left-1/2 -translate-x-1/2">
|
||
<p class="text-sm opacity-60 mb-2">向下滚动以开始</p>
|
||
<n-icon
|
||
:component="ArrowDown"
|
||
class="animate-bounce w-6 h-6 text-gray-500 mx-auto"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Scroll-based Sections -->
|
||
<div class="space-y-48">
|
||
<!-- Section 1: Activity Data -->
|
||
<div
|
||
id="activity"
|
||
class="scroll-section min-h-compact-layout flex items-center justify-center"
|
||
>
|
||
<n-card class="w-full max-w-4xl shadow-xl border-l-4 border-blue-600">
|
||
<template #header>
|
||
<div class="flex items-center gap-3">
|
||
<n-icon
|
||
size="28"
|
||
:component="CalendarDaysIcon"
|
||
class="text-blue-600"
|
||
/>
|
||
<h2 class="text-2xl font-bold">你的数字足迹</h2>
|
||
<p class="text-sm opacity-60 -mt-2">
|
||
看看过去一年里你在 Solar Network 的点点滴滴
|
||
</p>
|
||
</div>
|
||
</template>
|
||
|
||
<div
|
||
class="floating-emoji absolute -top-4 -left-4 text-5xl z-10"
|
||
style="animation: float-delayed 8s ease-in-out infinite"
|
||
>
|
||
📅
|
||
</div>
|
||
<div
|
||
class="floating-emoji absolute bottom-4 right-8 text-4xl z-10"
|
||
style="animation: drift 10s ease-in-out infinite"
|
||
>
|
||
⭐
|
||
</div>
|
||
<div
|
||
class="floating-emoji absolute top-1/2 -left-8 text-5xl z-10"
|
||
style="animation: float 7s ease-in-out infinite 1s"
|
||
>
|
||
✨
|
||
</div>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div class="flex flex-col gap-6">
|
||
<n-statistic label="最长连续签到" tabular-nums>
|
||
<n-number-animation
|
||
:to="rewindData.data.pass.maxCheckInStreak"
|
||
/>
|
||
<template #suffix>天</template>
|
||
</n-statistic>
|
||
|
||
<n-statistic label="签到完成度" tabular-nums>
|
||
<n-number-animation
|
||
:to="rewindData.data.pass.checkInCompleteness * 100"
|
||
:precision="2"
|
||
/>
|
||
<template #suffix>%</template>
|
||
</n-statistic>
|
||
|
||
<n-statistic label="最晚活动时间">
|
||
{{ rewindData.data.pass.latestActiveTime }}
|
||
</n-statistic>
|
||
|
||
<div class="flex flex-row gap-8 flex-wrap">
|
||
<n-statistic label="最活跃的日期">
|
||
{{ rewindData.data.pass.mostActiveDay }}
|
||
</n-statistic>
|
||
<n-statistic label="最活跃的日子">
|
||
{{ rewindData.data.pass.mostActiveWeekday }}
|
||
</n-statistic>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="md:text-right pr-4 max-md:order-first">
|
||
<div class="text-5xl mb-3">🔥</div>
|
||
<div class="text-2xl font-bold mb-1">
|
||
{{ getStreakMessage(rewindData.data.pass.maxCheckInStreak) }}
|
||
</div>
|
||
<div class="text-md opacity-80">
|
||
{{
|
||
getStreakDescription(rewindData.data.pass.maxCheckInStreak)
|
||
}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</n-card>
|
||
</div>
|
||
|
||
<div class="transition-words text-center text-lg opacity-70 py-16">
|
||
<div class="text-3xl mb-3">🎯</div>
|
||
<p>这一年，你的坚持令人敬佩。但生活不只有坚持，还有……</p>
|
||
</div>
|
||
|
||
<!-- Section 2: Games & Social -->
|
||
<div
|
||
id="lotteries-and-friends"
|
||
class="scroll-section min-h-compact-layout flex items-center justify-center"
|
||
>
|
||
<div
|
||
class="grid grid-cols-1 xl:grid-cols-2 gap-8 w-full max-w-4xl relative"
|
||
>
|
||
<div
|
||
class="floating-emoji absolute -top-8 -left-4 text-5xl z-10"
|
||
style="animation: float 5s ease-in-out infinite"
|
||
>
|
||
🎉
|
||
</div>
|
||
<div
|
||
class="floating-emoji absolute top-1/3 -right-8 text-4xl z-10"
|
||
style="animation: float-delayed 6s ease-in-out infinite 0.5s"
|
||
>
|
||
🎲
|
||
</div>
|
||
<div
|
||
class="floating-emoji absolute -bottom-4 left-1/4 text-5xl z-10"
|
||
style="animation: drift 9s ease-in-out infinite"
|
||
>
|
||
🤝
|
||
</div>
|
||
<div
|
||
class="floating-emoji absolute top-2/3 -left-6 text-4xl z-10"
|
||
style="animation: float 8s ease-in-out infinite 1.5s"
|
||
>
|
||
💖
|
||
</div>
|
||
<n-card
|
||
class="w-full bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm shadow-lg border-l-4 border-purple-600"
|
||
>
|
||
<template #header>
|
||
<div class="flex items-center gap-3">
|
||
<n-icon
|
||
size="28"
|
||
:component="PartyPopperIcon"
|
||
class="text-purple-600"
|
||
/>
|
||
<h2 class="text-2xl font-bold">彩票游戏</h2>
|
||
</div>
|
||
</template>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div class="flex flex-col gap-6">
|
||
<div class="grid grid-cols-1 gap-4">
|
||
<n-statistic label="获胜次数" tabular-nums>
|
||
<n-number-animation
|
||
:to="rewindData.data.pass.lotteriesWins"
|
||
/>
|
||
<template #suffix>次</template>
|
||
</n-statistic>
|
||
<n-statistic label="失败次数" tabular-nums>
|
||
<n-number-animation
|
||
:to="rewindData.data.pass.lotteriesLosses"
|
||
/>
|
||
<template #suffix>次</template>
|
||
</n-statistic>
|
||
<n-statistic label="胜率" tabular-nums>
|
||
<n-number-animation
|
||
:to="rewindData.data.pass.lotteriesWinRate * 100"
|
||
:precision="1"
|
||
/>
|
||
<template #suffix>%</template>
|
||
</n-statistic>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="md:text-right pr-4 max-md:order-first">
|
||
<div class="text-5xl mb-3">
|
||
{{
|
||
rewindData.data.pass.lotteriesWinRate >= 0.5 ? "🎉" : "😅"
|
||
}}
|
||
</div>
|
||
<div class="text-2xl font-bold mb-1">
|
||
{{
|
||
getLotteryMessage(rewindData.data.pass.lotteriesWinRate)
|
||
}}
|
||
</div>
|
||
<div class="text-md opacity-80">
|
||
{{
|
||
getLotteryDescription(
|
||
rewindData.data.pass.lotteriesWinRate
|
||
)
|
||
}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</n-card>
|
||
|
||
<n-card
|
||
class="w-full bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm shadow-lg border-l-4 border-pink-600"
|
||
>
|
||
<template #header>
|
||
<div class="flex items-center gap-3">
|
||
<n-icon
|
||
size="28"
|
||
:component="HeartIcon"
|
||
class="text-pink-600"
|
||
/>
|
||
<h2 class="text-2xl font-bold">社交连接</h2>
|
||
</div>
|
||
</template>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div class="flex flex-col gap-6">
|
||
<div class="grid grid-cols-1 gap-4">
|
||
<n-statistic label="新增好友" tabular-nums>
|
||
<n-number-animation
|
||
:to="rewindData.data.pass.newFriendsCount"
|
||
/>
|
||
<template #suffix>人</template>
|
||
</n-statistic>
|
||
<n-statistic label="新增屏蔽" tabular-nums>
|
||
<n-number-animation
|
||
:to="rewindData.data.pass.newBlockedCount"
|
||
/>
|
||
<template #suffix>人</template>
|
||
</n-statistic>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="md:text-right pr-4 max-md:order-first">
|
||
<div class="text-5xl mb-3">🤝</div>
|
||
<div class="text-2xl font-bold mb-1">
|
||
{{
|
||
getConnectionMessage(
|
||
rewindData.data.pass.newFriendsCount,
|
||
rewindData.data.pass.newBlockedCount
|
||
)
|
||
}}
|
||
</div>
|
||
<div class="text-md opacity-80">
|
||
{{
|
||
getConnectionDescription(
|
||
rewindData.data.pass.newFriendsCount,
|
||
rewindData.data.pass.newBlockedCount
|
||
)
|
||
}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</n-card>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="transition-words text-center text-lg opacity-70 py-16">
|
||
<div class="text-3xl mb-3">🎨</div>
|
||
<p>社交之外，你还在用自己的方式创造着价值……</p>
|
||
</div>
|
||
|
||
<!-- Section 4: Creator Career Overview -->
|
||
<div
|
||
id="creator"
|
||
class="scroll-section min-h-compact-layout flex items-center justify-center"
|
||
>
|
||
<div class="relative">
|
||
<div
|
||
class="floating-emoji absolute -top-6 right-1/4 text-5xl z-10"
|
||
style="animation: float 6s ease-in-out infinite"
|
||
>
|
||
✏️
|
||
</div>
|
||
<div
|
||
class="floating-emoji absolute top-1/4 -left-6 text-4xl z-10"
|
||
style="animation: float-delayed 7s ease-in-out infinite 0.3s"
|
||
>
|
||
🎨
|
||
</div>
|
||
<div
|
||
class="floating-emoji absolute bottom-1/3 -right-4 text-5xl z-10"
|
||
style="animation: drift 8s ease-in-out infinite"
|
||
>
|
||
💡
|
||
</div>
|
||
<n-card
|
||
class="w-full max-w-4xl bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm shadow-lg border-l-4 border-green-600"
|
||
>
|
||
<template #header>
|
||
<div class="flex items-center gap-3">
|
||
<n-icon
|
||
size="28"
|
||
:component="PencilLineIcon"
|
||
class="text-green-600"
|
||
/>
|
||
<h2 class="text-2xl font-bold">创作生涯</h2>
|
||
</div>
|
||
</template>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
|
||
<n-statistic label="总发帖数量" tabular-nums>
|
||
<n-number-animation
|
||
:to="rewindData.data.sphere.totalPostCount"
|
||
/>
|
||
<template #suffix>篇</template>
|
||
</n-statistic>
|
||
<n-statistic label="总获顶数量" tabular-nums>
|
||
<n-number-animation
|
||
:to="rewindData.data.sphere.totalUpvoteCount"
|
||
/>
|
||
<template #suffix>个</template>
|
||
</n-statistic>
|
||
<n-statistic label="高产记录" tabular-nums>
|
||
<n-number-animation
|
||
:to="rewindData.data.sphere.mostProductiveDay.postCount"
|
||
/>
|
||
<template #suffix>
|
||
篇帖子于
|
||
{{
|
||
rewindData.data.sphere.mostProductiveDay.date
|
||
.split(" ")[0]
|
||
?.split("/")
|
||
.slice(0, 2)
|
||
.join("/")
|
||
}}
|
||
</template>
|
||
</n-statistic>
|
||
</div>
|
||
|
||
<n-card embedded class="text-center mb-6">
|
||
<div class="text-4xl mb-3">✨</div>
|
||
<div class="text-2xl font-bold mb-1">
|
||
{{ getCreatorMessage(rewindData.data.sphere.totalPostCount) }}
|
||
</div>
|
||
<div class="text-md opacity-80">
|
||
{{
|
||
getCreatorDescription(
|
||
rewindData.data.sphere.totalPostCount,
|
||
rewindData.data.sphere.totalUpvoteCount
|
||
)
|
||
}}
|
||
</div>
|
||
</n-card>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div>
|
||
<h3 class="font-bold mb-2 flex items-center gap-2">
|
||
<n-icon :component="PartyPopperIcon" size="16" />
|
||
最受欢迎的帖子
|
||
</h3>
|
||
<nuxt-link
|
||
:to="`/posts/${rewindData.data.sphere.mostPopularPost.id}`"
|
||
target="_blank"
|
||
>
|
||
<post-item-contained
|
||
:post-id="rewindData.data.sphere.mostPopularPost.id"
|
||
/>
|
||
</nuxt-link>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-bold mb-2 flex items-center gap-2">
|
||
<n-icon :component="HeartIcon" size="16" />
|
||
最喜欢你的观众
|
||
</h3>
|
||
<account-nameplate
|
||
:data="rewindData.data.sphere.mostLovedAudience.account"
|
||
>
|
||
<template #suffix>
|
||
<n-config-provider
|
||
:theme-overrides="{
|
||
Statistic: {
|
||
valueFontSize: '1.3rem',
|
||
labelFontSize: '0.8rem'
|
||
}
|
||
}"
|
||
>
|
||
<n-statistic label="贡献的顶数量" tabular-nums>
|
||
<n-number-animation
|
||
:to="
|
||
rewindData.data.sphere.mostLovedAudience
|
||
.upvoteCounts
|
||
"
|
||
/>
|
||
<template #suffix>个</template>
|
||
</n-statistic>
|
||
</n-config-provider>
|
||
</template>
|
||
</account-nameplate>
|
||
</div>
|
||
</div>
|
||
</n-card>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="transition-words text-center text-lg opacity-70 py-16">
|
||
<div class="text-3xl mb-3">🤔</div>
|
||
<p>每一个创作都是你心灵的印记，而这些印记汇聚成了什么？</p>
|
||
</div>
|
||
|
||
<!-- Section 5: Word Cloud -->
|
||
<div
|
||
id="top-words"
|
||
class="scroll-section min-h-compact-layout flex items-center justify-center"
|
||
>
|
||
<div class="relative">
|
||
<div
|
||
class="floating-emoji absolute -top-8 left-1/3 text-5xl z-10"
|
||
style="animation: float 5s ease-in-out infinite"
|
||
>
|
||
✍️
|
||
</div>
|
||
<div
|
||
class="floating-emoji absolute top-1/4 -right-6 text-4xl z-10"
|
||
style="animation: float-delayed 7s ease-in-out infinite 0.5s"
|
||
>
|
||
💬
|
||
</div>
|
||
<div
|
||
class="floating-emoji absolute bottom-1/4 -left-4 text-5xl z-10"
|
||
style="animation: drift 9s ease-in-out infinite"
|
||
>
|
||
💭
|
||
</div>
|
||
<n-card
|
||
class="w-full max-w-4xl bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm shadow-lg border-l-4 border-blue-600"
|
||
>
|
||
<template #header>
|
||
<div class="flex items-center gap-3">
|
||
<n-icon
|
||
size="28"
|
||
:component="MessageCircleIcon"
|
||
class="text-blue-600"
|
||
/>
|
||
<h2 class="text-2xl font-bold">词汇云</h2>
|
||
</div>
|
||
</template>
|
||
|
||
<div class="text-center">
|
||
<div class="text-5xl mb-6">☁️</div>
|
||
<div class="text-2xl font-bold mb-4">你的年度词汇</div>
|
||
<div class="text-md opacity-80 mb-8">
|
||
这些是你最常使用的词汇，反映了你的表达方式和兴趣
|
||
</div>
|
||
|
||
<div
|
||
class="flex flex-wrap justify-center items-center gap-4 max-w-3xl mx-auto"
|
||
>
|
||
<span
|
||
v-for="word in rewindData.data.sphere.topWords"
|
||
:key="word.word"
|
||
:class="getWordCloudClass(word.count)"
|
||
class="inline-block transition-all duration-300 hover:scale-110 cursor-default"
|
||
:title="`${word.word}: ${word.count} 次`"
|
||
>
|
||
<n-tooltip>
|
||
<template #trigger>
|
||
{{ word.word }}
|
||
</template>
|
||
{{ word.count }} 次使用
|
||
</n-tooltip>
|
||
</span>
|
||
</div>
|
||
|
||
<div class="mt-8 text-sm opacity-60">
|
||
词汇使用频率越高，字体越大
|
||
</div>
|
||
</div>
|
||
</n-card>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="transition-words text-center text-lg opacity-70 py-16">
|
||
<div class="text-3xl mb-3">🔍</div>
|
||
<p>除了创作自己的世界，你也在探索别人的精彩……</p>
|
||
</div>
|
||
|
||
<!-- Section 3: Explore History -->
|
||
<div
|
||
id="discovery"
|
||
class="scroll-section min-h-compact-layout flex items-center justify-center"
|
||
>
|
||
<div class="relative">
|
||
<div
|
||
class="floating-emoji absolute -top-6 -right-4 text-5xl z-10"
|
||
style="animation: float 6s ease-in-out infinite"
|
||
>
|
||
🌍
|
||
</div>
|
||
<div
|
||
class="floating-emoji absolute -top-4 -left-6 text-4xl z-10"
|
||
style="animation: float-delayed 8s ease-in-out infinite 0.4s"
|
||
>
|
||
🔍
|
||
</div>
|
||
<div
|
||
class="floating-emoji absolute -bottom-4 right-4 text-5xl z-10"
|
||
style="animation: drift 10s ease-in-out infinite"
|
||
>
|
||
🎯
|
||
</div>
|
||
<n-card
|
||
class="w-full max-w-4xl bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm shadow-lg border-l-4 border-indigo-600"
|
||
>
|
||
<template #header>
|
||
<div class="flex items-center gap-3">
|
||
<n-icon
|
||
size="28"
|
||
:component="GlobeIcon"
|
||
class="text-indigo-600"
|
||
/>
|
||
<h2 class="text-2xl font-bold">探索历史</h2>
|
||
</div>
|
||
</template>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div>
|
||
<h3 class="font-bold mb-2 flex items-center gap-2">
|
||
<n-icon :component="HeartIcon" size="16" />
|
||
你最喜欢的创作者
|
||
</h3>
|
||
<nuxt-link
|
||
:to="`/publishers/${rewindData.data.sphere.mostLovedPublisher.publisher.id}`"
|
||
target="_blank"
|
||
>
|
||
<publisher-nameplate
|
||
:data="
|
||
rewindData.data.sphere.mostLovedPublisher.publisher
|
||
"
|
||
>
|
||
<template #suffix>
|
||
<n-config-provider
|
||
:theme-overrides="{
|
||
Statistic: {
|
||
valueFontSize: '1.3rem',
|
||
labelFontSize: '0.8rem'
|
||
}
|
||
}"
|
||
>
|
||
<n-statistic label="给予的顶数" tabular-nums>
|
||
<n-number-animation
|
||
:to="
|
||
rewindData.data.sphere.mostLovedPublisher
|
||
.upvoteCounts
|
||
"
|
||
/>
|
||
<template #suffix>个</template>
|
||
</n-statistic>
|
||
</n-config-provider>
|
||
</template>
|
||
</publisher-nameplate>
|
||
</nuxt-link>
|
||
</div>
|
||
<div class="text-right flex flex-col justify-center px-5 gap-2">
|
||
<div class="text-4xl">❤️</div>
|
||
<p class="text-lg">
|
||
看起来你真的喜欢他/她呢<br />
|
||
新的一年不妨试试探索更多优秀创作者吧！
|
||
</p>
|
||
<p class="text-xs opacity-80">
|
||
<del>绝对不是因为没有别的东西放在这里所以写一些废话</del>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</n-card>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="transition-words text-center text-lg opacity-70 py-16">
|
||
<div class="text-3xl mb-3">💬</div>
|
||
<p>在探索精彩内容的路上，你并不孤单，因为有……</p>
|
||
</div>
|
||
|
||
<!-- Section 4: Chat Summary -->
|
||
<div
|
||
id="chat"
|
||
class="scroll-section min-h-compact-layout flex items-center justify-center"
|
||
>
|
||
<div class="relative">
|
||
<div
|
||
class="floating-emoji absolute -top-8 left-1/4 text-5xl z-10"
|
||
style="animation: float 5s ease-in-out infinite"
|
||
>
|
||
💬
|
||
</div>
|
||
<div
|
||
class="floating-emoji absolute top-1/4 -right-4 text-4xl z-10"
|
||
style="animation: float-delayed 6s ease-in-out infinite 0.6s"
|
||
>
|
||
💕
|
||
</div>
|
||
<div
|
||
class="floating-emoji absolute bottom-1/3 -left-6 text-5xl z-10"
|
||
style="animation: drift 8s ease-in-out infinite"
|
||
>
|
||
📞
|
||
</div>
|
||
<n-card
|
||
class="w-full max-w-4xl bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm shadow-lg border-l-4 border-teal-600"
|
||
>
|
||
<template #header>
|
||
<div class="flex items-center gap-3">
|
||
<n-icon
|
||
size="28"
|
||
:component="MessageCircleIcon"
|
||
class="text-teal-600"
|
||
/>
|
||
<h2 class="text-2xl font-bold">社交经历</h2>
|
||
</div>
|
||
</template>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div class="flex flex-col gap-6 mt-2">
|
||
<div>
|
||
<h3 class="font-bold mb-2 flex items-center gap-2">
|
||
<n-icon :component="HeartIcon" size="16" />
|
||
最常出没的聊天室
|
||
</h3>
|
||
<n-card size="small">
|
||
<div class="flex items-center gap-4">
|
||
<n-avatar
|
||
:src="
|
||
getChatRoomAvatar(
|
||
rewindData.data.sphere.mostMessagedChat.chat
|
||
)
|
||
"
|
||
>{{
|
||
rewindData.data.sphere.mostMessagedChat.chat.name?.substring(
|
||
0,
|
||
1
|
||
)
|
||
}}
|
||
</n-avatar>
|
||
<div class="grow flex flex-col">
|
||
<div class="text-md font-bold">
|
||
{{
|
||
rewindData.data.sphere.mostMessagedChat.chat.name
|
||
}}
|
||
</div>
|
||
<p>
|
||
<n-number-animation
|
||
:to="
|
||
rewindData.data.sphere.mostMessagedChat
|
||
.messageCounts
|
||
"
|
||
/>
|
||
条消息
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</n-card>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-bold mb-2 flex items-center gap-2">
|
||
<n-icon :component="MessageCircleHeartIcon" size="16" />
|
||
最常联系的人
|
||
</h3>
|
||
<n-card size="small">
|
||
<div class="flex items-center gap-4">
|
||
<n-avatar
|
||
object-fit="cover"
|
||
:src="
|
||
getChatMemberAvatar(
|
||
rewindData.data.sphere.mostMessagedDirectChat.chat
|
||
.members[0]!
|
||
)
|
||
"
|
||
/>
|
||
<div class="grow flex flex-col">
|
||
<div class="text-md font-bold">
|
||
{{
|
||
rewindData.data.sphere.mostMessagedDirectChat.chat
|
||
.members[0]!.account.name || "Direct Message"
|
||
}}
|
||
</div>
|
||
<p>
|
||
<n-number-animation
|
||
:to="
|
||
rewindData.data.sphere.mostMessagedDirectChat
|
||
.messageCounts
|
||
"
|
||
/>
|
||
条消息
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</n-card>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-bold mb-2 flex items-center gap-2">
|
||
<n-icon :component="PhoneCallIcon" size="16" />
|
||
通话时间最长的聊天室
|
||
</h3>
|
||
<n-card size="small">
|
||
<div class="flex items-center gap-4">
|
||
<n-avatar
|
||
:src="
|
||
getChatRoomAvatar(
|
||
rewindData.data.sphere.mostCalledChat.chat
|
||
)
|
||
"
|
||
>{{
|
||
rewindData.data.sphere.mostCalledChat.chat.name?.substring(
|
||
0,
|
||
1
|
||
)
|
||
}}
|
||
</n-avatar>
|
||
<div class="grow flex flex-col">
|
||
<div class="text-md font-bold">
|
||
{{
|
||
rewindData.data.sphere.mostCalledChat.chat.name
|
||
}}
|
||
</div>
|
||
<p>
|
||
<n-number-animation
|
||
:to="
|
||
rewindData.data.sphere.mostCalledChat.duration
|
||
"
|
||
/>
|
||
分钟
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<p class="mt-2 text-opacity-80">
|
||
与这些人一起达成这样的成就
|
||
</p>
|
||
<div
|
||
v-if="
|
||
rewindData.data.sphere.mostCalledAccounts.length > 0
|
||
"
|
||
class="flex justify-start gap-4 mt-2"
|
||
>
|
||
<div
|
||
v-for="item in rewindData.data.sphere
|
||
.mostCalledChatTopMembers"
|
||
:key="item.id"
|
||
>
|
||
<n-tooltip>
|
||
<template #trigger>
|
||
<n-avatar
|
||
object-fit="cover"
|
||
:src="getAccountAvatar(item)"
|
||
/>
|
||
</template>
|
||
{{ item.nick }}
|
||
</n-tooltip>
|
||
</div>
|
||
</div>
|
||
</n-card>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-bold mb-2 flex items-center gap-2">
|
||
<n-icon :component="WebhookIcon" size="16" />
|
||
通话时间前三名
|
||
</h3>
|
||
<n-card
|
||
v-if="
|
||
rewindData.data.sphere.mostCalledAccounts.length > 0
|
||
"
|
||
size="small"
|
||
>
|
||
<div class="flex justify-start gap-4 mt-2">
|
||
<div
|
||
v-for="item in rewindData.data.sphere
|
||
.mostCalledAccounts"
|
||
:key="item.account.id"
|
||
>
|
||
<div
|
||
class="flex flex-col justify-center items-center text-center gap-2"
|
||
>
|
||
<n-avatar
|
||
object-fit="cover"
|
||
:src="getAccountAvatar(item.account)"
|
||
/>
|
||
<div>
|
||
<div class="text-md font-bold">
|
||
{{ item.account.nick }}
|
||
</div>
|
||
<p class="text-sm opacity-80">
|
||
{{ item.duration }} 分钟
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</n-card>
|
||
</div>
|
||
</div>
|
||
<div class="text-right flex flex-col justify-center px-5 gap-2">
|
||
<div class="text-5xl mb-3">💬</div>
|
||
<div class="text-2xl font-bold">
|
||
{{
|
||
getChatMessage(getTotalMessages(rewindData.data.sphere))
|
||
}}
|
||
</div>
|
||
<div class="text-md opacity-80">
|
||
{{
|
||
getChatDescription(
|
||
getTotalMessages(rewindData.data.sphere)
|
||
)
|
||
}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</n-card>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="transition-words text-center text-lg opacity-70 py-16">
|
||
<div class="text-3xl mb-3">🏆</div>
|
||
<p>时光飞逝，让我们一起回顾这一年的精彩……</p>
|
||
</div>
|
||
|
||
<!-- Section 6: Summary -->
|
||
<div
|
||
id="summary"
|
||
class="scroll-section min-h-compact-layout flex items-center justify-center"
|
||
>
|
||
<div class="relative">
|
||
<div
|
||
class="floating-emoji absolute -top-10 left-1/3 text-6xl z-10"
|
||
style="animation: float 6s ease-in-out infinite"
|
||
>
|
||
🏆
|
||
</div>
|
||
<div
|
||
class="floating-emoji absolute top-1/4 -right-6 text-5xl z-10"
|
||
style="animation: float-delayed 7s ease-in-out infinite 0.7s"
|
||
>
|
||
🎊
|
||
</div>
|
||
<div
|
||
class="floating-emoji absolute bottom-1/3 -left-8 text-6xl z-10"
|
||
style="animation: drift 9s ease-in-out infinite"
|
||
>
|
||
🎆
|
||
</div>
|
||
<div
|
||
class="floating-emoji absolute top-1/2 -right-12 text-4xl z-10"
|
||
style="animation: float 10s ease-in-out infinite 0.3s"
|
||
>
|
||
🌟
|
||
</div>
|
||
<n-card
|
||
class="w-full max-w-7xl bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm shadow-lg"
|
||
>
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||
<div class="space-y-6">
|
||
<n-card embedded>
|
||
<h3 class="text-xl font-bold mb-4">📊 年度数据概览</h3>
|
||
<div class="space-y-3">
|
||
<div class="flex justify-between items-center">
|
||
<span class="opacity-80">发帖总数</span>
|
||
<span class="font-bold"
|
||
>{{ rewindData.data.sphere.totalPostCount }} 篇</span
|
||
>
|
||
</div>
|
||
<div class="flex justify-between items-center">
|
||
<span class="opacity-80">获得顶赞</span>
|
||
<span class="font-bold"
|
||
>{{
|
||
rewindData.data.sphere.totalUpvoteCount
|
||
}}
|
||
个</span
|
||
>
|
||
</div>
|
||
<div class="flex justify-between items-center">
|
||
<span class="opacity-80">最长连续签到</span>
|
||
<span class="font-bold"
|
||
>{{ rewindData.data.pass.maxCheckInStreak }} 天</span
|
||
>
|
||
</div>
|
||
<div class="flex justify-between items-center">
|
||
<span class="opacity-80">彩票胜率</span>
|
||
<span class="font-bold"
|
||
>{{
|
||
(
|
||
rewindData.data.pass.lotteriesWinRate * 100
|
||
).toFixed(1)
|
||
}}%</span
|
||
>
|
||
</div>
|
||
<div class="flex justify-between items-center">
|
||
<span class="opacity-80">新增好友</span>
|
||
<span class="font-bold"
|
||
>{{ rewindData.data.pass.newFriendsCount }} 人</span
|
||
>
|
||
</div>
|
||
</div>
|
||
</n-card>
|
||
|
||
<n-card embedded>
|
||
<h3 class="text-xl font-bold mb-4">🎯 创作亮点</h3>
|
||
<div class="space-y-3">
|
||
<div>
|
||
<span class="font-medium opacity-80">高产日:</span>
|
||
<span class="font-bold ml-2"
|
||
>{{
|
||
rewindData.data.sphere.mostProductiveDay.date
|
||
.split(" ")[0]
|
||
?.split("/")
|
||
.slice(0, 2)
|
||
.join("/")
|
||
}}
|
||
发布了
|
||
{{
|
||
rewindData.data.sphere.mostProductiveDay.postCount
|
||
}}
|
||
篇帖子</span
|
||
>
|
||
</div>
|
||
<div>
|
||
<span class="font-medium opacity-80"
|
||
>最受欢迎帖子:</span
|
||
>
|
||
<span class="font-bold ml-2">{{
|
||
rewindData.data.sphere.mostPopularPost.title ||
|
||
"分享媒体"
|
||
}}</span>
|
||
</div>
|
||
<div>
|
||
<span class="font-medium opacity-80">最爱创作者:</span>
|
||
<span class="font-bold ml-2">{{
|
||
rewindData.data.sphere.mostLovedPublisher.publisher
|
||
.nick
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
</n-card>
|
||
|
||
<n-card embedded>
|
||
<h3 class="text-xl font-bold mb-4">💬 社交活跃度</h3>
|
||
<div class="space-y-3">
|
||
<div>
|
||
<span class="font-medium opacity-80">最常出没:</span>
|
||
<span class="font-bold ml-2">{{
|
||
rewindData.data.sphere.mostMessagedChat.chat.name ||
|
||
"聊天室"
|
||
}}</span>
|
||
</div>
|
||
<div>
|
||
<span class="font-medium opacity-80">发送消息:</span>
|
||
<span class="font-bold ml-2"
|
||
>{{
|
||
getTotalMessages(rewindData.data.sphere)
|
||
}}
|
||
条</span
|
||
>
|
||
</div>
|
||
<div>
|
||
<span class="font-medium opacity-80">通话时长:</span>
|
||
<span class="font-bold ml-2"
|
||
>{{
|
||
rewindData.data.sphere.mostCalledChat.duration
|
||
}}
|
||
分钟</span
|
||
>
|
||
</div>
|
||
</div>
|
||
</n-card>
|
||
</div>
|
||
|
||
<div class="space-y-6">
|
||
<n-card embedded>
|
||
<h3 class="text-xl font-bold mb-4">🏆 个人成就</h3>
|
||
<div class="space-y-3">
|
||
<div class="text-center">
|
||
<div class="text-2xl mb-2">🏅</div>
|
||
<div class="font-bold text-lg">
|
||
{{
|
||
getStreakMessage(
|
||
rewindData.data.pass.maxCheckInStreak
|
||
)
|
||
}}
|
||
</div>
|
||
<div class="text-sm opacity-80">签到成就</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="text-2xl mb-2">
|
||
{{
|
||
rewindData.data.pass.lotteriesWinRate >= 0.5
|
||
? "🎰"
|
||
: "🎲"
|
||
}}
|
||
</div>
|
||
<div class="font-bold text-lg">
|
||
{{
|
||
getLotteryMessage(
|
||
rewindData.data.pass.lotteriesWinRate
|
||
)
|
||
}}
|
||
</div>
|
||
<div class="text-sm opacity-80">彩票成就</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="text-2xl mb-2">🤝</div>
|
||
<div class="font-bold text-lg">
|
||
{{
|
||
getConnectionMessage(
|
||
rewindData.data.pass.newFriendsCount,
|
||
rewindData.data.pass.newBlockedCount
|
||
)
|
||
}}
|
||
</div>
|
||
<div class="text-sm opacity-80">社交成就</div>
|
||
</div>
|
||
</div>
|
||
</n-card>
|
||
|
||
<n-card embedded>
|
||
<h3 class="text-xl font-bold mb-4">🚀 新一年展望</h3>
|
||
<p class="opacity-80">
|
||
继续创作、连接和探索。你的
|
||
{{ rewindData.year + 1 }} 年度回顾将会更加精彩！
|
||
</p>
|
||
<div class="mt-4 text-sm opacity-60">
|
||
✨ 保持良好的创作习惯<br />
|
||
💬 继续与朋友保持联系<br />
|
||
🎯 挑战更高的目标
|
||
</div>
|
||
</n-card>
|
||
</div>
|
||
|
||
<div class="flex justify-between gap-4 w-full md:col-span-2">
|
||
<div class="flex gap-4 items-center">
|
||
<n-avatar :src="getAccountAvatar(rewindData.account)" />
|
||
<div class="flex flex-col">
|
||
<p class="text-md font-bold">
|
||
{{ rewindData.account.nick }} 的
|
||
{{ rewindData.year }} 年
|
||
</p>
|
||
<p>@{{ rewindData.account.name }}</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-4 items-center text-right">
|
||
<div class="flex flex-col">
|
||
<p class="text-md font-bold">Solar Network Rewind</p>
|
||
<p>2024/12/26 - 2025/12/25</p>
|
||
</div>
|
||
<img
|
||
:src="CloudyLamb"
|
||
style="width: 34px; aspect-ratio: 1"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</n-card>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="transition-words text-center text-lg opacity-70 py-16">
|
||
<div class="text-3xl mb-3">✨</div>
|
||
<p>新的一年即将开始，让我们带着这些美好的回忆继续前行！</p>
|
||
</div>
|
||
|
||
<div class="min-h-compact-layout flex items-center justify-center">
|
||
<n-card class="w-full max-w-xl relative">
|
||
<div
|
||
class="floating-emoji absolute -top-20 left-10 text-4xl z-10"
|
||
style="animation: float 5s ease-in-out infinite"
|
||
>
|
||
🎁
|
||
</div>
|
||
<div
|
||
class="floating-emoji absolute top-0 -right-20 text-3xl z-10"
|
||
style="animation: float-delayed 6s ease-in-out infinite 0.5s"
|
||
>
|
||
💌
|
||
</div>
|
||
<div
|
||
class="floating-emoji absolute bottom-0 -left-20 text-4xl z-10"
|
||
style="animation: drift 8s ease-in-out infinite"
|
||
>
|
||
🎊
|
||
</div>
|
||
|
||
<p class="opacity-80 mb-4 text-center">
|
||
与朋友分享你在 Solar Network 的精彩旅程！
|
||
</p>
|
||
|
||
<n-alert
|
||
v-if="rewindData?.sharableCode"
|
||
type="success"
|
||
:bordered="false"
|
||
:show-icon="false"
|
||
class="mb-4 px-2"
|
||
>
|
||
<template #header>
|
||
<div class="flex items-center gap-2">
|
||
<n-icon :component="ShareIcon" size="16" />
|
||
<span>公开链接</span>
|
||
</div>
|
||
</template>
|
||
<div class="flex items-center gap-2">
|
||
<input
|
||
type="text"
|
||
:value="sharableUrl"
|
||
readonly
|
||
class="flex-1 bg-transparent border-none outline-none text-sm"
|
||
/>
|
||
<n-button size="small" quaternary @click="copySharableUrl">
|
||
复制
|
||
</n-button>
|
||
</div>
|
||
</n-alert>
|
||
|
||
<n-alert
|
||
v-else
|
||
type="info"
|
||
:bordered="false"
|
||
:show-icon="false"
|
||
class="mb-4 px-2"
|
||
>
|
||
<template #header>
|
||
<div class="flex items-center gap-2">
|
||
<n-icon :component="LockIcon" size="16" />
|
||
<span>私密模式</span>
|
||
</div>
|
||
</template>
|
||
<span class="text-sm">您的年度回顾目前仅自己可见</span>
|
||
</n-alert>
|
||
|
||
<div class="flex gap-3 justify-center">
|
||
<n-button type="primary" size="large" @click="downloadSummary">
|
||
<template #icon>
|
||
<n-icon :component="DownloadIcon" />
|
||
</template>
|
||
下载总结
|
||
</n-button>
|
||
<n-button
|
||
v-if="rewindData?.sharableCode"
|
||
size="large"
|
||
@click="shareOnSocial"
|
||
>
|
||
<template #icon>
|
||
<n-icon :component="ShareIcon" />
|
||
</template>
|
||
分享到社交媒体
|
||
</n-button>
|
||
<n-button
|
||
v-if="!notMyRewind"
|
||
size="large"
|
||
@click="toggleVisibility(!rewindData?.sharableCode)"
|
||
>
|
||
<template #icon>
|
||
<n-icon
|
||
:component="rewindData?.sharableCode ? LockIcon : ShareIcon"
|
||
/>
|
||
</template>
|
||
{{ rewindData?.sharableCode ? "设为私密" : "设为公开" }}
|
||
</n-button>
|
||
</div>
|
||
</n-card>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import {
|
||
GlobeIcon,
|
||
MessageCircleIcon,
|
||
MessageCircleHeartIcon,
|
||
HeartIcon,
|
||
CalendarDaysIcon,
|
||
PencilLineIcon,
|
||
DownloadIcon,
|
||
ShareIcon,
|
||
PartyPopperIcon,
|
||
PhoneCallIcon,
|
||
WebhookIcon,
|
||
ArrowDown,
|
||
LockIcon
|
||
} from "lucide-vue-next"
|
||
import { ref } from "vue"
|
||
import type {
|
||
SnAccount,
|
||
SnRewind,
|
||
SnRewindChat,
|
||
SnRewindChatMember
|
||
} from "~/types/api"
|
||
import { gsap } from "gsap"
|
||
import { ScrollTrigger } from "gsap/ScrollTrigger"
|
||
|
||
import CloudyRewind from "~/assets/images/cloudy-lamb-rewind.png"
|
||
import CloudyLamb from "~/assets/images/cloudy-lamb.png"
|
||
import { FetchError } from "ofetch"
|
||
|
||
const api = useSolarNetwork()
|
||
|
||
const pending = ref(true)
|
||
const error = ref<unknown>(null)
|
||
const rewindData = ref<SnRewind | null>(null)
|
||
|
||
const notMyRewind = computed(
|
||
() => userInfo.user?.id != rewindData.value?.account.id
|
||
)
|
||
|
||
const route = useRoute()
|
||
const router = useRouter()
|
||
const userInfo = useUserStore()
|
||
|
||
// Fetch rewind data
|
||
const fetchRewindData = async () => {
|
||
pending.value = true
|
||
error.value = null
|
||
try {
|
||
if (!route.params.code && !userInfo.user) {
|
||
await router.push(`/auth/login?redirect=${route.fullPath}`)
|
||
return
|
||
}
|
||
const data = await api<SnRewind>(
|
||
`/pass/rewind/${route.params.code || "me"}`
|
||
)
|
||
rewindData.value = data
|
||
} catch (e) {
|
||
if (e instanceof FetchError) {
|
||
if (e.response?.status === 401) {
|
||
await router.push(`/auth/login?redirect=${route.fullPath}`)
|
||
return
|
||
}
|
||
}
|
||
error.value = e
|
||
} finally {
|
||
pending.value = false
|
||
}
|
||
}
|
||
|
||
onMounted(async () => {
|
||
gsap.registerPlugin(ScrollTrigger)
|
||
|
||
await fetchRewindData()
|
||
|
||
// Ensure DOM is updated before running GSAP
|
||
await nextTick()
|
||
|
||
if (rewindData.value) {
|
||
// Animate the header
|
||
gsap.from(".header", {
|
||
opacity: 0,
|
||
y: 30,
|
||
duration: 0.8,
|
||
ease: "power3.out"
|
||
})
|
||
|
||
// Animate sections on scroll
|
||
const sections = gsap.utils.toArray<HTMLElement>(".scroll-section")
|
||
sections.forEach((section) => {
|
||
gsap.from(section, {
|
||
opacity: 0,
|
||
y: 50,
|
||
duration: 0.8,
|
||
ease: "power3.out",
|
||
scrollTrigger: {
|
||
trigger: section,
|
||
start: "top 80%", // Animation starts when the top of the section is 80% from the top of the viewport
|
||
end: "bottom 20%",
|
||
toggleActions: "play none none none"
|
||
}
|
||
})
|
||
})
|
||
|
||
// Animate transition words
|
||
const transitionWords = gsap.utils.toArray<HTMLElement>(".transition-words")
|
||
transitionWords.forEach((transition) => {
|
||
gsap.fromTo(
|
||
transition,
|
||
{
|
||
opacity: 0,
|
||
y: 30
|
||
},
|
||
{
|
||
opacity: 0.7,
|
||
y: 0,
|
||
duration: 0.6,
|
||
ease: "power2.out",
|
||
scrollTrigger: {
|
||
trigger: transition,
|
||
start: "top 85%",
|
||
toggleActions: "play none none none"
|
||
}
|
||
}
|
||
)
|
||
})
|
||
|
||
// Animate floating emojis
|
||
const floatingEmojis = gsap.utils.toArray<HTMLElement>(".floating-emoji")
|
||
floatingEmojis.forEach((emoji) => {
|
||
gsap.from(emoji, {
|
||
opacity: 0,
|
||
scale: 0.5,
|
||
rotation: -20,
|
||
duration: 1,
|
||
ease: "elastic.out(1, 0.5)",
|
||
scrollTrigger: {
|
||
trigger: emoji,
|
||
start: "top 90%",
|
||
toggleActions: "play none none none"
|
||
}
|
||
})
|
||
})
|
||
}
|
||
})
|
||
|
||
onBeforeUnmount(() => {
|
||
// Kill all ScrollTriggers to prevent memory leaks
|
||
ScrollTrigger.getAll().forEach((trigger) => trigger.kill())
|
||
})
|
||
|
||
// Helper methods
|
||
|
||
const getChatRoomAvatar = (item: SnRewindChat) => {
|
||
const apiBase = useSolarNetworkUrl()
|
||
return item.picture
|
||
? `${apiBase}/drive/files/${item.picture.id}`
|
||
: "/api/placeholder/48/48"
|
||
}
|
||
|
||
const getChatMemberAvatar = (member: SnRewindChatMember) => {
|
||
const apiBase = useSolarNetworkUrl()
|
||
return member.account?.profile?.picture
|
||
? `${apiBase}/drive/files/${member.account.profile.picture.id}`
|
||
: "/api/placeholder/64/64"
|
||
}
|
||
|
||
const getAccountAvatar = (account: SnAccount) => {
|
||
const apiBase = useSolarNetworkUrl()
|
||
return account?.profile?.picture
|
||
? `${apiBase}/drive/files/${account.profile.picture.id}`
|
||
: "/api/placeholder/32/32"
|
||
}
|
||
|
||
const sharableUrl = computed(
|
||
() => `${window.location.origin}/rewind/${rewindData.value!.sharableCode}`
|
||
)
|
||
|
||
function copySharableUrl() {
|
||
navigator.clipboard.writeText(sharableUrl.value)
|
||
message.success("链接已复制")
|
||
}
|
||
|
||
const message = useMessage()
|
||
|
||
// Download functionality
|
||
const downloadSummary = async () => {
|
||
const progress = message.loading("正在创建总结，请稍后……", { duration: 0 })
|
||
try {
|
||
// Import html2canvas dynamically
|
||
const html2canvas = (await import("html2canvas")).default
|
||
|
||
// Find the summary section
|
||
const summarySection = document.querySelector("#summary") as HTMLElement
|
||
|
||
if (!summarySection) {
|
||
console.error("Summary section not found")
|
||
return
|
||
}
|
||
|
||
// Configure html2canvas options for better quality
|
||
const canvas = await html2canvas(summarySection, {
|
||
backgroundColor: "#ffffff",
|
||
scale: 2, // Higher resolution
|
||
useCORS: true,
|
||
allowTaint: false,
|
||
width: summarySection.offsetWidth,
|
||
height: summarySection.offsetHeight
|
||
})
|
||
|
||
// Convert to blob and download
|
||
canvas.toBlob(
|
||
(blob) => {
|
||
if (!blob) {
|
||
console.error("Failed to create image blob")
|
||
return
|
||
}
|
||
|
||
const url = URL.createObjectURL(blob)
|
||
const a = document.createElement("a")
|
||
a.href = url
|
||
a.download = `solar-network-rewind-${rewindData.value?.year}-summary.png`
|
||
document.body.appendChild(a)
|
||
a.click()
|
||
document.body.removeChild(a)
|
||
URL.revokeObjectURL(url)
|
||
},
|
||
"image/png",
|
||
1.0
|
||
)
|
||
} catch (error: unknown) {
|
||
message.error(`导出失败…… ${error}`)
|
||
} finally {
|
||
progress.destroy()
|
||
}
|
||
}
|
||
|
||
let isWorking = false
|
||
|
||
// Toggle public/private visibility
|
||
const toggleVisibility = async (makePublic: boolean) => {
|
||
if (isWorking) return
|
||
if (!rewindData.value) return
|
||
|
||
isWorking = true
|
||
const progress = message.loading("正在切换年度回顾可见度……", { duration: 0 })
|
||
|
||
try {
|
||
const endpoint = makePublic
|
||
? `/pass/rewind/me/${rewindData.value.year}/public`
|
||
: `/pass/rewind/me/${rewindData.value.year}/private`
|
||
|
||
const result = await api<SnRewind>(endpoint, {
|
||
method: "POST"
|
||
})
|
||
|
||
rewindData.value = result
|
||
message.success(makePublic ? "已设置为公开" : "已设置为私密")
|
||
} catch (error: unknown) {
|
||
message.error(`操作失败: ${error}`)
|
||
} finally {
|
||
progress.destroy()
|
||
isWorking = false
|
||
}
|
||
}
|
||
|
||
const shareOnSocial = () => {
|
||
const text = `Just checked out my Solar Network Rewind ${rewindData.value?.year}! 🚀\n\nI made ${rewindData.value?.data.sphere.totalPostCount} posts and got ${rewindData.value?.data.sphere.totalUpvoteCount} upvotes. What was your highlight of the year?`
|
||
|
||
if (navigator.share) {
|
||
navigator.share({
|
||
title: "Solar Network Rewind",
|
||
text: text,
|
||
url: window.location.href
|
||
})
|
||
} else {
|
||
// Fallback: copy to clipboard
|
||
navigator.clipboard.writeText(text)
|
||
message.success("链接已复制到剪贴板")
|
||
}
|
||
}
|
||
|
||
// Helper methods for streak messages
|
||
const getStreakMessage = (streak: number): string => {
|
||
if (streak >= 365) {
|
||
return "年度签到王"
|
||
} else if (streak >= 340) {
|
||
return "风雨无阻"
|
||
} else if (streak >= 300) {
|
||
return "签到狂人"
|
||
} else if (streak >= 270) {
|
||
return "持之以恒"
|
||
} else if (streak >= 240) {
|
||
return "坚持不懈"
|
||
} else if (streak >= 200) {
|
||
return "签到达人"
|
||
} else if (streak >= 170) {
|
||
return "锲而不舍"
|
||
} else if (streak >= 140) {
|
||
return "日积月累"
|
||
} else if (streak >= 100) {
|
||
return "签到高手"
|
||
} else if (streak >= 70) {
|
||
return "勤勉踏实"
|
||
} else if (streak >= 50) {
|
||
return "签到积极分子"
|
||
} else if (streak >= 30) {
|
||
return "初露锋芒"
|
||
} else if (streak >= 20) {
|
||
return "签到新手"
|
||
} else if (streak >= 10) {
|
||
return "循序渐进"
|
||
} else if (streak >= 5) {
|
||
return "小试牛刀"
|
||
} else {
|
||
return "继续签到"
|
||
}
|
||
}
|
||
|
||
const getStreakDescription = (streak: number): string => {
|
||
if (streak >= 365) {
|
||
return `连续签到 ${streak} 天，你就是 Solar Network 的签到传奇，风雨无阻，日复一日`
|
||
} else if (streak >= 340) {
|
||
return `连续签到 ${streak} 天，无论刮风下雨，你从未缺席，这份执着令人动容`
|
||
} else if (streak >= 300) {
|
||
return `连续签到 ${streak} 天，你的坚持让人佩服，每一天都不曾懈怠`
|
||
} else if (streak >= 270) {
|
||
return `连续签到 ${streak} 天，持之以恒是你的代名词，每一天的积累都值得`
|
||
} else if (streak >= 240) {
|
||
return `连续签到 ${streak} 天，坚持不懈的精神让你在 Solar Network 上闪闪发光`
|
||
} else if (streak >= 200) {
|
||
return `连续签到 ${streak} 天，签到已经成为你的习惯，融入了生活的节奏`
|
||
} else if (streak >= 170) {
|
||
return `连续签到 ${streak} 天，锲而不舍的努力，让你的每一步都走得稳健`
|
||
} else if (streak >= 140) {
|
||
return `连续签到 ${streak} 天，日积月累的坚持，正一点点构筑你的成就`
|
||
} else if (streak >= 100) {
|
||
return `连续签到 ${streak} 天，你真的很用心在使用 Solar Network，这份热情令人感动`
|
||
} else if (streak >= 70) {
|
||
return `连续签到 ${streak} 天，勤勉踏实的态度，让你的每一天都充满意义`
|
||
} else if (streak >= 50) {
|
||
return `连续签到 ${streak} 天，继续保持这个好习惯，坚持下去会有惊喜`
|
||
} else if (streak >= 30) {
|
||
return `连续签到 ${streak} 天，初露锋芒的你，正在养成优秀的习惯`
|
||
} else if (streak >= 20) {
|
||
return `连续签到 ${streak} 天，开始养成好习惯，每一天的坚持都值得`
|
||
} else if (streak >= 10) {
|
||
return `连续签到 ${streak} 天，循序渐进，好习惯就是这样养成的`
|
||
} else if (streak >= 5) {
|
||
return `连续签到 ${streak} 天，小试牛刀，已经开始你的签到之旅了`
|
||
} else {
|
||
return `连续签到 ${streak} 天，每天签到让生活更有仪式感，继续加油`
|
||
}
|
||
}
|
||
|
||
// Helper methods for chat messages
|
||
const getTotalMessages = (data: SnRewind["data"]["sphere"]): number => {
|
||
return (
|
||
(data.mostMessagedDirectChat?.messageCounts || 0) +
|
||
(data.mostMessagedChat?.messageCounts || 0)
|
||
)
|
||
}
|
||
|
||
const getChatMessage = (totalMessages: number): string => {
|
||
if (totalMessages >= 20000) {
|
||
return "社交传说"
|
||
} else if (totalMessages >= 15000) {
|
||
return "话如泉涌"
|
||
} else if (totalMessages >= 10000) {
|
||
return "社交达人"
|
||
} else if (totalMessages >= 7000) {
|
||
return "健谈专家"
|
||
} else if (totalMessages >= 5000) {
|
||
return "聊天狂人"
|
||
} else if (totalMessages >= 3000) {
|
||
return "健谈达人"
|
||
} else if (totalMessages >= 2000) {
|
||
return "活跃分子"
|
||
} else if (totalMessages >= 1000) {
|
||
return "话痨本痨"
|
||
} else if (totalMessages >= 500) {
|
||
return "健谈人士"
|
||
} else if (totalMessages >= 200) {
|
||
return "社交新星"
|
||
} else if (totalMessages >= 100) {
|
||
return "社交新人"
|
||
} else {
|
||
return "继续聊天"
|
||
}
|
||
}
|
||
|
||
const getChatDescription = (totalMessages: number): string => {
|
||
if (totalMessages >= 20000) {
|
||
return `发送了 ${totalMessages} 条消息，你就是 Solar Network 的社交传说，用文字编织了无数温暖的时刻`
|
||
} else if (totalMessages >= 15000) {
|
||
return `发送了 ${totalMessages} 条消息，话如泉涌的你在 Solar Network 上留下了深刻的印记`
|
||
} else if (totalMessages >= 10000) {
|
||
return `发送了 ${totalMessages} 条消息，你就是 Solar Network 的社交传奇，每一次交流都充满温度`
|
||
} else if (totalMessages >= 7000) {
|
||
return `发送了 ${totalMessages} 条消息，作为健谈专家，你用文字连接着无数朋友`
|
||
} else if (totalMessages >= 5000) {
|
||
return `发送了 ${totalMessages} 条消息，你的聊天热情无人能及，每一条消息都承载着故事`
|
||
} else if (totalMessages >= 3000) {
|
||
return `发送了 ${totalMessages} 条消息，作为健谈达人，你让每一次对话都变得有意义`
|
||
} else if (totalMessages >= 2000) {
|
||
return `发送了 ${totalMessages} 条消息，聊天已经成为你的日常，融入了你的生活节奏`
|
||
} else if (totalMessages >= 1000) {
|
||
return `发送了 ${totalMessages} 条消息，你真的很爱在 Solar Network 上聊天，这份热情感染着每个人`
|
||
} else if (totalMessages >= 500) {
|
||
return `发送了 ${totalMessages} 条消息，继续保持这个交流习惯，让友谊在对话中升温`
|
||
} else if (totalMessages >= 200) {
|
||
return `发送了 ${totalMessages} 条消息，作为社交新星，你正在点亮 Solar Network 的社交圈`
|
||
} else if (totalMessages >= 100) {
|
||
return `发送了 ${totalMessages} 条消息，开始享受 Solar Network 的社交功能，每一次交流都是成长`
|
||
} else {
|
||
return `发送了 ${totalMessages} 条消息，多多交流让社区更精彩，期待你的每一次发言`
|
||
}
|
||
}
|
||
|
||
// Helper methods for lottery messages
|
||
const getLotteryMessage = (winRate: number): string => {
|
||
if (winRate >= 0.9) {
|
||
return "天选之子"
|
||
} else if (winRate >= 0.8) {
|
||
return "彩票之神"
|
||
} else if (winRate >= 0.7) {
|
||
return "命运眷顾"
|
||
} else if (winRate >= 0.6) {
|
||
return "幸运儿"
|
||
} else if (winRate >= 0.5) {
|
||
return "手气达人"
|
||
} else if (winRate >= 0.4) {
|
||
return "运气不错"
|
||
} else if (winRate >= 0.3) {
|
||
return "时来运转"
|
||
} else if (winRate >= 0.2) {
|
||
return "继续加油"
|
||
} else {
|
||
return "试试手气"
|
||
}
|
||
}
|
||
|
||
const getLotteryDescription = (winRate: number): string => {
|
||
if (winRate >= 0.9) {
|
||
return `胜率 ${(winRate * 100).toFixed(1)}%，天选之子！你的运气简直就是神迹`
|
||
} else if (winRate >= 0.8) {
|
||
return `胜率 ${(winRate * 100).toFixed(1)}%，看来你就是传说中的欧皇，运气站在你这边`
|
||
} else if (winRate >= 0.7) {
|
||
return `胜率 ${(winRate * 100).toFixed(1)}%，命运眷顾着你，好运常伴左右`
|
||
} else if (winRate >= 0.6) {
|
||
return `胜率 ${(winRate * 100).toFixed(1)}%，你的运气真的很不错，让周围的人都羡慕`
|
||
} else if (winRate >= 0.5) {
|
||
return `胜率 ${(winRate * 100).toFixed(1)}%，作为手气达人，你的每一次尝试都充满可能`
|
||
} else if (winRate >= 0.4) {
|
||
return `胜率 ${(winRate * 100).toFixed(1)}%，运气还可以，继续保持这份期待`
|
||
} else if (winRate >= 0.3) {
|
||
return `胜率 ${(winRate * 100).toFixed(1)}%，时来运转，说不定下一次就是你`
|
||
} else if (winRate >= 0.2) {
|
||
return `胜率 ${(winRate * 100).toFixed(1)}%，有时候运气就是这样，不放弃就有希望`
|
||
} else {
|
||
return `胜率 ${(winRate * 100).toFixed(1)}%，新的一年希望你能转运，好运总会降临`
|
||
}
|
||
}
|
||
|
||
// Helper methods for connection messages
|
||
const getConnectionMessage = (friends: number, blocked: number): string => {
|
||
const total = friends + blocked
|
||
if (total === 0) {
|
||
return "社交初学者"
|
||
} else if (friends === 0 && blocked > 0) {
|
||
return "独善其身"
|
||
} else if (blocked === 0 && friends > 10) {
|
||
return "社交之星"
|
||
} else if (blocked === 0 && friends > 0) {
|
||
return "友善使者"
|
||
} else if (friends > blocked * 3) {
|
||
return "社交领袖"
|
||
} else if (friends > blocked * 2) {
|
||
return "社交之星"
|
||
} else if (friends > blocked) {
|
||
return "友好使者"
|
||
} else if (blocked > friends * 2) {
|
||
return "谨慎选择"
|
||
} else if (blocked > friends) {
|
||
return "选择性社交"
|
||
} else {
|
||
return "平衡发展"
|
||
}
|
||
}
|
||
|
||
const getConnectionDescription = (friends: number, blocked: number): string => {
|
||
const total = friends + blocked
|
||
if (total === 0) {
|
||
return `今年专注于自己的世界，社交圈的大门随时为你敞开`
|
||
} else if (friends === 0 && blocked > 0) {
|
||
return `屏蔽了 ${blocked} 位，你懂得保护自己的心灵空间`
|
||
} else if (blocked === 0 && friends > 10) {
|
||
return `新增了 ${friends} 位好友，零屏蔽！社交之星的称号非你莫属`
|
||
} else if (blocked === 0 && friends > 0) {
|
||
return `新增了 ${friends} 位好友，零屏蔽，你的友善感染着所有人`
|
||
} else if (friends > blocked * 3) {
|
||
return `新增了 ${friends} 位好友，只有 ${blocked} 位屏蔽，你是社交圈的核心人物`
|
||
} else if (friends > blocked * 2) {
|
||
return `新增了 ${friends} 位好友，只有 ${blocked} 位屏蔽，你的社交圈在不断扩大`
|
||
} else if (friends > blocked) {
|
||
return `新增了 ${friends} 位好友，${blocked} 位屏蔽，你善于结识新朋友`
|
||
} else if (blocked > friends * 2) {
|
||
return `新增了 ${friends} 位好友，屏蔽了 ${blocked} 位，你对社交比较谨慎，保护自己很重要`
|
||
} else if (blocked > friends) {
|
||
return `新增了 ${friends} 位好友，但屏蔽了 ${blocked} 位，选择性社交让你更从容`
|
||
} else {
|
||
return `新增了 ${friends} 位好友，屏蔽了 ${blocked} 位，你的社交选择很平衡，张弛有度`
|
||
}
|
||
}
|
||
|
||
// Helper method for creator activity evaluation
|
||
const getCreatorMessage = (postCount: number): string => {
|
||
if (postCount >= 500) {
|
||
return "创作巅峰"
|
||
} else if (postCount >= 300) {
|
||
return "高产出作者"
|
||
} else if (postCount >= 200) {
|
||
return "多产作家"
|
||
} else if (postCount >= 100) {
|
||
return "创作达人"
|
||
} else if (postCount >= 50) {
|
||
return "活跃创作者"
|
||
} else if (postCount >= 20) {
|
||
return "潜力新星"
|
||
} else if (postCount >= 10) {
|
||
return "初出茅庐"
|
||
} else if (postCount >= 5) {
|
||
return "创作者入门"
|
||
} else {
|
||
return "静待花开"
|
||
}
|
||
}
|
||
|
||
const getCreatorDescription = (
|
||
postCount: number,
|
||
upvoteCount: number
|
||
): string => {
|
||
if (postCount >= 500) {
|
||
return `发布了 ${postCount} 篇帖子，获得 ${upvoteCount} 个顶，你已经是 Solar Network 的创作巅峰`
|
||
} else if (postCount >= 300) {
|
||
return `发布了 ${postCount} 篇帖子，获得 ${upvoteCount} 个顶，作为高产出作者，你的勤奋令人钦佩`
|
||
} else if (postCount >= 200) {
|
||
return `发布了 ${postCount} 篇帖子，获得 ${upvoteCount} 个顶，作为多产作家，你的每一篇都是心血`
|
||
} else if (postCount >= 100) {
|
||
return `发布了 ${postCount} 篇帖子，获得 ${upvoteCount} 个顶，创作达人的称号你实至名归`
|
||
} else if (postCount >= 50) {
|
||
return `发布了 ${postCount} 篇帖子，获得 ${upvoteCount} 个顶，作为活跃创作者，你用作品丰富着社区`
|
||
} else if (postCount >= 20) {
|
||
return `发布了 ${postCount} 篇帖子，获得 ${upvoteCount} 个顶，作为潜力新星，你的未来可期`
|
||
} else if (postCount >= 10) {
|
||
return `发布了 ${postCount} 篇帖子，获得 ${upvoteCount} 个顶，初出茅庐的你正在开启创作之旅`
|
||
} else if (postCount >= 5) {
|
||
return `发布了 ${postCount} 篇帖子，获得 ${upvoteCount} 个顶，创作者的大门已经为你打开`
|
||
} else {
|
||
return `发布了 ${postCount} 篇帖子，获得 ${upvoteCount} 个顶，静待花开，你的每一次创作都珍贵`
|
||
}
|
||
}
|
||
|
||
// Helper method for word cloud styling
|
||
const getWordCloudClass = (count: number): string => {
|
||
if (count >= 2000) {
|
||
return "text-5xl font-black text-blue-600 animate-pulse-slow"
|
||
} else if (count >= 1000) {
|
||
return "text-4xl font-bold text-blue-600"
|
||
} else if (count >= 750) {
|
||
return "text-4xl font-bold text-indigo-600"
|
||
} else if (count >= 500) {
|
||
return "text-3xl font-semibold text-green-600"
|
||
} else if (count >= 350) {
|
||
return "text-3xl font-semibold text-teal-600"
|
||
} else if (count >= 200) {
|
||
return "text-2xl font-medium text-purple-600"
|
||
} else if (count >= 150) {
|
||
return "text-2xl font-medium text-pink-600"
|
||
} else if (count >= 100) {
|
||
return "text-xl font-medium text-rose-600"
|
||
} else if (count >= 75) {
|
||
return "text-xl font-medium text-orange-600"
|
||
} else if (count >= 50) {
|
||
return "text-lg font-normal text-indigo-600"
|
||
} else if (count >= 35) {
|
||
return "text-lg font-normal text-cyan-600"
|
||
} else if (count >= 20) {
|
||
return "text-base font-normal text-teal-600"
|
||
} else if (count >= 10) {
|
||
return "text-base font-normal text-gray-600"
|
||
} else {
|
||
return "text-sm font-normal text-gray-500"
|
||
}
|
||
}
|
||
|
||
useHead({
|
||
title: "Solar Network Rewind 2025",
|
||
meta: [
|
||
{
|
||
name: "description",
|
||
content: "Relive your Solar Network journey from the past year"
|
||
}
|
||
]
|
||
})
|
||
|
||
definePageMeta({
|
||
layout: "minimal"
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.rewind-bg {
|
||
background-image: radial-gradient(
|
||
circle at top left,
|
||
rgba(147, 197, 253, 0.1),
|
||
transparent 30%
|
||
),
|
||
radial-gradient(
|
||
circle at bottom right,
|
||
rgba(244, 114, 182, 0.1),
|
||
transparent 30%
|
||
);
|
||
background-attachment: fixed;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.floating-emoji {
|
||
position: absolute;
|
||
pointer-events: none;
|
||
user-select: none;
|
||
}
|
||
|
||
@keyframes float {
|
||
0%,
|
||
100% {
|
||
transform: translateY(0px) rotate(0deg);
|
||
}
|
||
50% {
|
||
transform: translateY(-20px) rotate(5deg);
|
||
}
|
||
}
|
||
|
||
@keyframes float-delayed {
|
||
0%,
|
||
100% {
|
||
transform: translateY(0px) rotate(0deg);
|
||
}
|
||
50% {
|
||
transform: translateY(-15px) rotate(-5deg);
|
||
}
|
||
}
|
||
|
||
@keyframes drift {
|
||
0% {
|
||
transform: translateX(0px) translateY(0px);
|
||
}
|
||
25% {
|
||
transform: translateX(10px) translateY(-10px);
|
||
}
|
||
50% {
|
||
transform: translateX(0px) translateY(-20px);
|
||
}
|
||
75% {
|
||
transform: translateX(-10px) translateY(-10px);
|
||
}
|
||
100% {
|
||
transform: translateX(0px) translateY(0px);
|
||
}
|
||
}
|
||
|
||
.transition-words {
|
||
transform: translateY(20px);
|
||
}
|
||
|
||
@keyframes pulse-slow {
|
||
0%,
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
|
||
.animate-pulse-slow {
|
||
animation: pulse-slow 3s ease-in-out infinite;
|
||
}
|
||
</style>
|