mirror of
https://github.com/nagisa77/OpenIsle.git
synced 2026-06-09 19:47:39 +08:00
fix: 部分ui修改
This commit is contained in:
@@ -9,23 +9,6 @@
|
|||||||
<div class="comment-content-item-main">
|
<div class="comment-content-item-main">
|
||||||
<comment-one class="comment-content-item-icon" />
|
<comment-one class="comment-content-item-icon" />
|
||||||
<div class="comment-content-item-text">
|
<div class="comment-content-item-text">
|
||||||
<span class="comment-content-item-prefix">
|
|
||||||
在
|
|
||||||
<NuxtLink :to="`/posts/${entry.comment.post.id}`" class="timeline-link">
|
|
||||||
{{ entry.comment.post.title }}
|
|
||||||
</NuxtLink>
|
|
||||||
<template v-if="entry.comment.parentComment">
|
|
||||||
下对
|
|
||||||
<NuxtLink
|
|
||||||
:to="`/posts/${entry.comment.post.id}#comment-${entry.comment.parentComment.id}`"
|
|
||||||
class="timeline-link"
|
|
||||||
>
|
|
||||||
{{ parentSnippet(entry) }}
|
|
||||||
</NuxtLink>
|
|
||||||
回复了
|
|
||||||
</template>
|
|
||||||
<template v-else> 下评论了 </template>
|
|
||||||
</span>
|
|
||||||
<NuxtLink
|
<NuxtLink
|
||||||
:to="`/posts/${entry.comment.post.id}#comment-${entry.comment.id}`"
|
:to="`/posts/${entry.comment.post.id}#comment-${entry.comment.id}`"
|
||||||
class="timeline-comment-link"
|
class="timeline-comment-link"
|
||||||
@@ -65,7 +48,7 @@ const entries = computed(() => {
|
|||||||
return []
|
return []
|
||||||
})
|
})
|
||||||
|
|
||||||
const formattedDate = computed(() => TimeManager.format(props.item.createdAt))
|
const formattedDate = computed(() => TimeManager.formatWithDay(props.item.createdAt))
|
||||||
|
|
||||||
const hasReplies = computed(() => entries.value.some((entry) => !!entry.comment.parentComment))
|
const hasReplies = computed(() => entries.value.some((entry) => !!entry.comment.parentComment))
|
||||||
const hasComments = computed(() => entries.value.some((entry) => !entry.comment.parentComment))
|
const hasComments = computed(() => entries.value.some((entry) => !entry.comment.parentComment))
|
||||||
@@ -93,9 +76,8 @@ const parentSnippet = (entry) =>
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
padding: 10px 12px;
|
padding-top: 5px;
|
||||||
border-radius: 10px;
|
padding-bottom: 20px;
|
||||||
background: var(--timeline-card-background, transparent);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline-header {
|
.timeline-header {
|
||||||
@@ -112,20 +94,20 @@ const parentSnippet = (entry) =>
|
|||||||
.timeline-date {
|
.timeline-date {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: var(--timeline-date-color, #888);
|
color: var(--timeline-date-color, #888);
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-content {
|
.comment-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 16px;
|
gap: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-content-item {
|
.comment-content-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
padding-bottom: 6px;
|
|
||||||
border-bottom: 1px solid var(--comment-item-border, rgba(0, 0, 0, 0.05));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-content-item:last-child {
|
.comment-content-item:last-child {
|
||||||
@@ -160,11 +142,11 @@ const parentSnippet = (entry) =>
|
|||||||
.timeline-comment-link {
|
.timeline-comment-link {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: var(--link-color);
|
color: var(--link-color);
|
||||||
text-decoration: none;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline-comment-link:hover {
|
.timeline-comment-link:hover {
|
||||||
text-decoration: underline;
|
color: var(--primary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline-link {
|
.timeline-link {
|
||||||
|
|||||||
@@ -13,11 +13,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="article-meta" v-if="hasMeta">
|
<div class="article-meta" v-if="hasMeta">
|
||||||
<ArticleCategory v-if="item.post?.category" :category="item.post.category" />
|
<ArticleCategory v-if="item.post?.category" :category="item.post.category" />
|
||||||
<div class="article-tags" v-if="(item.post?.tags?.length ?? 0) > 0">
|
<ArticleTags :tags="item.post?.tags" />
|
||||||
<span class="article-tag" v-for="tag in item.post?.tags" :key="tag.id || tag.name">
|
|
||||||
#{{ tag.name }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="article-comment-count" v-if="item.post?.commentCount !== undefined">
|
<div class="article-comment-count" v-if="item.post?.commentCount !== undefined">
|
||||||
<comment-one class="article-comment-count-icon" />
|
<comment-one class="article-comment-count-icon" />
|
||||||
<span>{{ item.post?.commentCount }}</span>
|
<span>{{ item.post?.commentCount }}</span>
|
||||||
@@ -29,7 +25,6 @@
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { computed } from 'vue'
|
import { computed } from 'vue'
|
||||||
import ArticleCategory from '~/components/ArticleCategory.vue'
|
|
||||||
import { stripMarkdown } from '~/utils/markdown'
|
import { stripMarkdown } from '~/utils/markdown'
|
||||||
import TimeManager from '~/utils/time'
|
import TimeManager from '~/utils/time'
|
||||||
|
|
||||||
@@ -58,8 +53,8 @@ const hasMeta = computed(() => {
|
|||||||
.timeline-container {
|
.timeline-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
padding-top: 5px;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
padding: 10px 12px;
|
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
background: var(--timeline-card-background, transparent);
|
background: var(--timeline-card-background, transparent);
|
||||||
}
|
}
|
||||||
@@ -83,6 +78,9 @@ const hasMeta = computed(() => {
|
|||||||
.article-container {
|
.article-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
border: 1px solid var(--normal-border-color);
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 10px;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -212,13 +212,6 @@
|
|||||||
<div class="timeline-list">
|
<div class="timeline-list">
|
||||||
<BaseTimeline :items="filteredTimelineItems">
|
<BaseTimeline :items="filteredTimelineItems">
|
||||||
<template #item="{ item }">
|
<template #item="{ item }">
|
||||||
<!-- <template v-if="item.type === 'post'">
|
|
||||||
发布了文章
|
|
||||||
<NuxtLink :to="`/posts/${item.post.id}`" class="timeline-link">
|
|
||||||
{{ item.post.title }}
|
|
||||||
</NuxtLink>
|
|
||||||
<div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
|
|
||||||
</template> -->
|
|
||||||
<template v-if="item.type === 'post'">
|
<template v-if="item.type === 'post'">
|
||||||
<TimelinePostItem :item="item" />
|
<TimelinePostItem :item="item" />
|
||||||
</template>
|
</template>
|
||||||
@@ -229,13 +222,17 @@
|
|||||||
<TimelineCommentGroup :item="item" />
|
<TimelineCommentGroup :item="item" />
|
||||||
</template>
|
</template>
|
||||||
<template v-else-if="item.type === 'tag'">
|
<template v-else-if="item.type === 'tag'">
|
||||||
创建了标签
|
<div class="tags-container">
|
||||||
<span class="timeline-link" @click="gotoTag(item.tag)">
|
<div class="timeline-tag-title">创建了标签</div>
|
||||||
|
<!-- <span class="timeline-link" @click="gotoTag(item.tag)">
|
||||||
{{ item.tag.name }}<span v-if="item.tag.count"> x{{ item.tag.count }}</span>
|
{{ item.tag.name }}<span v-if="item.tag.count"> x{{ item.tag.count }}</span>
|
||||||
</span>
|
</span>
|
||||||
<div class="timeline-snippet" v-if="item.tag.description">
|
<div class="timeline-snippet" v-if="item.tag.description">
|
||||||
{{ item.tag.description }}
|
{{ item.tag.description }}
|
||||||
</div>
|
</div>
|
||||||
|
<div class="timeline-date">{{ formatDate(item.createdAt) }}</div> -->
|
||||||
|
<ArticleTags :tags="[item.tag]" />
|
||||||
|
</div>
|
||||||
<div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
|
<div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
@@ -979,9 +976,16 @@ watch(selectedTab, async (val) => {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline-title {
|
.tags-container {
|
||||||
font-size: 18px;
|
display: flex;
|
||||||
font-weight: bold;
|
flex-direction: row;
|
||||||
|
gap: 10px;
|
||||||
|
padding-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-tag-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-content {
|
.comment-content {
|
||||||
|
|||||||
@@ -40,4 +40,33 @@ export default class TimeManager {
|
|||||||
|
|
||||||
return `${date.getFullYear()}.${month}.${day} ${timePart}`
|
return `${date.getFullYear()}.${month}.${day} ${timePart}`
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 仅显示日期(不含时间)
|
||||||
|
static formatWithDay(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)
|
||||||
|
|
||||||
|
if (diffDays === 0) return '今天'
|
||||||
|
if (diffDays === 1) return '昨天'
|
||||||
|
if (diffDays === 2) return '前天'
|
||||||
|
|
||||||
|
const month = date.getMonth() + 1
|
||||||
|
const day = date.getDate()
|
||||||
|
|
||||||
|
if (date.getFullYear() === now.getFullYear()) {
|
||||||
|
return `${month}.${day}`
|
||||||
|
}
|
||||||
|
|
||||||
|
if (date.getFullYear() === now.getFullYear() - 1) {
|
||||||
|
return `去年 ${month}.${day}`
|
||||||
|
}
|
||||||
|
|
||||||
|
return `${date.getFullYear()}.${month}.${day}`
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user