mirror of
https://github.com/nagisa77/OpenIsle.git
synced 2026-05-11 13:17:29 +08:00
feat(frontend): add time manager and unify date formats
This commit is contained in:
@@ -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 || [],
|
||||||
|
|||||||
32
open-isle-cli/src/utils/time.js
Normal file
32
open-isle-cli/src/utils/time.js
Normal 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}`
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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) {
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
@@ -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 () => {
|
||||||
|
|||||||
Reference in New Issue
Block a user