From 0811d463e86f84c010bade3cc4467b7136b2566e Mon Sep 17 00:00:00 2001
From: Gloridust <Gloridust@gmail.com>
Date: Mon, 15 Jun 2026 01:33:20 +0800
Subject: [PATCH] =?UTF-8?q?style(panel):=20=E8=AF=8A=E6=96=AD/=E5=85=B3?=
 =?UTF-8?q?=E4=BA=8E=20=E6=94=B9=E4=B8=BA=E6=89=81=E5=B9=B3=E5=8C=BA?=
 =?UTF-8?q?=E5=9D=97=EF=BC=8C=E4=BF=AE=E6=8C=89=E9=92=AE=E6=96=AD=E8=A1=8C?=
 =?UTF-8?q?=E4=B8=8E=E7=BC=BA=E5=A4=B1=E7=9A=84=20chip=20=E7=B1=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

这两个区块各自只有单一内容，卡片外框显得厚重；按钮作为 flex 项被压窄导致
"导出诊断包(.tar.gz)" / "查看面板日志" 在按钮内断行。

- 去掉 inst-card 卡片外框，改为扁平 settings-block：标题下直接排描述/控件/操作。
- 主按钮 s-btn 固定内边距 + white-space:nowrap + flex:none，不再被压窄断行；
  次要操作（查看面板日志 / 检查更新 / 发布日志）改 btn-text 文字链接，narrow 下自然换行。
- 修复：时间范围 chip 漏了 .chip 基类（只有 .chip-toggle 无内边距/圆角），补回 'chip chip-toggle'。
- 「导出诊断包(.tar.gz)」按钮文案精简为「导出诊断包」，格式说明移到脚注。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 panel/web/src/pages/Admin.tsx | 135 ++++++++++++++++------------------
 panel/web/src/styles.css      |  62 +++++++++++++++-
 2 files changed, 122 insertions(+), 75 deletions(-)

diff --git a/panel/web/src/pages/Admin.tsx b/panel/web/src/pages/Admin.tsx
index 77dcd74..1e9941f 100644
--- a/panel/web/src/pages/Admin.tsx
+++ b/panel/web/src/pages/Admin.tsx
@@ -106,32 +106,27 @@ function DiagnosticsSection() {
       <div className="section-row" style={{ marginTop: 22 }}>
         <span className="section-title">诊断与日志</span>
       </div>
-      <div className="inst-grid">
-        <div className="inst-card">
-          <div className="inst-head">
-            <span className="inst-name">导出诊断包</span>
+      <div className="settings-block">
+        <p className="s-desc">打包系统/Docker 信息 + 面板全局日志 + 各实例容器状态与日志 + 容器清单，用于排查部署、创建卡死、黑屏不可用、升级失败等问题。</p>
+        <div className="s-field">
+          <span className="field-label">时间范围</span>
+          <div className="chip-row">
+            {DIAG_RANGE_OPTIONS.map((r) => (
+              <button key={r.key} className={'chip chip-toggle' + (range === r.key ? ' on' : '')} onClick={() => setRange(r.key)}>
+                {r.label}
+              </button>
+            ))}
           </div>
-          <div className="inst-sub">打包系统/Docker 信息 + 面板全局日志 + 各实例容器状态与日志 + 容器清单，用于排查部署、创建卡死、黑屏不可用、升级失败等问题。</div>
-          <div className="diag-range">
-            <span className="field-label">时间范围</span>
-            <div className="chip-row">
-              {DIAG_RANGE_OPTIONS.map((r) => (
-                <button key={r.key} className={'chip-toggle' + (range === r.key ? ' on' : '')} onClick={() => setRange(r.key)}>
-                  {r.label}
-                </button>
-              ))}
-            </div>
-          </div>
-          <div className="inst-actions">
-            <button className="btn btn-primary" onClick={exportBundle}>
-              导出诊断包 (.tar.gz)
-            </button>
-            <a className="btn" href={api.panelLogUrl(range)} target="_blank" rel="noreferrer">
-              查看面板日志
-            </a>
-          </div>
-          <div className="muted small ver-checked">导出当前选定时间范围内的日志。超过一年的日志会自动清理；诊断包不含密码/密钥等敏感信息。</div>
         </div>
+        <div className="settings-actions">
+          <button className="btn btn-primary s-btn" onClick={exportBundle}>
+            导出诊断包
+          </button>
+          <a className="btn-text" href={api.panelLogUrl(range)} target="_blank" rel="noreferrer">
+            查看面板日志 ›
+          </a>
+        </div>
+        <p className="s-foot">导出当前选定范围内的日志（.tar.gz）。超过一年的日志自动清理；诊断包不含密码 / 密钥等敏感信息。</p>
       </div>
     </>
   );
