fix(web): 1:1 对齐——页头通栏、内部滚动、侧栏菜单与详情导航

- Layout: screen 模式下约束 body/main 高度,恢复内容区内部滚动(原来内容把根撑高被裁切)
- Layout: contentOffset=88,滚动区从页头下方开始,内容不再从悬浮搜索框下穿过
- 页头改回通栏 60px(contained 只包页身);资料卡头像恢复 64px 图标 + 品牌底色
- 详情导航条左右撑开(返回 / 面包屑),不再挤在左侧
- 侧栏菜单:行高 39、字重 500、圆角 8、CSS chevron、项间距 4px
- 服务面板去掉多余分隔线与外边距,恢复原高度
This commit is contained in:
stash
2026-10-28 19:45:37 +08:00
parent 1bdcca025b
commit 6b0c0a62e9
5 changed files with 37 additions and 13 deletions
+24 -3
View File
@@ -35,7 +35,11 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: var(--su-space-4); gap: var(--su-space-4);
height: var(--su-header-height); width: 100%;
max-width: var(--su-layout-width);
height: calc(var(--su-header-height) - 1px);
margin: 0 auto;
padding: 0 var(--su-space-5);
} }
.site-brand { .site-brand {
@@ -89,7 +93,6 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--su-space-5); gap: var(--su-space-5);
padding-top: 88px;
padding-bottom: var(--su-space-10); padding-bottom: var(--su-space-10);
} }
@@ -111,6 +114,10 @@
text-align: center; text-align: center;
} }
.profile-bio {
line-height: 1.8;
}
.service-panel { .service-panel {
padding: 12px 14px; padding: 12px 14px;
} }
@@ -118,8 +125,18 @@
.service-stats { .service-stats {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 6px;
margin-top: 10px;
}
.service-actions {
display: flex;
gap: var(--su-space-2); gap: var(--su-space-2);
margin: var(--su-space-3) 0; margin-top: var(--su-space-3);
}
.service-actions > * {
flex: 1;
} }
.service-host { .service-host {
@@ -210,6 +227,10 @@
padding: 12px var(--su-space-5); padding: 12px var(--su-space-5);
} }
.detail-nav > * {
width: 100%;
}
.detail-back { .detail-back {
color: var(--su-color-primary); color: var(--su-color-primary);
font-size: var(--su-font-size-md); font-size: var(--su-font-size-md);
+1
View File
@@ -248,6 +248,7 @@ export default function App() {
headerVariant="solid" headerVariant="solid"
siderBordered={false} siderBordered={false}
contentPadding="none" contentPadding="none"
contentOffset={88}
height="screen" height="screen"
scrollable scrollable
contentId="content-scroll" contentId="content-scroll"
@@ -66,7 +66,7 @@ export function CategoryNav({
return ( return (
<Card padding="none" className="nav-card"> <Card padding="none" className="nav-card">
<Menu items={items} activeKey={activeKey} onSelect={handleSelect} /> <Menu items={items} activeKey={activeKey} onSelect={handleSelect} itemHeight={39} />
</Card> </Card>
) )
} }
@@ -1,4 +1,4 @@
import { Avatar, Card, Paragraph, Tag, Text, Title } from '@stash/ui' import { Avatar, Card, Icon, Text, Title } from '@stash/ui'
import { PLACEHOLDER_PROFILE } from '../../profile' import { PLACEHOLDER_PROFILE } from '../../profile'
/** /**
@@ -10,10 +10,14 @@ export function ProfileCard() {
return ( return (
<Card padding="lg" className="profile-card"> <Card padding="lg" className="profile-card">
<Avatar size="xl" tone="primary" fallback="S" verified /> <Avatar size="xl" tone="primary" icon={<Icon name="user_3_line" />} verified />
<Title level={3}>{name}</Title> <Title level={3}>{name}</Title>
{!name.includes(role) && <Tag shape="rounded">{role}</Tag>} <Text size="xs" tone="muted">
<Paragraph>{bio}</Paragraph> {role}
</Text>
<Text size="xs" tone="sub" className="profile-bio">
{bio}
</Text>
<Text size="xs" tone="muted"> <Text size="xs" tone="muted">
IP 属地:{location} IP 属地:{location}
</Text> </Text>
@@ -1,4 +1,4 @@
import { Button, Card, Divider, Icon, Space, Tag, Text, Title } from '@stash/ui' import { Button, Card, Icon, Space, Tag, Text, Title } from '@stash/ui'
import type { Project } from '../../api' import type { Project } from '../../api'
/** /**
@@ -26,8 +26,6 @@ export function ServicePanel({ projects, live, refreshing, onRefresh }: ServiceP
</Tag> </Tag>
</Space> </Space>
<Divider spacing="sm" />
<div className="service-stats"> <div className="service-stats">
<Space justify="between"> <Space justify="between">
<Text size="sm" tone="sub"> <Text size="sm" tone="sub">
@@ -45,7 +43,7 @@ export function ServicePanel({ projects, live, refreshing, onRefresh }: ServiceP
</Space> </Space>
</div> </div>
<Space gap="sm" wrap> <div className="service-actions">
<Button <Button
size="sm" size="sm"
variant="secondary" variant="secondary"
@@ -61,7 +59,7 @@ export function ServicePanel({ projects, live, refreshing, onRefresh }: ServiceP
<Icon name="link_3_line" /> <Icon name="link_3_line" />
查看接口 查看接口
</a> </a>
</Space> </div>
</Card> </Card>
) )
} }