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 { Button, Card, Paragraph, Space, Text, Title } from '@stash/ui'
|
||||
import type { ArticleItem } from '../../data/types'
|
||||
import { ArticleBody } from './ArticleBody'
|
||||
|
||||
@@ -19,34 +20,49 @@ export function ArticleDetailView({ article, categoryTitle, onBack }: ArticleDet
|
||||
|
||||
return (
|
||||
<div className="detail-view article-view">
|
||||
<div className="detail-nav card-box">
|
||||
<button type="button" className="detail-back" onClick={onBack}>
|
||||
返回
|
||||
</button>
|
||||
<span className="detail-breadcrumb">{categoryTitle} / 文章</span>
|
||||
</div>
|
||||
<Card padding="sm">
|
||||
<Space justify="between" wrap>
|
||||
<Button variant="ghost" size="sm" onClick={onBack}>
|
||||
返回
|
||||
</Button>
|
||||
<Text size="sm" tone="sub">
|
||||
{categoryTitle} / 文章
|
||||
</Text>
|
||||
</Space>
|
||||
</Card>
|
||||
|
||||
<header className="article-head">
|
||||
<h2 className="article-heading">
|
||||
<Title level={2}>
|
||||
{article.title}
|
||||
<button type="button" className="item-edit" disabled title="编辑功能待接入">
|
||||
[编辑]
|
||||
</button>
|
||||
</h2>
|
||||
<Button variant="ghost" size="sm" disabled className="item-edit">
|
||||
编辑
|
||||
</Button>
|
||||
</Title>
|
||||
|
||||
<div className="article-meta">
|
||||
<Space gap="sm" wrap>
|
||||
{meta.map((text, index) => (
|
||||
<span className="article-meta-item" key={text}>
|
||||
{index > 0 && <i className="article-meta-dot" aria-hidden="true" />}
|
||||
{text}
|
||||
</span>
|
||||
<Space gap="sm" key={text}>
|
||||
{index > 0 && (
|
||||
<span className="article-meta-dot" aria-hidden="true">
|
||||
·
|
||||
</span>
|
||||
)}
|
||||
<Text size="sm" tone="muted">
|
||||
{text}
|
||||
</Text>
|
||||
</Space>
|
||||
))}
|
||||
</div>
|
||||
</Space>
|
||||
</header>
|
||||
|
||||
<article className="article-body card-box">
|
||||
<ArticleBody markdown={article.body} />
|
||||
</article>
|
||||
<Card padding="lg">
|
||||
<div className="article-body">
|
||||
<Paragraph tone="main" className="article-lead">
|
||||
{article.desc}
|
||||
</Paragraph>
|
||||
<ArticleBody markdown={article.body} />
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user