feat(web): 页头滚动信息、移除返回按钮、面包屑左侧可点、侧栏加首页
- 页头中间信息改为无缝滚动 ticker(3 份拼接,24s 线性,尊重 reduced-motion) - 去掉分区 / 条目 / 文章三处「返回」「返回首页」按钮 - 面包屑移到左侧,中间项可点击并通过 onNavigate 走 SPA 路由 - 侧栏新增「首页」,首页时高亮,点击回首页
This commit is contained in:
@@ -16,9 +16,14 @@ type CategoryNavProps = {
|
||||
/** 当前明细视图的分类 / 分组,用于高亮 */
|
||||
activeCategoryId?: string
|
||||
activeGroupId?: string
|
||||
/** 是否在首页(高亮「首页」项) */
|
||||
homeActive?: boolean
|
||||
onNavigate: (target: NavTarget) => void
|
||||
/** 点击「首页」 */
|
||||
onHome: () => void
|
||||
}
|
||||
|
||||
const HOME_KEY = 'home'
|
||||
const categoryKey = (id: string) => `cat:${id}`
|
||||
const groupKey = (categoryId: string, groupId: string) => `group:${categoryId}:${groupId}`
|
||||
|
||||
@@ -26,35 +31,46 @@ export function CategoryNav({
|
||||
categories,
|
||||
activeCategoryId,
|
||||
activeGroupId,
|
||||
homeActive = false,
|
||||
onNavigate,
|
||||
onHome,
|
||||
}: CategoryNavProps) {
|
||||
const items: MenuItem[] = categories.map((category) => {
|
||||
const groups =
|
||||
category.kind === 'apps'
|
||||
? category.groups.filter((group) => group.showInSidebar !== false)
|
||||
: []
|
||||
const items: MenuItem[] = [
|
||||
{ key: HOME_KEY, label: '首页' },
|
||||
...categories.map((category) => {
|
||||
const groups =
|
||||
category.kind === 'apps'
|
||||
? category.groups.filter((group) => group.showInSidebar !== false)
|
||||
: []
|
||||
|
||||
return {
|
||||
key: categoryKey(category.id),
|
||||
label: category.title,
|
||||
children:
|
||||
groups.length > 0
|
||||
? groups.map((group) => ({
|
||||
key: groupKey(category.id, group.id),
|
||||
label: group.name,
|
||||
}))
|
||||
: undefined,
|
||||
}
|
||||
})
|
||||
return {
|
||||
key: categoryKey(category.id),
|
||||
label: category.title,
|
||||
children:
|
||||
groups.length > 0
|
||||
? groups.map((group) => ({
|
||||
key: groupKey(category.id, group.id),
|
||||
label: group.name,
|
||||
}))
|
||||
: undefined,
|
||||
}
|
||||
}),
|
||||
]
|
||||
|
||||
const activeKey =
|
||||
activeCategoryId === undefined
|
||||
const activeKey = homeActive
|
||||
? HOME_KEY
|
||||
: activeCategoryId === undefined
|
||||
? undefined
|
||||
: activeGroupId !== undefined
|
||||
? groupKey(activeCategoryId, activeGroupId)
|
||||
: categoryKey(activeCategoryId)
|
||||
|
||||
const handleSelect = (key: string) => {
|
||||
if (key === HOME_KEY) {
|
||||
onHome()
|
||||
return
|
||||
}
|
||||
|
||||
if (key.startsWith('group:')) {
|
||||
const [, categoryId, groupId] = key.split(':')
|
||||
onNavigate({ categoryId, groupId })
|
||||
|
||||
@@ -18,7 +18,11 @@ type SidebarProps = {
|
||||
onRefresh: () => void
|
||||
activeCategoryId?: string
|
||||
activeGroupId?: string
|
||||
/** 是否在首页 */
|
||||
homeActive?: boolean
|
||||
onNavigate: (target: NavTarget) => void
|
||||
/** 点击「首页」 */
|
||||
onHome: () => void
|
||||
}
|
||||
|
||||
export function Sidebar({
|
||||
@@ -29,7 +33,9 @@ export function Sidebar({
|
||||
onRefresh,
|
||||
activeCategoryId,
|
||||
activeGroupId,
|
||||
homeActive = false,
|
||||
onNavigate,
|
||||
onHome,
|
||||
}: SidebarProps) {
|
||||
return (
|
||||
<div className="sidebar">
|
||||
@@ -46,7 +52,9 @@ export function Sidebar({
|
||||
categories={categories}
|
||||
activeCategoryId={activeCategoryId}
|
||||
activeGroupId={activeGroupId}
|
||||
homeActive={homeActive}
|
||||
onNavigate={onNavigate}
|
||||
onHome={onHome}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user