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:
@@ -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 />
|
||||
|
||||
Reference in New Issue
Block a user