refactor(web): 前端改用 @stash/ui 组件库
- 新增本地依赖 @stash/ui(file:../../stash-ui),引入其 style.css 与设计令牌 - 页面骨架改用 Layout(contained + header/sider),搜索框改为吸顶 - 卡片/菜单/按钮/标签/头像/分页/空态/提示全部换成组件库组件 - 删除本地 iconfont 与 1400 行手写组件样式,App.css 只保留页面级样式 - 数据层、路由、过滤逻辑未改动;33 个 Rust 测试通过
This commit is contained in:
@@ -1,3 +1,4 @@
|
||||
import { Badge, Breadcrumb, Button, Card, Empty, Space, Title } from '@stash/ui'
|
||||
import { categoryCount, type Category } from '../../data/types'
|
||||
import { AppGrid } from './AppGrid'
|
||||
import { CesCardGrid } from './CesCardGrid'
|
||||
@@ -28,10 +29,14 @@ export function DetailView({ category, groupId, onBack, onOpenItem }: DetailView
|
||||
|
||||
const title = activeGroup?.name ?? category.title
|
||||
const count = activeGroup !== undefined ? activeGroup.items.length : categoryCount(category)
|
||||
const breadcrumb =
|
||||
const crumbs =
|
||||
activeGroup !== undefined
|
||||
? `首页 / ${category.title} / ${activeGroup.name}`
|
||||
: `首页 / ${category.title}`
|
||||
? [
|
||||
{ label: '首页', href: '/' },
|
||||
{ label: category.title },
|
||||
{ label: activeGroup.name },
|
||||
]
|
||||
: [{ label: '首页', href: '/' }, { label: category.title }]
|
||||
|
||||
function renderBody() {
|
||||
if (category.kind === 'posters') {
|
||||
@@ -51,33 +56,35 @@ export function DetailView({ category, groupId, onBack, onOpenItem }: DetailView
|
||||
}
|
||||
|
||||
if (category.groups.length === 0) {
|
||||
return <p className="section-empty">{category.emptyText ?? '暂无内容'}</p>
|
||||
return <Empty text={category.emptyText ?? '暂无内容'} />
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Space direction="column" gap="lg" align="stretch">
|
||||
{category.groups.map((group) => (
|
||||
<GroupBlock key={group.id} group={group} onOpen={onOpenItem} />
|
||||
))}
|
||||
</>
|
||||
</Space>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="detail-view">
|
||||
<div className="detail-nav card-box">
|
||||
<button type="button" className="detail-back" onClick={onBack}>
|
||||
返回首页
|
||||
</button>
|
||||
<span className="detail-breadcrumb">{breadcrumb}</span>
|
||||
</div>
|
||||
<Card padding="sm">
|
||||
<Space justify="between" wrap>
|
||||
<Button variant="ghost" size="sm" onClick={onBack}>
|
||||
返回首页
|
||||
</Button>
|
||||
<Breadcrumb items={crumbs} />
|
||||
</Space>
|
||||
</Card>
|
||||
|
||||
<div className="detail-hero">
|
||||
<span className="detail-hero-icon" aria-hidden="true">
|
||||
{category.icon}
|
||||
</span>
|
||||
<h2 className="detail-hero-title">{title}</h2>
|
||||
<span className="detail-hero-count">[{count}]</span>
|
||||
<Title level={2}>{title}</Title>
|
||||
<Badge count={count} tone="neutral" />
|
||||
</div>
|
||||
|
||||
{renderBody()}
|
||||
|
||||
Reference in New Issue
Block a user