style: 页头滚动信息居中,接口按钮统一为 Button

- 页头改为三列 grid,Ticker 放入中间列,左右等宽,滚动信息在视口居中
- 查看接口从自定义 a.link-button 改为与重新扫描相同的 @stash/ui Button
- 保留站内路由与修饰键新标签打开行为
This commit is contained in:
2026-11-02 19:39:08 +08:00
parent 1effbea3dd
commit dec82080d3
3 changed files with 42 additions and 28 deletions
+16 -14
View File
@@ -76,20 +76,22 @@ export function SiteHeader({
logo={site.brand.logo}
/>
{headerEnabled && (
<Ticker speed={headerSpeed} gap={headerGap} label="运行状态" className="header-ticker">
{headerItems.map((item, index) => (
<span className="header-ticker-item" key={`${index}-${item.text}`}>
{item.tag !== undefined && item.tag !== null && item.tag !== '' && (
<Tag tone={tagTone[item.tone]} shape="rounded">
{item.tag}
</Tag>
)}
{fillHeaderText(item.text, context)}
</span>
))}
</Ticker>
)}
<div className="header-ticker-slot">
{headerEnabled && (
<Ticker speed={headerSpeed} gap={headerGap} label="运行状态" className="header-ticker">
{headerItems.map((item, index) => (
<span className="header-ticker-item" key={`${index}-${item.text}`}>
{item.tag !== undefined && item.tag !== null && item.tag !== '' && (
<Tag tone={tagTone[item.tone]} shape="rounded">
{item.tag}
</Tag>
)}
{fillHeaderText(item.text, context)}
</span>
))}
</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>
)