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:
+24
-3
@@ -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);
|
||||||
|
|||||||
@@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user