腾讯WorkBuddyandCursor
4add17f2b8
在 376–900px 五列目录把方向 chip 与期末金额分行，并加 Chromium 盒模型回归，避免 15 位金额盖住未决状态。 Co-authored-by: Cursor <cursoragent@cursor.com>
139 lines
8.6 KiB
HTML
139 lines
8.6 KiB
HTML
<!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>
|