Explorar o código

docs: design payment detail transfer cards as white amount-first layout

Capture approved option A demo and implementation outline for schedule/transfer hierarchy in payment detail.

Co-authored-by: Cursor <cursoragent@cursor.com>
zlwu hai 2 semanas
pai
achega
5ce18e56a0

+ 577 - 0
docs/demos/2026-10-14-payment-detail-transfer-display-demo.html

@@ -0,0 +1,577 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+  <title>缴费明细 · 应缴批次转账展示 Demo</title>
+  <style>
+    :root {
+      --primary: #0a9f6d;
+      --primary-dark: #087f57;
+      --primary-soft: #e9f9f2;
+      --text: #18332a;
+      --muted: #6b7c74;
+      --border: #dce8e2;
+      --surface: #fff;
+      --page: #f3f6f5;
+      --money: #c98312;
+      --warn-bg: #fff7e8;
+      --warn: #b45309;
+      --ok-bg: #e9f9f2;
+      --ok: #087f57;
+      --info-bg: #eef2ff;
+      --info: #4338ca;
+    }
+
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
+      font-size: 14px;
+      line-height: 1.5;
+      color: var(--text);
+      background: var(--page);
+    }
+
+    .page {
+      max-width: 420px;
+      margin: 0 auto;
+      padding: 20px 14px 56px;
+    }
+
+    .hero { margin-bottom: 16px; }
+    .hero h1 {
+      margin: 0 0 6px;
+      font-size: 20px;
+      font-weight: 700;
+    }
+    .hero p {
+      margin: 0;
+      color: var(--muted);
+      font-size: 13px;
+    }
+
+    .section-label {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin: 20px 0 8px;
+      color: var(--muted);
+      font-size: 12px;
+      font-weight: 600;
+    }
+    .section-label em {
+      font-style: normal;
+      padding: 2px 8px;
+      border-radius: 999px;
+      background: var(--primary-soft);
+      color: var(--primary-dark);
+    }
+    .section-label .bad {
+      background: var(--warn-bg);
+      color: var(--warn);
+    }
+
+    /* —— 弹窗壳 —— */
+    .sheet {
+      border: 1px solid var(--border);
+      border-radius: 16px;
+      background: var(--surface);
+      box-shadow: 0 6px 20px rgb(8 127 87 / 7%);
+      overflow: hidden;
+    }
+    .sheet__bar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 14px 16px;
+      border-bottom: 1px solid #eef4f1;
+      font-weight: 700;
+    }
+    .sheet__bar span { color: var(--muted); font-weight: 500; font-size: 13px; }
+    .sheet__body { padding: 12px; }
+
+    .block {
+      margin-bottom: 12px;
+      padding: 14px;
+      border: 1px solid var(--border);
+      border-radius: 14px;
+      background: #fff;
+    }
+    .block h3 {
+      margin: 0;
+      padding-left: 10px;
+      border-left: 3px solid var(--primary);
+      font-size: 15px;
+    }
+
+    .tag {
+      display: inline-flex;
+      max-width: 120px;
+      padding: 3px 10px;
+      border-radius: 999px;
+      font-size: 12px;
+      line-height: 1.3;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .tag.warn { background: var(--warn-bg); color: var(--warn); }
+    .tag.ok { background: var(--ok-bg); color: var(--ok); }
+    .tag.info { background: var(--info-bg); color: var(--info); }
+
+    /* ========== 改前:现有嵌套卡片 ========== */
+    .before-period {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      gap: 8px 12px;
+      margin-top: 12px;
+      padding: 12px;
+      border-radius: 12px;
+      background: var(--primary-soft);
+      font-size: 13px;
+    }
+    .before-period > strong { font-size: 14px; }
+    .before-row {
+      display: flex;
+      grid-column: 1 / -1;
+      justify-content: space-between;
+      gap: 12px;
+    }
+    .before-row small { color: var(--muted); }
+    .before-transfers {
+      display: grid;
+      grid-column: 1 / -1;
+      gap: 8px;
+    }
+    .before-transfer {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      gap: 8px 12px;
+      padding: 12px;
+      border-radius: 12px;
+      background: var(--primary-soft);
+      font-size: 13px;
+    }
+    .before-note {
+      margin: 8px 0 0;
+      color: var(--warn);
+      font-size: 12px;
+    }
+
+    /* ========== 方案 A:期次卡 + 白底转账单 ========== */
+    .period {
+      margin-top: 12px;
+      border: 1px solid #eef4f1;
+      border-radius: 12px;
+      background: #fafcfb;
+      overflow: hidden;
+    }
+    .period__head {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 12px;
+      background: var(--primary-soft);
+    }
+    .period__head strong { flex: 1; font-size: 14px; }
+    .period__metrics {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 10px 14px;
+      padding: 12px;
+      border-bottom: 1px dashed #eef4f1;
+    }
+    .metric {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      min-width: 0;
+    }
+    .metric span { color: var(--muted); font-size: 11px; }
+    .metric b { font-weight: 600; overflow-wrap: anywhere; }
+    .metric b.money { color: var(--money); font-weight: 700; }
+
+    .xfer-list {
+      display: grid;
+      gap: 8px;
+      padding: 10px;
+    }
+    .xfer-list__label {
+      color: var(--muted);
+      font-size: 12px;
+      font-weight: 600;
+      padding: 0 2px;
+    }
+
+    /* A: 白底独立转账卡 */
+    .xfer-a {
+      padding: 12px;
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      background: #fff;
+      box-shadow: 0 1px 0 rgb(8 127 87 / 4%);
+    }
+    .xfer-a__head {
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
+      margin-bottom: 10px;
+      padding-bottom: 10px;
+      border-bottom: 1px solid #eef4f1;
+    }
+    .xfer-a__index {
+      display: grid;
+      width: 22px;
+      height: 22px;
+      flex: 0 0 22px;
+      place-items: center;
+      border-radius: 6px;
+      background: var(--primary-soft);
+      color: var(--primary-dark);
+      font-size: 11px;
+      font-weight: 700;
+    }
+    .xfer-a__main { flex: 1; min-width: 0; }
+    .xfer-a__amount {
+      color: var(--money);
+      font-size: 17px;
+      font-weight: 700;
+      line-height: 1.2;
+    }
+    .xfer-a__meta {
+      margin-top: 4px;
+      color: var(--muted);
+      font-size: 12px;
+    }
+    .xfer-a__grid {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 8px 12px;
+    }
+    .xfer-a__grid .metric span { font-size: 11px; }
+    .xfer-a__grid .metric.wide { grid-column: 1 / -1; }
+    .xfer-a__voucher {
+      margin-top: 8px;
+      padding-top: 8px;
+      border-top: 1px dashed #eef4f1;
+      color: var(--muted);
+      font-size: 12px;
+    }
+    .voucher-chip {
+      display: inline-flex;
+      margin-top: 6px;
+      margin-right: 6px;
+      padding: 6px 10px;
+      border-radius: 8px;
+      border: 1px dashed #a7f3d0;
+      background: #f6fffb;
+      color: var(--primary-dark);
+      font-size: 12px;
+    }
+
+    /* ========== 方案 B:时间线摘要行 ========== */
+    .xfer-b {
+      display: grid;
+      grid-template-columns: 14px 1fr;
+      gap: 0 10px;
+      padding: 4px 2px 4px 4px;
+    }
+    .xfer-b__rail {
+      position: relative;
+      width: 14px;
+    }
+    .xfer-b__dot {
+      position: absolute;
+      top: 14px;
+      left: 3px;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--primary);
+      box-shadow: 0 0 0 3px var(--primary-soft);
+    }
+    .xfer-b + .xfer-b .xfer-b__rail::before {
+      content: "";
+      position: absolute;
+      top: -12px;
+      bottom: 50%;
+      left: 6px;
+      width: 2px;
+      background: #d7ebe1;
+    }
+    .xfer-b__body {
+      padding: 10px 12px;
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      background: #fff;
+    }
+    .xfer-b__top {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .xfer-b__top .xfer-a__amount { flex: 1; font-size: 16px; }
+    .xfer-b__line {
+      margin-top: 6px;
+      color: var(--muted);
+      font-size: 12px;
+    }
+    .xfer-b__extra {
+      display: none;
+      margin-top: 10px;
+      padding-top: 10px;
+      border-top: 1px dashed #eef4f1;
+    }
+    .xfer-b.is-open .xfer-b__extra { display: block; }
+    .xfer-b__toggle {
+      margin-top: 8px;
+      padding: 0;
+      border: 0;
+      background: transparent;
+      color: var(--primary-dark);
+      font: inherit;
+      font-size: 12px;
+      font-weight: 600;
+      cursor: pointer;
+    }
+
+    .hint {
+      margin-top: 18px;
+      padding: 12px 14px;
+      border-radius: 12px;
+      border: 1px dashed var(--border);
+      background: #fff;
+      color: var(--muted);
+      font-size: 12px;
+    }
+    .hint strong { color: var(--text); }
+    .hint code {
+      display: block;
+      margin-top: 6px;
+      font-size: 11px;
+      word-break: break-all;
+    }
+  </style>
+</head>
+<body>
+  <div class="page">
+    <header class="hero">
+      <h1>缴费明细 · 转账记录展示</h1>
+      <p>应缴批次内的转账记录:对比改前样式与两种改后方案,确认后再改代码。</p>
+    </header>
+
+    <!-- ========== 改前 ========== -->
+    <div class="section-label">
+      <span>改前(当前)</span>
+      <em class="bad">层级不清</em>
+    </div>
+    <div class="sheet">
+      <div class="sheet__bar">缴费明细 <span>关闭</span></div>
+      <div class="sheet__body">
+        <div class="block">
+          <h3>应缴批次</h3>
+          <div class="before-period">
+            <strong>第 1 期</strong>
+            <span class="tag ok">已缴清</span>
+            <div class="before-row"><small>应缴金额</small><span>¥3,000.00</span></div>
+            <div class="before-row"><small>应缴日</small><span>2026-10-10</span></div>
+            <div class="before-row"><small>已缴金额</small><span>¥3,000.00</span></div>
+            <div class="before-row"><small>欠缴金额</small><span>¥0.00</span></div>
+            <div class="before-transfers">
+              <div class="before-transfer">
+                <strong>转账笔 1</strong>
+                <span class="tag ok">付款完成</span>
+                <div class="before-row"><small>转账方式</small><span>微信转账</span></div>
+                <div class="before-row"><small>转账金额</small><span>¥2,000.00</span></div>
+                <div class="before-row"><small>转账时间</small><span>2026-10-11 09:20</span></div>
+                <div class="before-row"><small>转账凭证</small><span>凭证.jpg</span></div>
+                <div class="before-row"><small>备注</small><span>首期部分</span></div>
+                <div class="before-row"><small>财务备注</small><span>已核对</span></div>
+              </div>
+              <div class="before-transfer">
+                <strong>转账笔 2</strong>
+                <span class="tag info">已付款</span>
+                <div class="before-row"><small>转账方式</small><span>银行卡转账</span></div>
+                <div class="before-row"><small>转账金额</small><span>¥1,000.00</span></div>
+                <div class="before-row"><small>转账时间</small><span>2026-10-12 14:08</span></div>
+                <div class="before-row"><small>转账凭证</small><span>—</span></div>
+                <div class="before-row"><small>备注</small><span>—</span></div>
+                <div class="before-row"><small>财务备注</small><span>—</span></div>
+              </div>
+            </div>
+          </div>
+          <p class="before-note">问题:期次与转账同为浅绿底嵌套卡片,「转账笔 N」信息弱,字段全是左右两列堆叠,扫读吃力。</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- ========== 方案 A(推荐) ========== -->
+    <div class="section-label">
+      <span>方案 A · 白底转账卡(金额突出)</span>
+      <em>推荐</em>
+    </div>
+    <div class="sheet">
+      <div class="sheet__bar">缴费明细 <span>关闭</span></div>
+      <div class="sheet__body">
+        <div class="block">
+          <h3>应缴批次</h3>
+
+          <div class="period">
+            <div class="period__head">
+              <strong>第 1 期</strong>
+              <span class="tag ok">已缴清</span>
+            </div>
+            <div class="period__metrics">
+              <div class="metric"><span>应缴金额</span><b class="money">¥3,000.00</b></div>
+              <div class="metric"><span>应缴日</span><b>2026-10-10</b></div>
+              <div class="metric"><span>已缴金额</span><b class="money">¥3,000.00</b></div>
+              <div class="metric"><span>欠缴金额</span><b class="money">¥0.00</b></div>
+            </div>
+            <div class="xfer-list">
+              <div class="xfer-list__label">转账记录(2)</div>
+
+              <article class="xfer-a">
+                <div class="xfer-a__head">
+                  <span class="xfer-a__index">1</span>
+                  <div class="xfer-a__main">
+                    <div class="xfer-a__amount">¥2,000.00</div>
+                    <div class="xfer-a__meta">微信转账 · 2026-10-11 09:20</div>
+                  </div>
+                  <span class="tag ok">付款完成</span>
+                </div>
+                <div class="xfer-a__grid">
+                  <div class="metric"><span>备注</span><b>首期部分</b></div>
+                  <div class="metric"><span>财务备注</span><b>已核对</b></div>
+                </div>
+                <div class="xfer-a__voucher">
+                  转账凭证
+                  <div><span class="voucher-chip">凭证.jpg</span></div>
+                </div>
+              </article>
+
+              <article class="xfer-a">
+                <div class="xfer-a__head">
+                  <span class="xfer-a__index">2</span>
+                  <div class="xfer-a__main">
+                    <div class="xfer-a__amount">¥1,000.00</div>
+                    <div class="xfer-a__meta">银行卡转账 · 2026-10-12 14:08</div>
+                  </div>
+                  <span class="tag info">已付款</span>
+                </div>
+                <div class="xfer-a__grid">
+                  <div class="metric"><span>备注</span><b>—</b></div>
+                  <div class="metric"><span>财务备注</span><b>—</b></div>
+                </div>
+              </article>
+            </div>
+          </div>
+
+          <div class="period">
+            <div class="period__head">
+              <strong>第 2 期</strong>
+              <span class="tag warn">待缴清</span>
+            </div>
+            <div class="period__metrics">
+              <div class="metric"><span>应缴金额</span><b class="money">¥2,000.00</b></div>
+              <div class="metric"><span>应缴日</span><b>2027-04-10</b></div>
+              <div class="metric"><span>已缴金额</span><b class="money">¥0.00</b></div>
+              <div class="metric"><span>欠缴金额</span><b class="money">¥2,000.00</b></div>
+            </div>
+            <div class="xfer-list">
+              <div class="xfer-list__label">转账记录(0)</div>
+              <div style="padding: 8px 2px 4px; color: var(--muted); font-size: 12px;">暂无转账记录</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ========== 方案 B ========== -->
+    <div class="section-label">
+      <span>方案 B · 时间线 + 默认折叠明细</span>
+      <em>备选</em>
+    </div>
+    <div class="sheet">
+      <div class="sheet__bar">缴费明细 <span>关闭</span></div>
+      <div class="sheet__body">
+        <div class="block">
+          <h3>应缴批次</h3>
+          <div class="period">
+            <div class="period__head">
+              <strong>第 1 期</strong>
+              <span class="tag ok">已缴清</span>
+            </div>
+            <div class="period__metrics">
+              <div class="metric"><span>应缴金额</span><b class="money">¥3,000.00</b></div>
+              <div class="metric"><span>应缴日</span><b>2026-10-10</b></div>
+              <div class="metric"><span>已缴金额</span><b class="money">¥3,000.00</b></div>
+              <div class="metric"><span>欠缴金额</span><b class="money">¥0.00</b></div>
+            </div>
+            <div class="xfer-list">
+              <div class="xfer-list__label">转账记录(2)· 点击可展开备注/凭证</div>
+
+              <div class="xfer-b is-open" data-xfer>
+                <div class="xfer-b__rail"><span class="xfer-b__dot"></span></div>
+                <div class="xfer-b__body">
+                  <div class="xfer-b__top">
+                    <div class="xfer-a__amount">¥2,000.00</div>
+                    <span class="tag ok">付款完成</span>
+                  </div>
+                  <div class="xfer-b__line">微信转账 · 2026-10-11 09:20</div>
+                  <button type="button" class="xfer-b__toggle" data-toggle>收起明细</button>
+                  <div class="xfer-b__extra">
+                    <div class="xfer-a__grid">
+                      <div class="metric"><span>备注</span><b>首期部分</b></div>
+                      <div class="metric"><span>财务备注</span><b>已核对</b></div>
+                      <div class="metric wide"><span>转账凭证</span><b>凭证.jpg</b></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="xfer-b" data-xfer>
+                <div class="xfer-b__rail"><span class="xfer-b__dot"></span></div>
+                <div class="xfer-b__body">
+                  <div class="xfer-b__top">
+                    <div class="xfer-a__amount">¥1,000.00</div>
+                    <span class="tag info">已付款</span>
+                  </div>
+                  <div class="xfer-b__line">银行卡转账 · 2026-10-12 14:08</div>
+                  <button type="button" class="xfer-b__toggle" data-toggle>展开明细</button>
+                  <div class="xfer-b__extra">
+                    <div class="xfer-a__grid">
+                      <div class="metric"><span>备注</span><b>—</b></div>
+                      <div class="metric"><span>财务备注</span><b>—</b></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="hint">
+      <strong>怎么选:</strong>
+      方案 A 信息一次看全、金额最醒目,改动也最贴近现有详情组件结构;
+      方案 B 默认更短,适合转账笔数多时扫读,但多一步展开。
+      <br /><br />
+      请回复选 <strong>A</strong> 或 <strong>B</strong>(也可说要微调),确认后再改 `mobile-oa-h5` 代码。
+      <code>docs/demos/2026-10-14-payment-detail-transfer-display-demo.html</code>
+    </div>
+  </div>
+
+  <script>
+    document.querySelectorAll('[data-xfer]').forEach((row) => {
+      const btn = row.querySelector('[data-toggle]')
+      if (!btn) return
+      btn.addEventListener('click', () => {
+        const open = row.classList.toggle('is-open')
+        btn.textContent = open ? '收起明细' : '展开明细'
+      })
+    })
+  </script>
+</body>
+</html>

+ 77 - 0
docs/superpowers/specs/2026-10-14-payment-detail-transfer-display-design.md

@@ -0,0 +1,77 @@
+# 缴费明细 · 应缴批次转账展示(方案 A)
+
+**日期:** 2026-10-14  
+**状态:** 方案 A 已确认(Demo),待实现  
+**Demo:** `docs/demos/2026-10-14-payment-detail-transfer-display-demo.html`
+
+## 1. 背景
+
+市场【缴费信息】→【缴费明细】中,「应缴批次」把期次与转账都渲染成同一套浅绿 `nested-card`,标题为「转账笔 N」,字段全是左右堆叠,层级与金额扫读都不清晰。
+
+## 2. 已确认决策
+
+| 项 | 决策 |
+|----|------|
+| 视觉方案 | **方案 A**:期次浅绿头 + 两列指标;转账为白底独立卡,金额突出 |
+| 备选 | 方案 B(时间线折叠)不采用 |
+| 范围 | `mobile-oa-h5` 缴费明细「应缴批次」;通过卡片 `variant` 落地,协议详情中同类转账子卡可一并受益 |
+| 非范围 | 不改后端字段;不改登记/编辑转账表单;不做方案 B 折叠 |
+
+## 3. 目标视觉
+
+### 3.1 期次卡(schedule)
+
+- 顶栏:`第 N 期` + 状态 Tag(已缴清 / 待缴清等)
+- 指标区两列:应缴金额、应缴日、已缴金额、欠缴金额(金额用 money 色)
+- 下方「转账记录(n)」分区
+
+### 3.2 转账卡(transfer)
+
+- 白底、描边、圆角,与期次浅绿底形成层级差
+- 头行:序号角标 · **转账金额(大字)** · 状态 Tag
+- 副文案一行:`转账方式 · 转账时间`
+- 备注 / 财务备注两列
+- 有凭证时单独一块展示(复用现有附件只读组件)
+
+## 4. 实现要点
+
+### 4.1 数据(`modules/payment.js`)
+
+`transferCard` 增加展示元数据,例如:
+
+```js
+{
+  key, title,           // title 可保留但 UI 优先用金额
+  variant: 'transfer',
+  statusText, statusTone,
+  amount: money(transfer.transferAmount),
+  meta: `${方式} · ${时间}`,
+  fields: [
+    { label: '备注', ... },
+    { label: '财务备注', ... },
+    { label: '转账凭证', type: 'attachments', ... }  // 有则展示
+  ]
+}
+```
+
+`scheduleCard` 增加 `variant: 'schedule'`(可选,便于样式区分)。
+
+### 4.2 UI(`MarketDetailNestedCard.vue` + `market.css`)
+
+- 按 `card.variant === 'transfer'` 走方案 A 转账模板;否则保持兼容(或 `schedule` 走期次头+指标网格)。
+- 递归子卡仍用同一组件;转账不再复用浅绿满底样式。
+- 触控与字号对齐现有详情区(13–14px,金额醒目)。
+
+### 4.3 协议详情
+
+`protocol.js` 中样本缴费下的 schedule→transfer 子卡若结构相同,同步打上 `variant: 'transfer'`,避免一端新一端旧。
+
+## 5. 测试
+
+- 更新 / 新增 parity:transfer 卡片含 `variant: 'transfer'`、样式类(如 `market-detail-section__transfer-card`)、金额头不依赖「转账笔 N」作为主视觉。
+- 现有详情嵌套递归测试仍通过。
+
+## 6. 非目标
+
+- 不引入方案 B 的展开/收起。
+- 不改列表页缴费卡片。