B-44: 返修——768px 超大期末金额与未决状态避让

在 376–900px 五列目录把方向 chip 与期末金额分行，并加 Chromium 盒模型回归，避免 15 位金额盖住未决状态。 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-20 03:22:13 +08:00
parent 95ad9c939a
commit 4add17f2b8
4 changed files with 699 additions and 4 deletions
@@ -0,0 +1,138 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>B-44 余额目录布局回归</title>
+    <link rel="stylesheet" href="../../web/styles.css" />
+  </head>
+  <body data-portal="admin">
+    <div class="app-shell">
+      <aside class="sidebar" id="sidebar" aria-label="总账管理导航">
+        <div class="brand"><span class="brand-mark">金</span><span class="brand-copy"><strong>金牛集团</strong><small>总账管理端</small></span></div>
+        <nav class="nav-list">
+          <button class="nav-item is-active" type="button"><span>往来查询</span></button>
+        </nav>
+      </aside>
+      <div class="workspace">
+        <main id="main-content">
+          <section class="app-view is-active">
+            <header class="page-heading"><div><h1>往来查询</h1><p>公司间往来余额目录</p></div></header>
+            <section class="panel company-ledger-panel" aria-label="公司余额目录">
+              <div class="panel-heading"><div><h2>公司余额目录</h2><p>每行余额都附带截止日、期初状态、本期借贷、结果与未决金额</p></div></div>
+              <div class="ledger-head is-balances"><span>公司</span><span class="ledger-hide-md">借方合计</span><span class="ledger-hide-md">贷方合计</span><span>期末结果</span><span>未决</span><span>截止日</span><span></span></div>
+              <div class="company-ledgers">
+                <details class="company-ledger is-balances">
+                  <summary>
+                    <span class="company-name" title="甲公司"><i>甲</i><b>甲公司</b><small class="currency-tag">CNY</small></span>
+                    <strong class="amount debit ledger-hide-md"><span class="amount-with-currency"><span class="currency-code">CNY</span>1,280.00</span></strong>
+                    <strong class="amount credit ledger-hide-md"><span class="amount-with-currency"><span class="currency-code">CNY</span>320.00</span></strong>
+                    <span class="ledger-result"><em class="status success">应收</em><b><span class="amount-with-currency"><span class="currency-code">CNY</span>960.00</span></b></span>
+                    <span class="ledger-unresolved is-empty"><span class="status neutral">未决 0.00</span></span>
+                    <span class="ledger-cutoff">截止 2026.07.31</span>
+                    <svg></svg>
+                  </summary>
+                </details>
+                <details class="company-ledger is-balances" id="stressRow">
+                  <summary>
+                    <span class="company-name" title="东南沿海综合贸易与供应链管理股份有限公司"><i>东</i><b>东南沿海综合贸易与供应链管理股份有限公司</b><small class="currency-tag">CNY</small></span>
+                    <strong class="amount debit ledger-hide-md"><span class="amount-with-currency is-compact"><span class="currency-code">CNY</span>123,456,789,012,345.00</span></strong>
+                    <strong class="amount credit ledger-hide-md"><span class="amount-with-currency is-compact"><span class="currency-code">CNY</span>100,000,000,000,000.00</span></strong>
+                    <span class="ledger-result"><em class="status success">应收</em><b><span class="amount-with-currency is-compact"><span class="currency-code">CNY</span>23,456,789,012,345.00</span></b></span>
+                    <span class="ledger-unresolved is-active"><span class="status warning">未决 2,150.00 · 3 笔</span><small style="display:block;color:var(--color-ink-muted);font-size:10px">手工记录待审 800.00 · 1 笔；待确认科目 1,350.00 · 2 笔</small></span>
+                    <span class="ledger-cutoff">截止 2026.07.31</span>
+                    <svg></svg>
+                  </summary>
+                </details>
+              </div>
+            </section>
+          </section>
+        </main>
+      </div>
+    </div>
+    <aside class="drawer is-open" id="evidenceDrawer">
+      <header class="drawer-header">
+        <div>
+          <div class="drawer-breadcrumb"><button type="button">往来查询</button> / 甲公司 ↔ 乙公司</div>
+          <h2>甲公司 ↔ 乙公司</h2>
+        </div>
+        <button type="button" class="icon-button" aria-label="关闭">×</button>
+      </header>
+      <div class="drawer-body">
+        <div class="pair-balance-line is-six" id="drawerSix">
+          <div><span>期初余额</span><strong class="amount-neutral">期初不可用</strong></div>
+          <div><span>本期借方</span><strong><span class="amount-with-currency is-compact"><span class="currency-code">CNY</span>123,456,789,012,345.00</span></strong></div>
+          <div><span>本期贷方</span><strong><span class="amount-with-currency"><span class="currency-code">CNY</span>320.00</span></strong></div>
+          <div class="pair-final"><span>期末结果</span><strong><em class="status success">应收</em> <span class="amount-with-currency is-compact"><span class="currency-code">CNY</span>23,456,789,012,345.00</span></strong></div>
+          <div class="pair-unresolved is-empty"><span>未决金额</span><strong><span class="amount-with-currency"><span class="currency-code">CNY</span>0.00</span></strong></div>
+          <div><span>截止日</span><strong class="amount-neutral">2026.07.31</strong></div>
+        </div>
+      </div>
+    </aside>
+    <pre id="b175-metrics" hidden></pre>
+    <script>
+      function box(el) {
+        const r = el.getBoundingClientRect();
+        return { left: r.left, right: r.right, top: r.top, bottom: r.bottom, width: r.width, height: r.height };
+      }
+      function overlap(a, b) {
+        const dx = Math.min(a.right, b.right) - Math.max(a.left, b.left);
+        const dy = Math.min(a.bottom, b.bottom) - Math.max(a.top, b.top);
+        if (dx <= 0 || dy <= 0) return 0;
+        return Math.round(Math.min(dx, dy) === dy ? dx : dx);
+      }
+      function clipped(el) {
+        return el.scrollWidth > el.clientWidth + 1;
+      }
+      function measure() {
+        const row = document.querySelector("#stressRow");
+        const summary = row.querySelector("summary");
+        const amount = row.querySelector(".ledger-result .amount-with-currency");
+        const direction = row.querySelector(".ledger-result .status");
+        const unresolved = row.querySelector(".ledger-unresolved .status");
+        const cutoff = row.querySelector(".ledger-cutoff");
+        const chevron = row.querySelector("summary > svg");
+        const head = document.querySelector(".ledger-head.is-balances");
+        const drawerAmount = document.querySelector("#drawerSix .pair-final .amount-with-currency");
+        const amountBox = box(amount);
+        const unresolvedBox = box(unresolved);
+        const cutoffBox = box(cutoff);
+        const chevronBox = box(chevron);
+        const directionBox = box(direction);
+        const metrics = {
+          viewport: window.innerWidth,
+          clientWidth: document.documentElement.clientWidth,
+          fiveColVisible: getComputedStyle(head).display !== "none",
+          amountText: amount.textContent.replace(/\s+/g, " ").trim(),
+          unresolvedText: unresolved.textContent.replace(/\s+/g, " ").trim(),
+          cutoffText: cutoff.textContent.replace(/\s+/g, " ").trim(),
+          amountUnresolvedOverlap: overlap(amountBox, unresolvedBox),
+          amountCutoffOverlap: overlap(amountBox, cutoffBox),
+          unresolvedCutoffOverlap: overlap(unresolvedBox, cutoffBox),
+          unresolvedChevronOverlap: overlap(unresolvedBox, chevronBox),
+          cutoffChevronOverlap: overlap(cutoffBox, chevronBox),
+          directionUnresolvedOverlap: overlap(directionBox, unresolvedBox),
+          amountClipped: clipped(amount),
+          unresolvedClipped: clipped(unresolved),
+          cutoffClipped: clipped(cutoff),
+          amountVisible: amountBox.width > 4 && amountBox.height > 4,
+          unresolvedVisible: unresolvedBox.width > 4 && unresolvedBox.height > 4,
+          cutoffVisible: cutoffBox.width > 4 && cutoffBox.height > 4,
+          stackedResult: getComputedStyle(row.querySelector(".ledger-result")).flexDirection === "column",
+          drawerAmountClipped: clipped(drawerAmount),
+          summaryWidth: Math.round(box(summary).width),
+        };
+        const node = document.getElementById("b175-metrics");
+        node.hidden = false;
+        node.textContent = JSON.stringify(metrics);
+        document.title = "B175 " + node.textContent;
+      }
+      window.measureB175 = measure;
+      if (document.readyState === "complete") {
+        measure();
+      } else {
+        window.addEventListener("load", measure);
+      }
+    </script>
+  </body>
+</html>