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
@@ -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>
)