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,4 +1,15 @@
import { Card, Icon, IconButton, Paragraph, Space, Tag, Text, Title } from '@stash/ui'
import {
Breadcrumb,
Card,
Icon,
IconButton,
Paragraph,
Space,
Tag,
Text,
Title,
type BreadcrumbItem,
} from '@stash/ui'
import type { ItemDetailModel } from '../../data/detail'
import type { RelatedItem } from '../../data/types'
import { RelatedList } from './RelatedList'
@@ -6,38 +17,29 @@ import { RelatedList } from './RelatedList'
/**
* 条目详情页:应用与电影共用。
*
* 版式:标题 + 主图(方形头像 / 竖版海报)+ 标签行 + 一句话评价 + 正文
* 版式:面包屑 + 标题 + 主图(方形头像 / 竖版海报)+ 标签行 + 一句话评价 + 正文
* + 操作条(浏览 / 点赞 / 分享 / 跳转)+ 可选横幅 + 「推荐阅读」。
* 具体形态由 ItemDetailModel 决定,这里不判断条目类型。
*/
type ItemDetailViewProps = {
breadcrumb: string
crumbs: BreadcrumbItem[]
model: ItemDetailModel
related: RelatedItem[]
onBack: () => void
onNavigate: (href: string) => void
onOpenItem: (itemId: string) => void
}
export function ItemDetailView({
breadcrumb,
crumbs,
model,
related,
onBack,
onNavigate,
onOpenItem,
}: ItemDetailViewProps) {
return (
<div className="detail-view item-view">
<Card padding="none" className="detail-nav">
<Space justify="between" wrap>
<button type="button" className="detail-back" onClick={onBack}>
返回
</button>
<span className="detail-breadcrumb">
<Text size="xs" tone="muted">
{breadcrumb}
</Text>
</span>
</Space>
<Breadcrumb className="detail-breadcrumb" items={crumbs} onNavigate={onNavigate} />
</Card>
<Card padding="none" className="item-card">