1
0
mirror of https://github.com/sendevia/website.git synced 2026-03-05 23:32:45 +08:00

feat(ArticleLayout): enhance date formatting and display in article layout

This commit is contained in:
2025-12-15 17:23:51 +08:00
parent 9da9ecb502
commit a7f17bf5e2

View File

@@ -44,8 +44,8 @@ const copyShortLink = async () => {
}
};
// 格式化时间戳
const formatTimestamp = (timestamp: number): string => {
// 时间处理工具函数
const formatDate = (timestamp: number, format: "chinese" | "iso" = "chinese"): string => {
if (!timestamp) return "";
const date = new Date(timestamp);
@@ -54,6 +54,14 @@ const formatTimestamp = (timestamp: number): string => {
const day = date.getDate();
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
if (format === "iso") {
return `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")} ${String(hours).padStart(
2,
"0"
)}:${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
}
return `${year}${month}${day}${hours}${minutes}`;
};
@@ -62,34 +70,35 @@ const formatTimestamp = (timestamp: number): string => {
const formatTimeAgo = (diffMs: number): string => {
if (diffMs <= 0) return "刚刚";
const diffSeconds = Math.floor(diffMs / 1000);
const diffMinutes = Math.floor(diffSeconds / 60);
const diffHours = Math.floor(diffMinutes / 60);
const diffDays = Math.floor(diffHours / 24);
const diffMonths = Math.floor(diffDays / 30);
const diffYears = Math.floor(diffDays / 365);
const seconds = Math.floor(diffMs / 1000);
const minutes = Math.floor(seconds / 60);
const hours = Math.floor(minutes / 60);
const days = Math.floor(hours / 24);
const months = Math.floor(days / 30);
const years = Math.floor(days / 365);
if (diffYears > 0) {
return `${diffYears}年前`;
} else if (diffMonths > 0) {
return `${diffMonths}个月前`;
} else if (diffDays > 0) {
return `${diffDays}天前`;
} else if (diffHours > 0) {
return `${diffHours}小时前`;
} else if (diffMinutes > 0) {
return `${diffMinutes}分钟前`;
} else {
return `${diffSeconds}秒前`;
const timeUnits = [
{ value: years, unit: "年前" },
{ value: months, unit: "个月前" },
{ value: days, unit: "天前" },
{ value: hours, unit: "小时前" },
{ value: minutes, unit: "分钟前" },
{ value: seconds, unit: "秒前" },
];
for (const { value, unit } of timeUnits) {
if (value > 0) return `${value}${unit}`;
}
return "刚刚";
};
// 获取发布时间戳
const publishTimestamp = computed(() => {
const dateStr = frontmatter.value?.date;
if (!dateStr) return 0;
const timestamp = new Date(dateStr).getTime();
return isNaN(timestamp) ? 0 : timestamp;
const ts = new Date(dateStr).getTime();
return isNaN(ts) ? 0 : ts;
});
// 获取最后修改时间戳
@@ -103,11 +112,15 @@ const lastUpdatedTimestamp = computed(() => {
// 格式化发布日期
const formattedPublishDate = computed(() => {
if (!publishTimestamp.value) return "";
return formatTimestamp(publishTimestamp.value);
return formatDate(publishTimestamp.value, "chinese");
});
// 格式化最后修改时间
// 原始最后修改时间本地ISO格式
const lastUpdatedRawTime = computed(() => {
return formatDate(lastUpdatedTimestamp.value, "iso");
});
// 格式化最后修改时间(显示文本)
const formattedLastUpdated = computed(() => {
const publishTs = publishTimestamp.value;
const lastUpdateTs = lastUpdatedTimestamp.value;
@@ -118,11 +131,9 @@ const formattedLastUpdated = computed(() => {
const isSameTime = !publishTs || Math.abs(lastUpdateTs - publishTs) < 60000;
if (isSameTime) {
return formatTimestamp(lastUpdateTs);
return formatDate(lastUpdateTs, "chinese");
} else {
const timeSinceUpdate = Date.now() - lastUpdateTs;
const timeAgo = formatTimeAgo(timeSinceUpdate);
return `${timeAgo}编辑`;
return `${formatTimeAgo(Date.now() - lastUpdateTs)}编辑`;
}
});
@@ -262,7 +273,7 @@ if (isClient()) {
<div id="article-beside">
<div class="post-info">
<p class="date-publish" v-if="formattedPublishDate">发布于 {{ formattedPublishDate }}</p>
<p class="date-update">{{ formattedLastUpdated }}</p>
<p class="date-update" :title="lastUpdatedRawTime">{{ formattedLastUpdated }}</p>
<p class="id" v-if="articleId">文章ID {{ articleId }}</p>
</div>
<PageIndicator />