@@ -173,54 +168,52 @@ function AboutSection({ isAdmin }: { isAdmin: boolean }) {
       <div className="section-row" style={{ marginTop: 22 }}>
         <span className="section-title">关于</span>
       </div>
-      <div className="inst-grid">
-        <div className="inst-card">
-          <div className="inst-head">
-            <span className="inst-name">云微 · WechatOnCloud</span>
-            {info?.hasUpdate ? <span className="tag tag-warn">有新版</span> : info && !isRelease ? <span className="tag">开发版</span> : null}
-          </div>
-          <div className="inst-sub">
-            当前版本 <b>{info?.current ?? '…'}</b>
-            {info?.hasUpdate && info.latest && (
-              <>
-                {' · '}最新 <b>{info.latest}</b>
-              </>
-            )}
-            {isRelease && info && !info.hasUpdate && info.latest && !info.error && <>{' · '}已是最新</>}
-            {!isRelease && info?.latest && !info.error && (
-              <>
-                {' · '}最新发布 <b>{info.latest}</b>
-              </>
-            )}
-          </div>
-          {info?.hasUpdate && (
-            <div className="ver-hint">
-              在宿主执行 <code>docker compose pull &amp;&amp; docker compose up -d</code> 升级面板；各实例镜像可在「管理 → 升级」单独更新。
-            </div>
-          )}
-          <div className="inst-actions">
-            {isAdmin && (
-              <button className="btn" disabled={checking} onClick={check}>
-                {checking ? '检查中…' : '检查更新'}
-              </button>
-            )}
-            <a className="btn" href={RELEASES_URL} target="_blank" rel="noreferrer">
-              发布日志
-            </a>
-            {info?.hasUpdate && (
-              <a className="btn btn-primary" href={RELEASES_URL + '/latest'} target="_blank" rel="noreferrer">
-                查看新版
-              </a>
-            )}
-          </div>
-          {info && (
-            <div className="muted small ver-checked">
-              {info.checkedAt ? `上次检查 ${fmtDate(info.checkedAt)}` : '尚未检查'}
-              {info.source && ` · 来源 ${info.source}`}
-              {info.error && ` · ${info.error}`}
-            </div>
-          )}
+      <div className="settings-block">
+        <div className="s-title-row">
+          <span className="s-app">云微 · WechatOnCloud</span>
+          {info?.hasUpdate ? <span className="tag tag-warn">有新版</span> : info && !isRelease ? <span className="tag">开发版</span> : null}
         </div>
+        <p className="s-line">
+          当前版本 <b>{info?.current ?? '…'}</b>
+          {info?.hasUpdate && info.latest && (
+            <>
+              {' · '}最新 <b>{info.latest}</b>
+            </>
+          )}
+          {isRelease && info && !info.hasUpdate && info.latest && !info.error && <>{' · '}已是最新</>}
+          {!isRelease && info?.latest && !info.error && (
+            <>
+              {' · '}最新发布 <b>{info.latest}</b>
+            </>
+          )}
+        </p>
+        {info?.hasUpdate && (
+          <div className="ver-hint">
+            在宿主执行 <code>docker compose pull &amp;&amp; docker compose up -d</code> 升级面板；各实例镜像可在「管理 → 升级」单独更新。
+          </div>
+        )}
+        <div className="settings-actions">
+          {info?.hasUpdate && (
+            <a className="btn btn-primary s-btn" href={RELEASES_URL + '/latest'} target="_blank" rel="noreferrer">
+              查看新版
+            </a>
+          )}
+          {isAdmin && (
+            <button className="btn-text" disabled={checking} onClick={check}>
+              {checking ? '检查中…' : '检查更新'}
+            </button>
+          )}
+          <a className="btn-text" href={RELEASES_URL} target="_blank" rel="noreferrer">
+            发布日志 ›
+          </a>
+        </div>
+        {info && (
+          <p className="s-foot">
+            {info.checkedAt ? `上次检查 ${fmtDate(info.checkedAt)}` : '尚未检查'}
+            {info.source && ` · 来源 ${info.source}`}
+            {info.error && ` · ${info.error}`}
+          </p>
+        )}
       </div>
     </>
   );
diff --git a/panel/web/src/styles.css b/panel/web/src/styles.css
index a45bab8..0a12efc 100644
--- a/panel/web/src/styles.css
+++ b/panel/web/src/styles.css
@@ -1047,14 +1047,68 @@ button {
   gap: 6px;
   margin-top: 4px;
 }
-/* 诊断包时间范围选择行 */
-.diag-range {
-  margin-top: 12px;
+/* 扁平设置区块（诊断与日志 / 关于）：无卡片，直接排在分区标题下，避免单卡片的厚重感 */
+.settings-block {
+  padding: 2px 2px 4px;
 }
-.diag-range .field-label {
+.settings-block .s-desc {
+  margin: 4px 0 0;
+  font-size: 13px;
+  line-height: 1.65;
+  color: var(--muted);
+  max-width: 660px;
+}
+.s-field {
+  margin-top: 14px;
+}
+.s-field .field-label {
   display: block;
   margin: 0 2px 8px;
 }
+.settings-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 14px;
+  margin-top: 16px;
+}
+/* 实心主按钮：固定内边距 + 不换行（之前作为 flex 项被压窄导致按钮内文字断行） */
+.settings-actions .s-btn {
+  height: 42px;
+  padding: 0 22px;
+  flex: none;
+  white-space: nowrap;
+}
+.settings-actions .btn-text {
+  white-space: nowrap;
+}
+.s-foot {
+  margin: 14px 0 0;
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--muted);
+  max-width: 660px;
+}
+.s-title-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.s-app {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text);
+}
+.s-line {
+  margin: 8px 0 0;
+  font-size: 14px;
+  color: var(--muted);
+}
+.s-line b {
+  color: var(--text);
+  font-weight: 600;
+}
 .chip-row-pick {
   display: flex;
 }