feat: 后台页头加明暗切换;内容卡改用库里的 EntryRow / EntryTile
- 后台页头新增月亮/太阳按钮:写回 site.theme 并即时切换,前后台一起变, 忽略未登录与保存中 - AppCard -> EntryRow,CesCard -> EntryTile(PosterCard 本来就用 Cover) - 删除 .app-card / .app-card-* / .ces-card / .ces-body* 手写样式, 两套卡片的点击语义与悬停反馈统一由库提供 视觉变化:头像认证勾回到库默认尺寸(20px,之前应用里压到 10px)
This commit is contained in:
@@ -1,9 +1,9 @@
|
||||
import { Card, Cover, Space, Text } from '@stash/ui'
|
||||
import { EntryTile } from '@stash/ui'
|
||||
import type { ArticleItem } from '../../data/types'
|
||||
|
||||
/**
|
||||
* 明细页图文卡:上图下文的白卡。
|
||||
* 传入 onOpen 时整张卡变成按钮,点击进入文章详情。
|
||||
* 版式与点击语义都在库里的 EntryTile,这里只做数据映射。
|
||||
*/
|
||||
type CesCardProps = {
|
||||
item: ArticleItem
|
||||
@@ -11,38 +11,12 @@ type CesCardProps = {
|
||||
}
|
||||
|
||||
export function CesCard({ item, onOpen }: CesCardProps) {
|
||||
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>
|
||||
)
|
||||
|
||||
return (
|
||||
<Card padding="none" hoverable className="ces-card">
|
||||
<Cover
|
||||
src={item.cover}
|
||||
alt={item.title}
|
||||
ratio={16 / 10}
|
||||
radius="none"
|
||||
onClick={onOpen === undefined ? undefined : () => onOpen(item.id)}
|
||||
/>
|
||||
{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>
|
||||
<EntryTile
|
||||
title={item.title}
|
||||
description={item.desc}
|
||||
cover={item.cover}
|
||||
onOpen={onOpen === undefined ? undefined : () => onOpen(item.id)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user