Просмотр исходного кода

docs: add design for plan list delivery times column

Capture the approved brainstorm for showing and filtering
deduplicated delivery-stop dates on PL plan family lists.

Co-authored-by: Cursor <cursoragent@cursor.com>
wuzilong 1 месяц назад
Родитель
Сommit
cb57a71d2d

+ 636 - 0
docs/fresh-mint-pl-plan-delivery-time-column-demo.html

@@ -0,0 +1,636 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>运输计划列表 · 送货时间列 Demo</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+  <style>
+    :root {
+      --primary: #10b981;
+      --primary-dark: #059669;
+      --primary-bg: #ecfdf5;
+      --text: #1e293b;
+      --text-muted: #64748b;
+      --border: #d9e8e2;
+      --surface: #ffffff;
+      --table-head: #f8fafc;
+      --row-alt: #fafafa;
+      --row-hover: #f1f5f9;
+      --bg-page: #f1f5f9;
+      --shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+      --radius: 10px;
+      --warn: #d97706;
+      --info: #0284c7;
+      --info-bg: #f0f9ff;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      min-height: 100vh;
+      font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
+      font-size: 14px;
+      line-height: 1.5;
+      color: var(--text);
+      background: var(--bg-page);
+    }
+    .page { max-width: 1280px; margin: 0 auto; padding: 24px 20px 80px; }
+    .hero {
+      background: linear-gradient(135deg, #ecfdf5 0%, #fff 55%, #f0f9ff 100%);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      padding: 22px 24px;
+      margin-bottom: 16px;
+      box-shadow: var(--shadow);
+    }
+    .hero h1 { margin: 0 0 8px; font-size: 22px; font-weight: 700; }
+    .hero h1 em { font-style: normal; color: var(--primary-dark); }
+    .hero p { margin: 0; color: var(--text-muted); max-width: 920px; }
+    .meta {
+      display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
+    }
+    .chip {
+      display: inline-flex; align-items: center; gap: 6px;
+      padding: 4px 10px; border-radius: 999px;
+      background: var(--primary-bg); color: var(--primary-dark);
+      font-size: 12px; font-weight: 600;
+    }
+    .chip.muted { background: #f1f5f9; color: var(--text-muted); }
+
+    .compare-bar {
+      display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
+      margin-bottom: 14px;
+    }
+    .compare-btn {
+      border: 1px solid var(--border);
+      background: #fff;
+      color: var(--text-muted);
+      border-radius: 999px;
+      padding: 8px 16px;
+      font-size: 13px;
+      font-weight: 600;
+      cursor: pointer;
+      font-family: inherit;
+      transition: all .15s ease;
+    }
+    .compare-btn:hover { border-color: #a7f3d0; color: var(--primary-dark); }
+    .compare-btn.active {
+      background: var(--primary);
+      border-color: var(--primary);
+      color: #fff;
+    }
+    .compare-btn .badge {
+      display: inline-block;
+      margin-left: 6px;
+      padding: 1px 7px;
+      border-radius: 999px;
+      font-size: 11px;
+      font-weight: 700;
+      background: rgba(255,255,255,.22);
+    }
+    .compare-btn:not(.active) .badge {
+      background: var(--primary-bg);
+      color: var(--primary-dark);
+    }
+    .hint {
+      margin-left: auto;
+      font-size: 12px;
+      color: var(--text-muted);
+    }
+    .hint strong { color: var(--primary-dark); }
+
+    .panel {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      box-shadow: var(--shadow);
+      overflow: hidden;
+    }
+    .panel-top {
+      padding: 14px 18px;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+    .panel-top h2 {
+      margin: 0;
+      font-size: 16px;
+      font-weight: 700;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .panel-top h2::before {
+      content: "";
+      width: 3px;
+      height: 16px;
+      border-radius: 2px;
+      background: var(--primary);
+    }
+    .panel-note {
+      margin-left: auto;
+      font-size: 12px;
+      color: var(--text-muted);
+    }
+
+    .toolbar {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      align-items: center;
+      padding: 12px 16px;
+      border-bottom: 1px solid var(--border);
+    }
+    .pill {
+      border: 1px solid var(--border);
+      background: #fff;
+      border-radius: 999px;
+      padding: 6px 12px;
+      font-size: 12px;
+      color: var(--text-muted);
+      cursor: default;
+    }
+    .pill.active {
+      background: var(--primary-bg);
+      border-color: #a7f3d0;
+      color: var(--primary-dark);
+      font-weight: 600;
+    }
+    .search {
+      flex: 1;
+      min-width: 220px;
+      max-width: 360px;
+      height: 36px;
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 0 12px;
+      color: var(--text-muted);
+      background: #fff;
+      display: flex;
+      align-items: center;
+      font-size: 13px;
+    }
+    .btn {
+      height: 36px;
+      border-radius: 8px;
+      border: 1px solid var(--border);
+      background: #fff;
+      padding: 0 14px;
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--text);
+      cursor: default;
+    }
+    .btn.main {
+      background: var(--primary);
+      border-color: var(--primary);
+      color: #fff;
+    }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      table-layout: fixed;
+    }
+    th, td {
+      padding: 10px 12px;
+      border-bottom: 1px solid var(--border);
+      text-align: center;
+      vertical-align: middle;
+      font-size: 13px;
+    }
+    th {
+      background: var(--table-head);
+      color: var(--text-muted);
+      font-weight: 600;
+      white-space: nowrap;
+    }
+    tr:nth-child(even) td { background: var(--row-alt); }
+    tr:hover td { background: var(--row-hover); }
+    .col-left { text-align: left; }
+    .muted { color: var(--text-muted); }
+    .plan-no {
+      color: var(--primary-dark);
+      font-weight: 600;
+      text-decoration: none;
+    }
+    .new-col {
+      position: relative;
+      background: linear-gradient(180deg, #ecfdf5 0%, #f8fafc 100%) !important;
+      box-shadow: inset 0 0 0 2px rgba(16, 185, 129, 0.35);
+    }
+    td.new-col {
+      background: #ecfdf5 !important;
+      box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.25);
+    }
+    .hdr {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      justify-content: center;
+    }
+    .funnel {
+      width: 16px;
+      height: 16px;
+      border: 0;
+      background: transparent;
+      cursor: pointer;
+      padding: 0;
+      color: var(--text-muted);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .funnel.active { color: var(--primary-dark); }
+    .funnel svg { width: 14px; height: 14px; }
+
+    .times-join { letter-spacing: 0.01em; }
+    .times-tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+      justify-content: center;
+    }
+    .tag {
+      display: inline-block;
+      padding: 1px 8px;
+      border-radius: 4px;
+      background: var(--info-bg);
+      color: var(--info);
+      font-size: 12px;
+      font-weight: 600;
+      border: 1px solid #bae6fd;
+    }
+    .times-stack {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      align-items: center;
+      line-height: 1.35;
+    }
+
+    .status {
+      display: inline-block;
+      padding: 2px 8px;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 600;
+      color: #fff;
+      background: var(--primary-dark);
+    }
+    .status.warn { background: var(--warn); }
+
+    .filter-pop {
+      display: none;
+      position: absolute;
+      top: calc(100% + 6px);
+      left: 50%;
+      transform: translateX(-50%);
+      width: 280px;
+      background: #fff;
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
+      padding: 12px;
+      z-index: 20;
+      text-align: left;
+    }
+    .filter-pop.open { display: block; }
+    .filter-pop label {
+      display: block;
+      font-size: 11px;
+      color: var(--text-muted);
+      margin-bottom: 4px;
+    }
+    .filter-pop .row {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 8px;
+      margin-bottom: 10px;
+    }
+    .filter-pop input {
+      width: 100%;
+      height: 32px;
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      padding: 0 8px;
+      font-size: 12px;
+      font-family: inherit;
+    }
+    .filter-pop .actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+    }
+    .filter-pop .actions button {
+      height: 28px;
+      border-radius: 6px;
+      border: 1px solid var(--border);
+      background: #fff;
+      padding: 0 10px;
+      font-size: 12px;
+      cursor: pointer;
+      font-family: inherit;
+    }
+    .filter-pop .actions .ok {
+      background: var(--primary);
+      border-color: var(--primary);
+      color: #fff;
+      font-weight: 600;
+    }
+    .filter-note {
+      font-size: 11px;
+      color: var(--text-muted);
+      margin: 0 0 10px;
+      line-height: 1.4;
+    }
+
+    .legend {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      gap: 12px;
+      margin-top: 16px;
+    }
+    @media (max-width: 960px) { .legend { grid-template-columns: 1fr; } }
+    .legend-card {
+      background: #fff;
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      padding: 14px 16px;
+      box-shadow: var(--shadow);
+    }
+    .legend-card h3 {
+      margin: 0 0 6px;
+      font-size: 13px;
+      font-weight: 700;
+    }
+    .legend-card p {
+      margin: 0;
+      font-size: 12px;
+      color: var(--text-muted);
+    }
+    .legend-card.rec {
+      border-color: #a7f3d0;
+      background: linear-gradient(180deg, #ecfdf5, #fff);
+    }
+    .rec-badge {
+      display: inline-block;
+      margin-left: 6px;
+      padding: 1px 7px;
+      border-radius: 999px;
+      font-size: 11px;
+      background: var(--primary);
+      color: #fff;
+      font-weight: 700;
+      vertical-align: middle;
+    }
+    .data-note {
+      margin-top: 14px;
+      padding: 12px 14px;
+      background: #fff;
+      border: 1px dashed #a7f3d0;
+      border-radius: 10px;
+      font-size: 12px;
+      color: var(--text-muted);
+    }
+    .data-note strong { color: var(--text); }
+    code {
+      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      font-size: 11px;
+      background: #f1f5f9;
+      padding: 1px 5px;
+      border-radius: 4px;
+    }
+  </style>
+</head>
+<body>
+  <div class="page">
+    <header class="hero">
+      <h1>运输计划 · 新增列 <em>送货时间</em></h1>
+      <p>
+        插入位置:<strong>计划日期</strong> 之后。数据来自各<strong>送货段</strong>
+        <code>pl_plan_delivery.delivery_time</code>,去重后展示;列头漏斗支持日期区间过滤
+        (与计划日期列交互一致)。下方可切换三种单元格展示方案。
+      </p>
+      <div class="meta">
+        <span class="chip">列:送货时间</span>
+        <span class="chip">去重 · 升序</span>
+        <span class="chip">过滤:日期区间</span>
+        <span class="chip muted">表单取值格式 YYYY-MM-DD</span>
+      </div>
+    </header>
+
+    <div class="compare-bar">
+      <button type="button" class="compare-btn active" data-mode="join">
+        A · 逗号拼接 <span class="badge">推荐</span>
+      </button>
+      <button type="button" class="compare-btn" data-mode="tags">B · 标签堆叠</button>
+      <button type="button" class="compare-btn" data-mode="stack">C · 多行换行</button>
+      <span class="hint">当前方案:<strong id="modeLabel">逗号拼接</strong></span>
+    </div>
+
+    <section class="panel">
+      <div class="panel-top">
+        <h2>运输计划列表(示意)</h2>
+        <span class="panel-note">绿色描边列为新增「送货时间」· 点击漏斗可预览过滤浮层</span>
+      </div>
+      <div class="toolbar">
+        <span class="pill active">今天</span>
+        <span class="pill">近 7 天</span>
+        <span class="pill">本月</span>
+        <div class="search">计划编号 / 供方 / 需方 / 产品名称 / 车牌号</div>
+        <button class="btn main" type="button">新增计划</button>
+        <button class="btn" type="button">安排运输</button>
+      </div>
+      <div style="overflow-x: auto;">
+        <table>
+          <thead>
+            <tr>
+              <th style="width: 48px;">#</th>
+              <th class="col-left" style="width: 140px;">计划编号</th>
+              <th style="width: 100px;">跟进状态</th>
+              <th style="width: 120px;">
+                <span class="hdr">计划日期
+                  <span class="funnel" title="计划日期过滤(既有)" aria-hidden="true">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M7 12h10M10 18h4"/></svg>
+                  </span>
+                </span>
+              </th>
+              <th style="width: 168px;" class="new-col">
+                <span class="hdr">送货时间
+                  <button type="button" class="funnel active" id="deliveryFilterBtn" title="送货时间过滤" aria-label="送货时间过滤">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M7 12h10M10 18h4"/></svg>
+                  </button>
+                </span>
+                <div class="filter-pop" id="deliveryFilterPop">
+                  <p class="filter-note">
+                    过滤语义示意:任一送货段时间落在区间内即命中该计划
+                    (EXISTS 子查询,不对主表 <code>pl_plan.delivery_time</code> 过滤)。
+                  </p>
+                  <div class="row">
+                    <div>
+                      <label>开始日期</label>
+                      <input type="date" value="2026-09-12" />
+                    </div>
+                    <div>
+                      <label>结束日期</label>
+                      <input type="date" value="2026-09-14" />
+                    </div>
+                  </div>
+                  <div class="actions">
+                    <button type="button" id="filterReset">重置</button>
+                    <button type="button" class="ok" id="filterOk">确定</button>
+                  </div>
+                </div>
+              </th>
+              <th style="width: 90px;">单据类型</th>
+              <th style="width: 110px;">车牌号</th>
+              <th class="col-left">客户 / 段次摘要</th>
+            </tr>
+          </thead>
+          <tbody id="tbody"></tbody>
+        </table>
+      </div>
+    </section>
+
+    <div class="legend">
+      <article class="legend-card rec">
+        <h3>A · 逗号拼接<span class="rec-badge">推荐</span></h3>
+        <p>与「多值文本列」一致,窄列可读;去重后如 <code>09-12, 09-14</code>。合并单元格场景最稳。</p>
+      </article>
+      <article class="legend-card">
+        <h3>B · 标签堆叠</h3>
+        <p>视觉区分更强,但列宽吃得更多,合并行高度波动大。</p>
+      </article>
+      <article class="legend-card">
+        <h3>C · 多行换行</h3>
+        <p>每行一个日期,对齐清晰;行高会随段次数增加,列表节奏变松。</p>
+      </article>
+    </div>
+
+    <div class="data-note">
+      <strong>示例数据说明:</strong>
+      PO20260912001 有 3 个送货段,时间 <code>09-12 / 09-12 / 09-14</code> → 去重后 2 个;
+      PO20260912002 单段;PO20260912003 两段不同日;PO20260912004 无送货时间 → 展示「—」。
+      主表冗余字段 <code>pl_plan.delivery_time</code> 仅同步首段,<strong>不作为本列数据源</strong>。
+    </div>
+  </div>
+
+  <script>
+    const rows = [
+      {
+        no: 'PO20260912001',
+        status: '待安排',
+        statusClass: 'warn',
+        planDate: '2026-09-12',
+        times: ['2026-09-12', '2026-09-12', '2026-09-14'],
+        type: '直销单',
+        plate: '皖A·D1234',
+        customer: '甲客户 → 乙客户 / 丙客户'
+      },
+      {
+        no: 'PO20260912002',
+        status: '已安排',
+        statusClass: '',
+        planDate: '2026-09-12',
+        times: ['2026-09-12'],
+        type: '出库单',
+        plate: '皖A·E5678',
+        customer: '云栋仓库 → 丁客户'
+      },
+      {
+        no: 'PO20260912003',
+        status: '已安排',
+        statusClass: '',
+        planDate: '2026-09-13',
+        times: ['2026-09-13', '2026-09-15'],
+        type: '入库单',
+        plate: '—',
+        customer: '戊供应商 → 山峡库'
+      },
+      {
+        no: 'PO20260912004',
+        status: '等通知',
+        statusClass: 'warn',
+        planDate: '2026-09-14',
+        times: [],
+        type: '直销单',
+        plate: '—',
+        customer: '己客户(待补送货时间)'
+      }
+    ]
+
+    function uniqSorted(times) {
+      return [...new Set(times.filter(Boolean))].sort()
+    }
+
+    function shortDate(iso) {
+      if (!iso) return '—'
+      const m = String(iso).match(/(\d{4})-(\d{2})-(\d{2})/)
+      return m ? `${m[2]}-${m[3]}` : iso
+    }
+
+    function renderTimes(times, mode) {
+      const list = uniqSorted(times)
+      if (!list.length) return '<span class="muted">—</span>'
+      if (mode === 'tags') {
+        return `<div class="times-tags">${list.map((t) => `<span class="tag">${shortDate(t)}</span>`).join('')}</div>`
+      }
+      if (mode === 'stack') {
+        return `<div class="times-stack">${list.map((t) => `<span>${shortDate(t)}</span>`).join('')}</div>`
+      }
+      return `<span class="times-join">${list.map(shortDate).join(', ')}</span>`
+    }
+
+    const labels = { join: '逗号拼接', tags: '标签堆叠', stack: '多行换行' }
+    let mode = 'join'
+
+    function render() {
+      const tbody = document.getElementById('tbody')
+      tbody.innerHTML = rows.map((r, i) => `
+        <tr>
+          <td class="muted">${i + 1}</td>
+          <td class="col-left"><a class="plan-no" href="#">${r.no}</a></td>
+          <td><span class="status ${r.statusClass}">${r.status}</span></td>
+          <td>${r.planDate}</td>
+          <td class="new-col">${renderTimes(r.times, mode)}</td>
+          <td>${r.type}</td>
+          <td>${r.plate}</td>
+          <td class="col-left muted">${r.customer}</td>
+        </tr>
+      `).join('')
+      document.getElementById('modeLabel').textContent = labels[mode]
+    }
+
+    document.querySelectorAll('.compare-btn').forEach((btn) => {
+      btn.addEventListener('click', () => {
+        document.querySelectorAll('.compare-btn').forEach((b) => b.classList.remove('active'))
+        btn.classList.add('active')
+        mode = btn.dataset.mode
+        render()
+      })
+    })
+
+    const pop = document.getElementById('deliveryFilterPop')
+    const filterBtn = document.getElementById('deliveryFilterBtn')
+    filterBtn.addEventListener('click', (e) => {
+      e.stopPropagation()
+      pop.classList.toggle('open')
+    })
+    document.getElementById('filterOk').addEventListener('click', () => pop.classList.remove('open'))
+    document.getElementById('filterReset').addEventListener('click', () => {
+      pop.querySelectorAll('input').forEach((el) => { el.value = '' })
+    })
+    document.addEventListener('click', (e) => {
+      if (!pop.contains(e.target) && e.target !== filterBtn && !filterBtn.contains(e.target)) {
+        pop.classList.remove('open')
+      }
+    })
+
+    render()
+  </script>
+</body>
+</html>

+ 170 - 0
docs/superpowers/specs/2026-09-12-pl-plan-delivery-times-column-design.md

@@ -0,0 +1,170 @@
+# 运输计划列表「送货时间」列设计
+
+日期:2026-09-12  
+状态:已评审(待实现)  
+相关 Demo:`docs/fresh-mint-pl-plan-delivery-time-column-demo.html`
+
+## 背景与目标
+
+运输计划可有多个送货段(`pl_plan_delivery`),各段有独立「送货时间」。业务需要在计划列表「计划日期」后展示**去重后的送货时间**,并支持列头区间过滤。
+
+主表 `pl_plan.delivery_time` 仅为首段同步冗余,**不得**作为本列数据源或过滤依据。
+
+## 已确认决策
+
+| 项 | 决策 |
+|----|------|
+| 展示 | 多行换行,一行一个日期 |
+| 格式 | `YYYY-MM-DD` |
+| 去重 | 按日历日去重后升序 |
+| 过滤语义 | 任一送货段落在区间内即命中(EXISTS) |
+| 范围 | 主列表 + 归档 + 合同完善 + 证书 |
+| 顶部日期 pills | 仍只筛「计划日期」;送货时间仅列头漏斗 |
+| 实现路径 | 方案 1:后端 EXISTS 过滤 + 列表返回 `deliveryTimes[]` |
+
+## 方案 1 概要
+
+1. 列表/导出查询增加 `deliveryTimeFrom` / `deliveryTimeTo`。
+2. `build_plan_column_filters`(及四页同源参数透传)用 `PlPlanDelivery` EXISTS 过滤。
+3. 列表项增加 `deliveryTimes: string[]`(去重升序 `YYYY-MM-DD`)。
+4. 四页 UI 在「计划日期」后加列,多行展示,并入计划区合并列。
+
+## §1 数据与过滤
+
+### 数据源
+
+- 表:`pl_plan_delivery`
+- 字段:`delivery_time`
+- 条件:`del_flag = 0`,且与计划同租户、同 `plan_id`
+- **排除**:`pl_plan.delivery_time`
+
+### 聚合规则
+
+对每个计划:
+
+1. 收集送货段 `delivery_time` 非空值;
+2. 截断为日历日(忽略时分秒);
+3. 去重、升序;
+4. 格式化为 `YYYY-MM-DD` 字符串数组 → `deliveryTimes`;
+5. 无有效值 → `[]`(前端显示 `—`)。
+
+### 过滤
+
+- 参数:`deliveryTimeFrom`、`deliveryTimeTo`(`date`,camelCase alias)
+- 语义:存在至少一条未删除送货段,其 `DATE(delivery_time)` 落在闭区间 `[from, to]`(缺一侧则只约束另一侧)
+- 与 `planDateFrom/To` 等其它条件 **AND**
+- 顶部「今天 / 近 7 天 / 本月」**不**写入 `deliveryTime*`
+
+## §2 API 与导出
+
+### 查询
+
+以下 list / export(及共用 `_column_filters_from_params` / `build_plan_column_filters` 的路径)透传新参数:
+
+- 运输计划主列表
+- 运输计划归档
+- 运输计划合同完善
+- 运输计划证书相关列表
+
+落点:
+
+- `backend/app/services/pl/plan_list_filters.py` → `build_plan_column_filters`
+- `backend/app/api/pl/plan.py`(及归档/证书/合同完善若分路由,同样透传)
+
+### 响应
+
+- Schema 计划列表项增加 `deliveryTimes: list[str]`(camelCase)
+- 在已有批量 `load_plan_stops_grouped` / 装配路径上按 `plan_id` 聚合写入,避免 N+1
+- 详情/编辑:已有 `deliveries[].deliveryTime`,可不重复依赖列表字段
+
+### 导出
+
+- **计划维度**导出:在「计划日期」后增加「送货时间」列
+- 单元格:多个日期用 ` / ` 拼接(Excel 友好);空则空或 `—`(与现有空值习惯一致)
+- **段次展开**类导出若已有「段次时间」,不再加计划级聚合列,避免重复
+
+### 明确不做
+
+- 不改写 `pl_plan.delivery_time`
+- 无 DB 迁移、无新表字段、无历史回填任务
+
+## §3 四页 UI
+
+### 页面
+
+| 页面 | 路径 |
+|------|------|
+| 运输计划 | `web-admin/src/views/pl/plan/index.vue` |
+| 归档 | `web-admin/src/views/pl/plan-archive/index.vue` |
+| 合同完善 | `web-admin/src/views/pl/plan-contract/index.vue` |
+| 证书 | `web-admin/src/views/pl/plan-cert/index.vue` |
+
+各页 `columnFilterDefs.ts` 同步增加 `deliveryTimes` 定义。
+
+### 列行为
+
+- 位置:紧挨「计划日期」之后
+- `prop`: `deliveryTimes`;列设置默认可见
+- 单元格:竖排多行,每行一个 `YYYY-MM-DD`;`[]` → `—`
+- 样式:纯文本,不用 Tag;`min-width` 约 120~140;居中
+- 并入 `PLAN_MERGE_COLUMN_PROPS`,插在 `planDate` 之后(计划区合并只显示一份)
+
+### 列头过滤
+
+- `type: 'datetime'`
+- `queryKeyFrom: 'deliveryTimeFrom'`
+- `queryKeyTo: 'deliveryTimeTo'`
+- 与 `planDate` 列头控件同交互
+- 点顶部日期 pills:沿用现逻辑只清 `planDate` 列过滤,**不清**送货时间过滤
+- 「清空列过滤」同时清除送货时间过滤
+
+### 明确不做
+
+- 不改表单/详情内已有送货时间编辑控件
+- 不把送货时间并入顶部快捷 pills
+
+## §4 边界与验收
+
+### 边界
+
+- 多段同日 → 去重后一行
+- 部分段有时间 → 只展示/过滤有值段
+- 全部无时间 → `—`;送货时间过滤下不命中
+- 带时分的 `delivery_time` → 按日历日截断后再去重/比较
+- `del_flag=1` 送货段不参与
+- 计划日期过滤与送货时间过滤可同时生效(AND)
+- 合并单元格键包含 `deliveryTimes`(与同计划其它计划区字段一致)
+
+### 验收
+
+1. 主列表「计划日期」后有「送货时间」,多段去重多行 `YYYY-MM-DD`
+2. 列头区间:任一送货段落入即出结果;与计划日期 pills 互不覆盖参数
+3. 归档 / 合同完善 / 证书行为一致
+4. 计划维度导出含「送货时间」,多值可读
+5. 无送货时间显示 `—`,且不会被送货时间过滤误筛入
+
+### 范围外
+
+- 小程序端
+- 运费、出入库等非同类计划列表
+- DB 新字段 / 主表历史回填
+
+## 主要改动面(实现索引)
+
+**Backend**
+
+- `app/services/pl/plan_list_filters.py` — EXISTS + from/to
+- `app/api/pl/plan.py` — Query/Body 透传、列表装配、导出列
+- `app/schemas/pl/plan.py` — `deliveryTimes`
+- 归档/证书/合同完善若有独立 list/export 参数拼装,同步透传
+
+**Frontend**
+
+- `views/pl/plan|plan-archive|plan-cert|plan-contract/index.vue`
+- 对应 `columnFilterDefs.ts`
+- 类型定义(若有集中 Plan 类型)增加 `deliveryTimes?: string[]`
+
+## 参考
+
+- 列过滤基线:`docs/superpowers/specs/2026-09-06-pl-list-server-column-filters-design.md`
+- UI Demo:`docs/fresh-mint-pl-plan-delivery-time-column-demo.html`