feat(web): 页头滚动信息、移除返回按钮、面包屑左侧可点、侧栏加首页

- 页头中间信息改为无缝滚动 ticker(3 份拼接,24s 线性,尊重 reduced-motion)
- 去掉分区 / 条目 / 文章三处「返回」「返回首页」按钮
- 面包屑移到左侧,中间项可点击并通过 onNavigate 走 SPA 路由
- 侧栏新增「首页」,首页时高亮,点击回首页
This commit is contained in:
stash
2026-10-29 11:26:47 +08:00
parent 2724d6f3ff
commit 22f7853bdd
9 changed files with 221 additions and 130 deletions
+56 -12
View File
@@ -69,9 +69,60 @@
letter-spacing: 0.04em;
}
.header-info {
/* ---------- 页头滚动信息 ---------- */
.header-ticker {
flex: 1;
justify-content: center;
min-width: 0;
overflow: hidden;
mask-image: linear-gradient(
90deg,
transparent 0,
#000 32px,
#000 calc(100% - 32px),
transparent 100%
);
}
.header-ticker-track {
display: flex;
width: max-content;
animation: header-ticker 24s linear infinite;
}
/* 每组占满整条轨道宽度:任何时候只看到一份信息,滚动时下一份从右侧进入 */
.header-ticker-group {
display: inline-flex;
align-items: center;
justify-content: space-evenly;
gap: var(--su-space-8);
min-width: 100%;
}
.header-ticker-item {
display: inline-flex;
align-items: center;
gap: var(--su-space-2);
font-size: var(--su-font-size-sm);
line-height: var(--su-line-height-sm);
color: var(--su-text-sub);
white-space: nowrap;
}
@keyframes header-ticker {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100% / 3));
}
}
@media (prefers-reduced-motion: reduce) {
.header-ticker-track {
animation: none;
}
}
.header-actions {
@@ -335,19 +386,12 @@
.detail-nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px var(--su-space-5);
}
.detail-back {
color: var(--su-color-primary);
font-size: var(--su-font-size-md);
font-weight: var(--su-font-weight-bold);
cursor: pointer;
}
.detail-back:hover {
text-decoration: underline;
/* 面包屑在左侧,12px(与旧版 breadcrumb 一致) */
.detail-breadcrumb {
font-size: var(--su-font-size-xs);
}
.detail-nav > * {