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 { Card, Space, Text } from '@stash/ui'
|
||||
import type { ArticleItem } from '../../data/types'
|
||||
|
||||
/**
|
||||
@@ -10,28 +11,32 @@ type CesCardProps = {
|
||||
}
|
||||
|
||||
export function CesCard({ item, onOpen }: CesCardProps) {
|
||||
const content = (
|
||||
<>
|
||||
<img className="ces-cover" src={item.cover} alt={item.title} loading="lazy" />
|
||||
<span className="ces-body">
|
||||
<span className="ces-title">{item.title}</span>
|
||||
<span className="ces-desc">{item.desc}</span>
|
||||
</span>
|
||||
</>
|
||||
const body = (
|
||||
<Space direction="column" gap="xs" align="stretch">
|
||||
<Text strong truncate>
|
||||
{item.title}
|
||||
</Text>
|
||||
<Text size="xs" tone="muted" truncate>
|
||||
{item.desc}
|
||||
</Text>
|
||||
</Space>
|
||||
)
|
||||
|
||||
if (onOpen === undefined) {
|
||||
return <article className="ces-card">{content}</article>
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="ces-card"
|
||||
title={item.title}
|
||||
onClick={() => onOpen(item.id)}
|
||||
>
|
||||
{content}
|
||||
</button>
|
||||
<Card padding="none" hoverable className="ces-card">
|
||||
<img className="cover cover--article" src={item.cover} alt={item.title} loading="lazy" />
|
||||
{onOpen === undefined ? (
|
||||
<div className="ces-body">{body}</div>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="ces-body ces-body--button"
|
||||
title={item.title}
|
||||
onClick={() => onOpen(item.id)}
|
||||
>
|
||||
{body}
|
||||
</button>
|
||||
)}
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user