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,9 +1,8 @@
|
||||
import { Badge, Card, Icon, IconButton, Space, Title } from '@stash/ui'
|
||||
import type { ReactNode } from 'react'
|
||||
import { CountBadge } from '../common/CountBadge'
|
||||
import { MoreIcon } from '../common/Icon'
|
||||
|
||||
/**
|
||||
* 首页分区卡片:白底圆角容器,组成「色条 + 标题 + 角标 + 更多按钮 + 内容」。
|
||||
* 首页分区卡片:白底容器,组成「色条 + 标题 + 角标 + 更多按钮 + 内容」。
|
||||
* 内容由调用方传入,因此同一容器可以承载应用网格、海报网格或图文网格。
|
||||
*/
|
||||
type SectionCardProps = {
|
||||
@@ -18,30 +17,27 @@ type SectionCardProps = {
|
||||
|
||||
export function SectionCard({ title, count, barColor, onMore, children }: SectionCardProps) {
|
||||
return (
|
||||
<section className="section-card">
|
||||
<header className="section-header">
|
||||
<div className="section-title-wrapper">
|
||||
<Card padding="lg" className="section-card">
|
||||
<div className="section-header">
|
||||
<Space gap="sm">
|
||||
<span className="section-bar" style={{ backgroundColor: barColor }} aria-hidden="true" />
|
||||
<span className="section-title-box">
|
||||
<h2 className="section-title">{title}</h2>
|
||||
<CountBadge count={count} />
|
||||
</span>
|
||||
</div>
|
||||
<Title level={3} as="h2">
|
||||
{title}
|
||||
</Title>
|
||||
<Badge count={count} tone="danger" />
|
||||
</Space>
|
||||
|
||||
{onMore !== undefined && (
|
||||
<button
|
||||
type="button"
|
||||
className="section-more"
|
||||
title={`查看${title}全部`}
|
||||
aria-label={`查看${title}全部`}
|
||||
<IconButton
|
||||
size="xs"
|
||||
label={`查看${title}全部`}
|
||||
icon={<Icon name="more_1_line" />}
|
||||
onClick={onMore}
|
||||
>
|
||||
<MoreIcon />
|
||||
</button>
|
||||
/>
|
||||
)}
|
||||
</header>
|
||||
</div>
|
||||
|
||||
{children}
|
||||
</section>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user