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,63 +1,57 @@
|
||||
/**
|
||||
* 通用图标组件。
|
||||
*
|
||||
* 全部使用 Alright 主题的 iconfont 线性图标(见 src/iconfont.css),
|
||||
* 尺寸与颜色由使用处的 CSS 控制(font-size / color),
|
||||
* 因此同一套图标可以复用在按钮、统计条、导航等不同位置。
|
||||
*/
|
||||
import { Icon } from '@stash/ui'
|
||||
|
||||
/**
|
||||
* 语义图标:stash 内部一直按用途引用(SearchIcon / RefreshIcon…),
|
||||
* 这里统一映射到 @stash/ui 的 iconfont 字形,避免各页面记字形名。
|
||||
*/
|
||||
type IconProps = {
|
||||
/** 附加类名,便于局部覆盖字号或颜色 */
|
||||
className?: string
|
||||
}
|
||||
|
||||
const base = (name: string, className?: string) =>
|
||||
`iconfont icon-${name}${className !== undefined ? ` ${className}` : ''}`
|
||||
|
||||
export function SearchIcon({ className }: IconProps) {
|
||||
return <i className={base('search', className)} aria-hidden="true" />
|
||||
return <Icon name="search_3_line" className={className} />
|
||||
}
|
||||
|
||||
export function UserIcon({ className }: IconProps) {
|
||||
return <i className={base('user', className)} aria-hidden="true" />
|
||||
return <Icon name="user_3_line" className={className} />
|
||||
}
|
||||
|
||||
export function RefreshIcon({ className }: IconProps) {
|
||||
return <i className={base('refresh', className)} aria-hidden="true" />
|
||||
return <Icon name="refresh_3_line" className={className} />
|
||||
}
|
||||
|
||||
export function LinkIcon({ className }: IconProps) {
|
||||
return <i className={base('link', className)} aria-hidden="true" />
|
||||
return <Icon name="link_3_line" className={className} />
|
||||
}
|
||||
|
||||
export function ExternalIcon({ className }: IconProps) {
|
||||
return <i className={base('external', className)} aria-hidden="true" />
|
||||
return <Icon name="a-external_link_line1" className={className} />
|
||||
}
|
||||
|
||||
export function EyeIcon({ className }: IconProps) {
|
||||
return <i className={base('eye', className)} aria-hidden="true" />
|
||||
return <Icon name="eye_line" className={className} />
|
||||
}
|
||||
|
||||
export function ThumbUpIcon({ className }: IconProps) {
|
||||
return <i className={base('thumb-up', className)} aria-hidden="true" />
|
||||
return <Icon name="thumb_up_2_line" className={className} />
|
||||
}
|
||||
|
||||
export function ShareIcon({ className }: IconProps) {
|
||||
return <i className={base('share', className)} aria-hidden="true" />
|
||||
return <Icon name="share_3_line" className={className} />
|
||||
}
|
||||
|
||||
export function CloseIcon({ className }: IconProps) {
|
||||
return <i className={base('close', className)} aria-hidden="true" />
|
||||
return <Icon name="close_line" className={className} />
|
||||
}
|
||||
|
||||
export function MoreIcon({ className }: IconProps) {
|
||||
return <i className={base('more', className)} aria-hidden="true" />
|
||||
return <Icon name="more_1_line" className={className} />
|
||||
}
|
||||
|
||||
export function ArrowUpIcon({ className }: IconProps) {
|
||||
return <i className={base('arrow-up', className)} aria-hidden="true" />
|
||||
return <Icon name="arrow_up_line" className={className} />
|
||||
}
|
||||
|
||||
export function ArrowDownIcon({ className }: IconProps) {
|
||||
return <i className={base('arrow-down', className)} aria-hidden="true" />
|
||||
return <Icon name="arrow_down_line" className={className} />
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user