feat(frontend): add time manager and unify date formats

This commit is contained in:
Tim
2025-07-09 18:48:06 +08:00
parent 9867ed91f4
commit 52ae87e4f4
6 changed files with 45 additions and 8 deletions

View File

@@ -66,6 +66,7 @@ import { ref, watch } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import CommentEditor from './CommentEditor.vue' import CommentEditor from './CommentEditor.vue'
import { renderMarkdown } from '../utils/markdown' import { renderMarkdown } from '../utils/markdown'
import TimeManager from '../utils/time'
import BaseTimeline from './BaseTimeline.vue' import BaseTimeline from './BaseTimeline.vue'
import { API_BASE_URL, toast } from '../main' import { API_BASE_URL, toast } from '../main'
import { getToken } from '../utils/auth' import { getToken } from '../utils/auth'
@@ -124,14 +125,14 @@ const CommentItem = {
replyList.push({ replyList.push({
id: data.id, id: data.id,
userName: data.author.username, userName: data.author.username,
time: new Date(data.createdAt).toLocaleDateString('zh-CN', { month: 'numeric', day: 'numeric' }), time: TimeManager.format(data.createdAt),
avatar: data.author.avatar, avatar: data.author.avatar,
text: data.content, text: data.content,
reactions: [], reactions: [],
reply: (data.replies || []).map(r => ({ reply: (data.replies || []).map(r => ({
id: r.id, id: r.id,
userName: r.author.username, userName: r.author.username,
time: new Date(r.createdAt).toLocaleDateString('zh-CN', { month: 'numeric', day: 'numeric' }), time: TimeManager.format(r.createdAt),
avatar: r.author.avatar, avatar: r.author.avatar,
text: r.content, text: r.content,
reactions: r.reactions || [], reactions: r.reactions || [],

View File

@@ -0,0 +1,32 @@
export default class TimeManager {
static format(input) {
const date = new Date(input)
if (Number.isNaN(date.getTime())) return ''
const now = new Date()
const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate())
const startOfDate = new Date(date.getFullYear(), date.getMonth(), date.getDate())
const diffDays = Math.floor((startOfToday - startOfDate) / 86400000)
const hh = date.getHours().toString().padStart(2, '0')
const mm = date.getMinutes().toString().padStart(2, '0')
const timePart = `${hh}:${mm}`
if (diffDays === 0) return `今天 ${timePart}`
if (diffDays === 1) return `昨天 ${timePart}`
if (diffDays === 2) return `两天前 ${timePart}`
const month = date.getMonth() + 1
const day = date.getDate()
if (date.getFullYear() === now.getFullYear()) {
return `${month}.${day} ${timePart}`
}
if (date.getFullYear() === now.getFullYear() - 1) {
return `去年 ${month}.${day} ${timePart}`
}
return `${date.getFullYear()}.${month}.${day} ${timePart}`
}
}

View File

@@ -102,6 +102,7 @@
import { ref, onMounted } from 'vue' import { ref, onMounted } from 'vue'
import { stripMarkdown } from '../utils/markdown' import { stripMarkdown } from '../utils/markdown'
import { API_BASE_URL } from '../main' import { API_BASE_URL } from '../main'
import TimeManager from '../utils/time'
import CategorySelect from '../components/CategorySelect.vue' import CategorySelect from '../components/CategorySelect.vue'
import TagSelect from '../components/TagSelect.vue' import TagSelect from '../components/TagSelect.vue'
import ArticleTags from '../components/ArticleTags.vue' import ArticleTags from '../components/ArticleTags.vue'
@@ -152,7 +153,7 @@ export default {
members: [], members: [],
comments: (p.comments || []).length, comments: (p.comments || []).length,
views: p.views, views: p.views,
time: new Date(p.createdAt).toLocaleDateString('zh-CN', { month: 'numeric', day: 'numeric' }) time: TimeManager.format(p.createdAt)
})) }))
) )
if (data.length < pageSize) { if (data.length < pageSize) {

View File

@@ -51,7 +51,7 @@
</div> </div>
</template> </template>
</span> </span>
<span class="notif-time">{{ new Date(item.createdAt).toLocaleString() }}</span> <span class="notif-time">{{ TimeManager.format(item.createdAt) }}</span>
</div> </div>
</template> </template>
</BaseTimeline> </BaseTimeline>
@@ -67,6 +67,7 @@ import { getToken } from '../utils/auth'
import { markNotificationsRead } from '../utils/notification' import { markNotificationsRead } from '../utils/notification'
import { toast } from '../main' import { toast } from '../main'
import { stripMarkdown } from '../utils/markdown' import { stripMarkdown } from '../utils/markdown'
import TimeManager from '../utils/time'
import { hatch } from 'ldrs' import { hatch } from 'ldrs'
hatch.register() hatch.register()
@@ -163,7 +164,7 @@ export default {
onMounted(fetchNotifications) onMounted(fetchNotifications)
return { notifications, formatType, sanitizeDescription, isLoadingMessage, markRead } return { notifications, formatType, sanitizeDescription, isLoadingMessage, markRead, TimeManager }
} }
} }
</script> </script>

View File

@@ -82,6 +82,7 @@ import ReactionsGroup from '../components/ReactionsGroup.vue'
import { renderMarkdown } from '../utils/markdown' import { renderMarkdown } from '../utils/markdown'
import { API_BASE_URL, toast } from '../main' import { API_BASE_URL, toast } from '../main'
import { getToken } from '../utils/auth' import { getToken } from '../utils/auth'
import TimeManager from '../utils/time'
import { hatch } from 'ldrs' import { hatch } from 'ldrs'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
hatch.register() hatch.register()
@@ -129,7 +130,7 @@ export default {
const mapComment = c => ({ const mapComment = c => ({
id: c.id, id: c.id,
userName: c.author.username, userName: c.author.username,
time: new Date(c.createdAt).toLocaleDateString('zh-CN', { month: 'numeric', day: 'numeric' }), time: TimeManager.format(c.createdAt),
avatar: c.author.avatar, avatar: c.author.avatar,
text: c.content, text: c.content,
reactions: c.reactions || [], reactions: c.reactions || [],
@@ -181,7 +182,7 @@ export default {
tags.value = data.tags || [] tags.value = data.tags || []
postReactions.value = data.reactions || [] postReactions.value = data.reactions || []
comments.value = (data.comments || []).map(mapComment) comments.value = (data.comments || []).map(mapComment)
postTime.value = new Date(data.createdAt).toLocaleDateString('zh-CN', { month: 'numeric', day: 'numeric' }) postTime.value = TimeManager.format(data.createdAt)
await nextTick() await nextTick()
gatherPostItems() gatherPostItems()
} catch (e) { } catch (e) {

View File

@@ -181,6 +181,7 @@ import { useRoute } from 'vue-router'
import { API_BASE_URL } from '../main' import { API_BASE_URL } from '../main'
import BaseTimeline from '../components/BaseTimeline.vue' import BaseTimeline from '../components/BaseTimeline.vue'
import { stripMarkdown } from '../utils/markdown' import { stripMarkdown } from '../utils/markdown'
import TimeManager from '../utils/time'
import { hatch } from 'ldrs' import { hatch } from 'ldrs'
hatch.register() hatch.register()
@@ -200,7 +201,7 @@ export default {
const formatDate = (d) => { const formatDate = (d) => {
if (!d) return '' if (!d) return ''
return new Date(d).toLocaleDateString('zh-CN', { year: 'numeric', month: 'numeric', day: 'numeric' }) return TimeManager.format(d)
} }
const fetchData = async () => { const fetchData = async () => {