feat(web): 页头滚动信息、移除返回按钮、面包屑左侧可点、侧栏加首页
- 页头中间信息改为无缝滚动 ticker(3 份拼接,24s 线性,尊重 reduced-motion) - 去掉分区 / 条目 / 文章三处「返回」「返回首页」按钮 - 面包屑移到左侧,中间项可点击并通过 onNavigate 走 SPA 路由 - 侧栏新增「首页」,首页时高亮,点击回首页
This commit is contained in:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user