style: 页头滚动信息居中,接口按钮统一为 Button
- 页头改为三列 grid,Ticker 放入中间列,左右等宽,滚动信息在视口居中 - 查看接口从自定义 a.link-button 改为与重新扫描相同的 @stash/ui Button - 保留站内路由与修饰键新标签打开行为
This commit is contained in:
+14
-6
@@ -42,9 +42,9 @@
|
||||
/* ---------- 页头 ---------- */
|
||||
|
||||
.site-header-inner {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 720px) minmax(0, 1fr);
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--su-space-4);
|
||||
width: 100%;
|
||||
max-width: var(--su-layout-width);
|
||||
@@ -133,14 +133,22 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 滚动信息只占中间约 2/3,并靠右贴近操作图标 */
|
||||
/* 滚动信息居中,左右列等宽 */
|
||||
.header-ticker-slot {
|
||||
justify-self: center;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.header-ticker {
|
||||
max-width: 720px;
|
||||
margin-left: auto;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
/* 靠右交给 .header-ticker 的 margin-left: auto;没有滚动信息时由 space-between 兜住 */
|
||||
justify-self: end;
|
||||
/* 靠右对齐到页头右边缘 */
|
||||
flex: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -76,6 +76,7 @@ export function SiteHeader({
|
||||
logo={site.brand.logo}
|
||||
/>
|
||||
|
||||
<div className="header-ticker-slot">
|
||||
{headerEnabled && (
|
||||
<Ticker speed={headerSpeed} gap={headerGap} label="运行状态" className="header-ticker">
|
||||
{headerItems.map((item, index) => (
|
||||
@@ -90,6 +91,7 @@ export function SiteHeader({
|
||||
))}
|
||||
</Ticker>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="header-actions">
|
||||
{site.actions.theme && (
|
||||
|
||||
@@ -64,19 +64,23 @@ export function ServicePanel({
|
||||
重新扫描
|
||||
</Button>
|
||||
|
||||
<a
|
||||
className="link-button"
|
||||
href="/interface"
|
||||
<Button
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
className="service-action"
|
||||
icon={<Icon name="link_3_line" />}
|
||||
onClick={(event) => {
|
||||
// 无修饰键时接管点击,走站内路由,只换右侧内容;按住修饰键仍可新标签打开
|
||||
if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return
|
||||
event.preventDefault()
|
||||
// 无修饰键时走站内路由;按住修饰键仍可新标签打开接口页
|
||||
if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
|
||||
window.open('/interface', '_blank', 'noopener')
|
||||
return
|
||||
}
|
||||
onOpenApi()
|
||||
}}
|
||||
title="查看接口一览"
|
||||
>
|
||||
<Icon name="link_3_line" />
|
||||
查看接口
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user