feat: 新增帖子最后回复展示、文章目录与三栏布局,优化点赞按钮与导航栏

这是一次包含多个功能升级的提交:
1. 后端新增批量查询帖子最后回复的逻辑,在前端帖子列表项中展示最后回复信息
2. 重构点赞按钮,新增文章样式变体并统一样式逻辑
3. 重写工作台导航栏,精简默认展示的菜单选项
4. 新增文章目录组件,为帖子详情页添加文章目录导航
5. 重构帖子详情页,实现三栏响应式布局,新增板块卡片、作者信息栏与同板块热议推荐
6. 重构帖子列表行组件,优化排版与信息展示逻辑
7. 重构帖子管理操作组件,使用下拉菜单整合所有管理功能
8. 新增全局通用的滚动容器与点赞按钮样式
This commit is contained in:
2026-09-13 04:06:56 +08:00
parent bee06fa962
commit 52124f2682
10 changed files with 926 additions and 226 deletions

View File

@@ -253,6 +253,54 @@ h1, h2, h3, h4 {
.btn-sm { padding: 7px 14px; font-size: 13px; }
/* ----- 点赞按钮:未赞描边态,hover 同色系填充;已赞为浅底实心态 ----- */
.j13-like {
border-color: var(--line-2);
color: var(--ink-2);
background: var(--panel);
transition:
border-color 0.15s ease,
color 0.15s ease,
background-color 0.15s ease,
box-shadow 0.15s ease;
}
.j13-like svg {
transition: transform 0.15s ease;
}
.j13-like:hover:not(:disabled),
.j13-like.is-liked {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-soft);
}
/* 已赞态 hover 再加深一档,并给同色系投影;心形轻微放大(不改变布局) */
.j13-like:hover:not(:disabled) {
box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 22%, transparent);
}
.j13-like.is-liked:hover:not(:disabled) {
background: color-mix(in srgb, var(--accent) 17%, transparent);
}
.j13-like:hover:not(:disabled) svg {
transform: scale(1.15);
}
.j13-like:active:not(:disabled) svg {
transform: scale(0.95);
}
.j13-like:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.j13-like,
.j13-like svg {
transition: none;
}
.j13-like:hover:not(:disabled) svg,
.j13-like:active:not(:disabled) svg {
transform: none;
}
}
/* ----- 表单 ----- */
.field-label {
display: block;
@@ -570,6 +618,26 @@ h1, h2, h3, h4 {
border-color: var(--nav-active-line);
color: var(--nav-active-ink);
}
/* 帖子详情侧栏内的滚动承载区(目录 / 作者帖子列表):
配合栏容器的 max-height 独立滚动,细滚动条、不产生滚动链 */
.j13-rail-scroll {
min-height: 3.5rem;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
}
.j13-rail-scroll::-webkit-scrollbar {
width: 6px;
}
.j13-rail-scroll::-webkit-scrollbar-thumb {
background: var(--line-2);
border-radius: 99px;
border: none;
}
.j13-rail-scroll::-webkit-scrollbar-track {
background: transparent;
}
}
/* ============================================================