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