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

- 页头改为三列 grid，Ticker 放入中间列，左右等宽，滚动信息在视口居中
- 查看接口从自定义 a.link-button 改为与重新扫描相同的 @stash/ui Button
- 保留站内路由与修饰键新标签打开行为

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;
+  width: 100%;
-  margin-left: auto;
+  max-width: none;
+  margin: 0;
 }
 
 .header-actions {
-  /* 靠右交给 .header-ticker 的 margin-left: auto；没有滚动信息时由 space-between 兜住 */
+  justify-self: end;
+  /* 靠右对齐到页头右边缘 */
   flex: none;
 }
 

stash-web/src/components/header/SiteHeader.tsx

@@ -76,20 +76,22 @@ export function SiteHeader({
         logo={site.brand.logo}
       />
 
-      {headerEnabled && (
+      <div className="header-ticker-slot">
-        <Ticker speed={headerSpeed} gap={headerGap} label="运行状态" className="header-ticker">
+        {headerEnabled && (
-          {headerItems.map((item, index) => (
+          <Ticker speed={headerSpeed} gap={headerGap} label="运行状态" className="header-ticker">
-            <span className="header-ticker-item" key={`${index}-${item.text}`}>
+            {headerItems.map((item, index) => (
-              {item.tag !== undefined && item.tag !== null && item.tag !== '' && (
+              <span className="header-ticker-item" key={`${index}-${item.text}`}>
-                <Tag tone={tagTone[item.tone]} shape="rounded">
+                {item.tag !== undefined && item.tag !== null && item.tag !== '' && (
-                  {item.tag}
+                  <Tag tone={tagTone[item.tone]} shape="rounded">
-                </Tag>
+                    {item.tag}
-              )}
+                  </Tag>
-              {fillHeaderText(item.text, context)}
+                )}
-            </span>
+                {fillHeaderText(item.text, context)}
-          ))}
+              </span>
-        </Ticker>
+            ))}
-      )}
+          </Ticker>
+        )}
+      </div>
 
       <div className="header-actions">
         {site.actions.theme && (

stash-web/src/components/sidebar/ServicePanel.tsx

@@ -64,19 +64,23 @@ export function ServicePanel({
           重新扫描
         </Button>
 
-        <a
+        <Button
-          className="link-button"
+          size="sm"
-          href="/interface"
+          variant="secondary"
+          className="service-action"
+          icon={<Icon name="link_3_line" />}
           onClick={(event) => {
-            // 无修饰键时接管点击，走站内路由，只换右侧内容；按住修饰键仍可新标签打开
+            // 无修饰键时走站内路由；按住修饰键仍可新标签打开接口页
-            if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return
+            if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
-            event.preventDefault()
+              window.open('/interface', '_blank', 'noopener')
+              return
+            }
             onOpenApi()
           }}
+          title="查看接口一览"
         >
-          <Icon name="link_3_line" />
           查看接口
-        </a>
+        </Button>
       </div>
     </Card>
   )