feat: 新增帖子最后回复展示、文章目录与三栏布局,优化点赞按钮与导航栏
这是一次包含多个功能升级的提交: 1. 后端新增批量查询帖子最后回复的逻辑,在前端帖子列表项中展示最后回复信息 2. 重构点赞按钮,新增文章样式变体并统一样式逻辑 3. 重写工作台导航栏,精简默认展示的菜单选项 4. 新增文章目录组件,为帖子详情页添加文章目录导航 5. 重构帖子详情页,实现三栏响应式布局,新增板块卡片、作者信息栏与同板块热议推荐 6. 重构帖子列表行组件,优化排版与信息展示逻辑 7. 重构帖子管理操作组件,使用下拉菜单整合所有管理功能 8. 新增全局通用的滚动容器与点赞按钮样式
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
|
||||
Reference in New Issue
Block a user