fix: 部分ui修改

This commit is contained in:
tim
2025-09-19 11:21:27 +08:00
parent 1c59815afa
commit 9991210db2
4 changed files with 59 additions and 46 deletions

View File

@@ -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 {

View File

@@ -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;
} }

View File

@@ -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 {

View File

@@ -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}`
}
} }