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
@@ -1,34 +1,39 @@
import { Card, Paragraph, Space, Text, Title } from '@stash/ui'
import { Breadcrumb, Card, Paragraph, Text, Title } from '@stash/ui'
import type { ArticleItem } from '../../data/types'
import { viewPath } from '../../data/view'
import { ArticleBody } from './ArticleBody'
/**
* 文章详情页(对应模板图二):
* 大标题 + [编辑] + 元信息行 + 白色正文卡。
* 面包屑 + 大标题 + [编辑] + 元信息行 + 白色正文卡。
*
* 正文是一整段 Markdown,交给 ArticleBody 解析渲染;
* 渲染细节(支持哪些语法)都收在那一个组件里。
*/
type ArticleDetailViewProps = {
article: ArticleItem
categoryId: string
categoryTitle: string
onBack: () => void
onNavigate: (href: string) => void
}
export function ArticleDetailView({ article, categoryTitle, onBack }: ArticleDetailViewProps) {
export function ArticleDetailView({
article,
categoryId,
categoryTitle,
onNavigate,
}: ArticleDetailViewProps) {
const meta = article.meta ?? ['2 年前', categoryTitle]
const crumbs = [
{ label: '首页', href: '/' },
{ label: categoryTitle, href: viewPath({ type: 'detail', categoryId }) },
{ label: '文章' },
]
return (
<div className="detail-view article-view">
<Card padding="none" className="detail-nav">
<Space justify="between" wrap>
<button type="button" className="detail-back" onClick={onBack}>
返回
</button>
<Text size="xs" tone="muted">
{categoryTitle} / 文章
</Text>
</Space>
<Breadcrumb className="detail-breadcrumb" items={crumbs} onNavigate={onNavigate} />
</Card>
<header className="article-head">