From 73004b41490523362c1b7e6708b3bd111013759b Mon Sep 17 00:00:00 2001
From: richblack <leo21c@gmail.com>
Date: Thu, 6 Aug 2026 22:31:00 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=B1=E6=95=97=E6=B8=85=E5=96=AE=E6=94=B9?=
 =?UTF-8?q?=E6=88=90=E3=80=8C=E6=AA=94=E5=90=8D=20+=20=E4=B8=89=E8=A7=92?=
 =?UTF-8?q?=E5=BD=A2=EF=BC=8C=E9=A0=90=E8=A8=AD=E6=94=B6=E5=90=88=E3=80=8D?=
 =?UTF-8?q?=EF=BC=88leo=20=E5=AF=A6=E6=B8=AC=E7=89=88=E9=9D=A2=E8=A2=AB?=
 =?UTF-8?q?=E5=A3=93=E6=89=81=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

leo：「表格最左邊的標題被壓扁了…**可以顯示沒通過的名稱，旁邊有個三角形，
點擊看到失敗細節，default 摺疊起來，重點是找到問題在哪裏**」

## 真兇
我重用 `.step` 的橫向格線（`display:flex` + 原因擠在右邊）
⇒ 中文檔名被壓成**一行一個字**（實撞截圖）。

## 改法
改用原生 `<details>/<summary>`：三角形、鍵盤可操作、預設收合都不必自己寫。
檔名一行（`word-break: break-word`，長檔名換行但不是一字一行），
原因收在裡面，需要時才展開——**先看到「哪些檔沒過」，細節是第二層**。
CSS 用實際存在的 CIS 變數（`--ink-rgb`／`--amber`；原本誤用不存在的 `--hair`／`--ink-soft`）。

## 驗
`node --check` 過、`check-cis.sh` **全過**、go build 過。
⚠️ **未真機驗**（未打包送到 leo 手上）。
---
 cmd/arcrun-app/frontend/src/main.js   | 15 ++++++++++-----
 cmd/arcrun-app/frontend/src/style.css | 23 +++++++++++++++++++++++
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/cmd/arcrun-app/frontend/src/main.js b/cmd/arcrun-app/frontend/src/main.js
index a5448c0..94dcd63 100644
--- a/cmd/arcrun-app/frontend/src/main.js
+++ b/cmd/arcrun-app/frontend/src/main.js
@@ -112,16 +112,21 @@ function cardTrouble(s) {
 // 而原因本來就在 status.json 裡 —— 數字不能代替原因。
 function cardFailures(f) {
   if (!f || !f.items || !f.items.length) return '';
+  // 🔴 leo 2026-08-06：「**可以顯示沒通過的名稱，旁邊有個三角形，點擊看到失敗細節，
+  //    default 摺疊起來，重點是找到問題在哪裏**」
+  //    ——他要的是先看到「哪些檔沒過」，細節是需要時才展開。
+  //    先前把原因直接攤在旁邊，害檔名欄被擠成一行一個字（實撞截圖）。
+  //    用原生 <details>：三角形、鍵盤可操作、預設收合，都不必自己寫。
   return `
     <div class="card">
       <h3>${esc(f.title)}</h3>
       <div class="d">${esc(f.note)}</div>
-      <div class="steps" style="margin-top:10px">
+      <div class="faillist">
         ${f.items.map((it) => `
-          <div class="step">
-            <span class="t">${esc(it.name)}</span>
-            <span class="m">${esc(it.reason)}</span>
-          </div>`).join('')}
+          <details class="fail">
+            <summary>${esc(it.name)}</summary>
+            <div class="failwhy">${esc(it.reason)}</div>
+          </details>`).join('')}
       </div>
       ${f.more > 0 ? `<div class="d" style="margin-top:8px">…還有 ${f.more} 份</div>` : ''}
     </div>`;
diff --git a/cmd/arcrun-app/frontend/src/style.css b/cmd/arcrun-app/frontend/src/style.css
index bbf3fdb..ec70fff 100644
--- a/cmd/arcrun-app/frontend/src/style.css
+++ b/cmd/arcrun-app/frontend/src/style.css
@@ -220,3 +220,26 @@ input[type=text], input[type=password] {
 .step.now  { font-weight: 600; }
 .step .t { flex: 1; }
 .step .m { font-size: 12.5px; color: rgba(var(--ink-rgb), .45); }
+
+/* 失敗清單：檔名一行、細節收在三角形裡（leo 2026-08-06：
+   「顯示沒通過的名稱，旁邊有個三角形，點擊看到失敗細節，default 摺疊起來」）。
+   先前重用 .step 的橫向格線，害中文檔名被擠成一行一個字。 */
+.faillist { margin-top: 12px; }
+.fail { border-top: 1px solid rgba(var(--ink-rgb), .10); }
+.fail:first-child { border-top: 0; }
+.fail > summary {
+  cursor: pointer;
+  padding: 10px 2px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-break: break-word;   /* 長檔名要能換行，但不是一字一行 */
+  list-style: revert;       /* 保留原生三角形 */
+}
+.fail > summary::marker { color: var(--amber); }
+.fail[open] > summary { font-weight: 600; }
+.failwhy {
+  padding: 2px 2px 12px 18px;
+  font-size: 13px;
+  line-height: 1.7;
+  color: rgba(var(--ink-rgb), .68);
+}