fix(web): 视觉与交互 1:1(页头/侧栏/卡片/详情/动效)

对齐项(8080 vs 8081 实测,误差 ≤1px):
- 侧栏:资料卡 224、服务面板 144、导航 143,navTop 548 与原版一致
- 分区卡:142/142/327/270 vs 142/142/326/269;标题 16/1.2、更多按钮 24px
- 应用条目:48px 圆形头像 + 10px 小认证标;hover 名字变主色(不再整行变色)
- 封面:hover 上浮 2px(0.2s ease),去掉缩放;CES 封面恢复 16/10
- 搜索框:44 高、无边框 + 卡片阴影
- 服务面板:状态药丸 22、统计 12/18、操作按钮 28、刷新时图标原地旋转
- 详情:返回链接 hover 下划线、跳转按钮 hover 深主色、view-in 淡入动画
- 菜单:hover 主色、子菜单 0.28s grid 高度动画、chevron 6px 旋转
- 回到顶部:right 30、top 50%、滚动后淡入(补内容区滚动监听)
- 主题:卡片阴影恢复 2%/6%(旧版值)
This commit is contained in:
stash
2026-10-28 20:16:41 +08:00
parent 6b0c0a62e9
commit 1942e201e9
9 changed files with 181 additions and 33 deletions
@@ -18,26 +18,26 @@ export function ServicePanel({ projects, live, refreshing, onRefresh }: ServiceP
return (
<Card padding="none" className="service-panel">
<Space justify="between">
<Title level={4} as="h2">
<Title level={4} as="h2" weight="semibold">
本地服务
</Title>
<Tag tone={live ? 'success' : 'neutral'} dot>
<Tag tone={live ? 'success' : 'neutral'} dot className="service-status">
{live ? '已连接' : '未连接'}
</Tag>
</Space>
<div className="service-stats">
<Space justify="between">
<Text size="sm" tone="sub">
<Text size="xs" tone="sub">
项目数
</Text>
<Text strong>{projects.length}</Text>
<Text size="xs" strong>{projects.length}</Text>
</Space>
<Space justify="between">
<Text size="sm" tone="sub">
<Text size="xs" tone="sub">
访问地址
</Text>
<Text size="sm" truncate title={host} className="service-host">
<Text size="xs" truncate title={host} className="service-host">
{host}
</Text>
</Space>
@@ -47,7 +47,8 @@ export function ServicePanel({ projects, live, refreshing, onRefresh }: ServiceP
<Button
size="sm"
variant="secondary"
loading={refreshing}
className="service-action"
spinning={refreshing}
icon={<Icon name="refresh_3_line" />}
onClick={onRefresh}
title="重新扫描项目"