From dec82080d3dd1a6947041e9bff9864a29fde11f4 Mon Sep 17 00:00:00 2001
From: CNWei <t6g888@163.com>
Date: Mon, 2 Nov 2026 19:38:56 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E9=A1=B5=E5=A4=B4=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=E5=B1=85=E4=B8=AD=EF=BC=8C=E6=8E=A5=E5=8F=A3?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E7=BB=9F=E4=B8=80=E4=B8=BA=20Button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 页头改为三列 grid，Ticker 放入中间列，左右等宽，滚动信息在视口居中
- 查看接口从自定义 a.link-button 改为与重新扫描相同的 @stash/ui Button
- 保留站内路由与修饰键新标签打开行为
---
 stash-web/src/App.css                         | 20 +++++++++----
 .../src/components/header/SiteHeader.tsx      | 30 ++++++++++---------
 .../src/components/sidebar/ServicePanel.tsx   | 20 ++++++++-----
 3 files changed, 42 insertions(+), 28 deletions(-)

diff --git a/stash-web/src/App.css b/stash-web/src/App.css
index d1224f9..fa54630 100644
--- a/stash-web/src/App.css
+++ b/stash-web/src/App.css
@@ -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;
 }
 
diff --git a/stash-web/src/components/header/SiteHeader.tsx b/stash-web/src/components/header/SiteHeader.tsx
index 8cf850c..205bba6 100644
--- a/stash-web/src/components/header/SiteHeader.tsx
+++ b/stash-web/src/components/header/SiteHeader.tsx
@@ -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 && (
diff --git a/stash-web/src/components/sidebar/ServicePanel.tsx b/stash-web/src/components/sidebar/ServicePanel.tsx
index a28fbd5..4e8bf0d 100644
--- a/stash-web/src/components/sidebar/ServicePanel.tsx
+++ b/stash-web/src/components/sidebar/ServicePanel.tsx
@@ -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>
   )