Skip to content

Commit 010701c

Browse files
yyyCodeyyyCode
committed
更新博客展示UI
1 parent 4cf2f74 commit 010701c

2 files changed

Lines changed: 58 additions & 64 deletions

File tree

‎frontend/src/assets/blog.css‎

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1229,22 +1229,21 @@ body {
12291229
background: #1a1a1a;
12301230
}
12311231

1232-
/* 文章详情：正文 + 右侧大纲两栏 */
1233-
.article-detail-page .article-detail-grid {
1234-
display: grid;
1235-
grid-template-columns: minmax(0, 1fr) 320px;
1236-
gap: 24px;
1237-
align-items: start;
1238-
}
1239-
1232+
/* 文章详情：正文保持居中阅读列，右侧大纲悬浮在空白区 */
12401233
.article-detail-page .article-detail-wrap {
1241-
min-width: 0;
1234+
max-width: 720px;
1235+
margin: 0 auto;
12421236
}
12431237

12441238
.article-toc-rail {
1245-
position: sticky;
1239+
position: fixed;
1240+
right: max(16px, calc((100vw - var(--container)) / 2));
12461241
top: 86px;
1247-
align-self: start;
1242+
width: 320px;
1243+
height: calc(100svh - 86px - 26px);
1244+
overflow: hidden;
1245+
z-index: 900;
1246+
pointer-events: auto;
12481247
}
12491248

12501249
.article-toc-card {
@@ -1272,7 +1271,7 @@ body {
12721271
display: flex;
12731272
flex-direction: column;
12741273
gap: 6px;
1275-
max-height: calc(100svh - 86px - 24px);
1274+
max-height: 100%;
12761275
}
12771276

12781277
.article-toc-item {
@@ -1391,9 +1390,6 @@ body {
13911390
}
13921391

13931392
@media (max-width: 1024px) {
1394-
.article-detail-page .article-detail-grid {
1395-
grid-template-columns: 1fr;
1396-
}
13971393
.article-toc-rail {
13981394
display: none;
13991395
}

‎frontend/src/views/ArticleDetailView.vue‎

Lines changed: 47 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,59 @@
11
<template>
22
<div class="blog-container article-detail-page">
3-
<div class="article-detail-grid">
4-
<div class="article-detail-wrap">
5-
<div v-if="loading" class="article-detail-loading">加载中...</div>
6-
7-
<template v-else>
8-
<article v-if="article?.id" class="article-reader">
9-
<router-link class="article-back" to="/all">
10-
<span class="article-back-chev" aria-hidden="true">‹</span>
11-
返回博客
12-
</router-link>
13-
14-
<p class="article-kicker-meta">
15-
<span>{{ formatDate(article.publishedAt) }}</span>
3+
<div class="article-detail-wrap">
4+
<div v-if="loading" class="article-detail-loading">加载中...</div>
5+
6+
<template v-else>
7+
<article v-if="article?.id" class="article-reader">
8+
<router-link class="article-back" to="/all">
9+
<span class="article-back-chev" aria-hidden="true">‹</span>
10+
返回博客
11+
</router-link>
12+
13+
<p class="article-kicker-meta">
14+
<span>{{ formatDate(article.publishedAt) }}</span>
15+
<span class="article-kicker-dot">·</span>
16+
<span>{{ readMinutes }} 分钟</span>
17+
<template v-if="categoryLabel">
1618
<span class="article-kicker-dot">·</span>
17-
<span>{{ readMinutes }} 分钟</span>
18-
<template v-if="categoryLabel">
19-
<span class="article-kicker-dot">·</span>
20-
<span>{{ categoryLabel }}</span>
21-
</template>
22-
</p>
19+
<span>{{ categoryLabel }}</span>
20+
</template>
21+
</p>
2322

24-
<h1 class="article-reader-title">{{ article.title }}</h1>
25-
<p v-if="article.summary" class="article-reader-lead">{{ article.summary }}</p>
23+
<h1 class="article-reader-title">{{ article.title }}</h1>
24+
<p v-if="article.summary" class="article-reader-lead">{{ article.summary }}</p>
2625

27-
<figure v-if="article.coverMediaKey" class="article-reader-cover">
28-
<img :src="coverUrl(article.coverMediaKey)" alt="" />
29-
</figure>
26+
<figure v-if="article.coverMediaKey" class="article-reader-cover">
27+
<img :src="coverUrl(article.coverMediaKey)" alt="" />
28+
</figure>
3029

31-
<div class="markdown-body article-markdown article-markdown--body" v-html="html" />
32-
</article>
30+
<div class="markdown-body article-markdown article-markdown--body" v-html="html" />
31+
</article>
3332

34-
<div v-else class="article-detail-empty">文章不存在</div>
33+
<div v-else class="article-detail-empty">文章不存在</div>
3534

36-
<CommentSection v-if="article?.id" :article-id="article.id" />
37-
</template>
38-
</div>
39-
40-
<!-- 右侧：文章大纲（标题目录） -->
41-
<aside v-if="tocItems.length" class="article-toc-rail" aria-label="文章大纲">
42-
<div class="article-toc-card">
43-
<div class="article-toc-title">大纲</div>
44-
<nav class="article-toc-body" aria-label="大纲导航">
45-
<button
46-
v-for="it in tocItems"
47-
:key="it.id"
48-
class="article-toc-item"
49-
type="button"
50-
:style="{ paddingLeft: `${10 + Math.max(0, it.level - 1) * 12}px` }"
51-
@click="jumpToHeading(it.id)"
52-
>
53-
{{ it.text }}
54-
</button>
55-
</nav>
56-
</div>
57-
</aside>
35+
<CommentSection v-if="article?.id" :article-id="article.id" />
36+
</template>
5837
</div>
38+
39+
<!-- 右侧：文章大纲（标题目录） -->
40+
<aside v-if="tocItems.length" class="article-toc-rail" aria-label="文章大纲">
41+
<div class="article-toc-card">
42+
<div class="article-toc-title">大纲</div>
43+
<nav class="article-toc-body" aria-label="大纲导航">
44+
<button
45+
v-for="it in tocItems"
46+
:key="it.id"
47+
class="article-toc-item"
48+
type="button"
49+
:style="{ paddingLeft: `${10 + Math.max(0, it.level - 1) * 12}px` }"
50+
@click="jumpToHeading(it.id)"
51+
>
52+
{{ it.text }}
53+
</button>
54+
</nav>
55+
</div>
56+
</aside>
5957
</div>
6058
</template>
6159

0 commit comments

Comments
 (0)