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

docs: add CRM date column dual-caret sort design and demo.

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

+ 638 - 0
docs/crm-date-column-sort-demo.html

@@ -0,0 +1,638 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>CRM 日期列头排序 Demo · 正序 / 倒序</title>
+  <style>
+    :root {
+      --primary: #10b981;
+      --primary-dark: #059669;
+      --primary-bg: #ecfdf5;
+      --text: #1e293b;
+      --text-muted: #64748b;
+      --border: #e2e8f0;
+      --border-mint: #d9e8e2;
+      --table-head: #f8fafc;
+      --warning: #d97706;
+      --radius: 8px;
+      --shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
+    }
+
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      padding: 24px;
+      color: var(--text);
+      background: #f1f5f9;
+      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
+      font-size: 14px;
+      line-height: 1.5;
+    }
+
+    .page { max-width: 1120px; margin: 0 auto; }
+    h1 { margin: 0 0 8px; font-size: 22px; font-weight: 700; }
+    h2 { margin: 0 0 10px; font-size: 16px; font-weight: 600; }
+    .desc { margin: 0 0 20px; color: var(--text-muted); font-size: 13px; }
+    .desc code {
+      font-size: 12px;
+      padding: 1px 5px;
+      border-radius: 4px;
+      background: #e2e8f0;
+    }
+
+    .callout {
+      margin-bottom: 20px;
+      padding: 12px 14px;
+      border: 1px solid #a7f3d0;
+      border-radius: 10px;
+      background: var(--primary-bg);
+      color: var(--text);
+      font-size: 13px;
+    }
+    .callout strong { color: var(--primary-dark); }
+
+    .tabs {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 16px;
+    }
+    .tab {
+      border: 1px solid var(--border);
+      background: #fff;
+      color: var(--text-muted);
+      border-radius: 999px;
+      padding: 6px 14px;
+      font-size: 13px;
+      cursor: pointer;
+    }
+    .tab:hover { border-color: #a7f3d0; color: var(--text); }
+    .tab.active {
+      border-color: var(--primary);
+      background: var(--primary-bg);
+      color: var(--primary-dark);
+      font-weight: 600;
+    }
+
+    .panel {
+      background: #fff;
+      border: 1px solid var(--border-mint);
+      border-radius: 10px;
+      overflow: hidden;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+      margin-bottom: 20px;
+    }
+    .panel-top {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      padding: 14px 16px;
+      border-bottom: 1px solid var(--border);
+    }
+    .title-bar {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin: 0;
+      font-size: 16px;
+      font-weight: 600;
+    }
+    .title-bar::before {
+      content: "";
+      width: 3px;
+      height: 16px;
+      border-radius: 2px;
+      background: var(--primary);
+    }
+    .hint {
+      font-size: 12px;
+      color: var(--text-muted);
+    }
+
+    .toolbar {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 10px 16px;
+      border-bottom: 1px solid var(--border);
+      font-size: 13px;
+      color: var(--text-muted);
+    }
+    .sort-badge {
+      display: none;
+      align-items: center;
+      gap: 6px;
+      padding: 2px 8px;
+      border-radius: 999px;
+      background: var(--primary-bg);
+      color: var(--primary-dark);
+      font-size: 12px;
+      font-weight: 600;
+    }
+    .sort-badge.show { display: inline-flex; }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      table-layout: fixed;
+    }
+    th, td {
+      padding: 10px 12px;
+      border-bottom: 1px solid var(--border);
+      text-align: center;
+      font-size: 13px;
+      vertical-align: middle;
+    }
+    th {
+      background: var(--table-head);
+      color: var(--text-muted);
+      font-weight: 600;
+      user-select: none;
+      white-space: nowrap;
+    }
+    tr:nth-child(even) td { background: #f8fafc; }
+    tr:hover td { background: #ecfdf5; }
+    td.left { text-align: left; }
+    .muted { color: var(--text-muted); }
+    .tag {
+      display: inline-block;
+      padding: 2px 8px;
+      border-radius: 4px;
+      background: #059669;
+      color: #fff;
+      font-size: 12px;
+    }
+    .tag.warn { background: #d97706; }
+
+    .col-header {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
+      max-width: 100%;
+    }
+    .col-label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .col-label.clickable {
+      cursor: pointer;
+      border-radius: 4px;
+      padding: 2px 4px;
+    }
+    .col-label.clickable:hover,
+    .col-label.clickable.is-sorted {
+      color: var(--primary-dark);
+      background: var(--primary-bg);
+    }
+
+    .icon-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 22px;
+      height: 22px;
+      border: none;
+      border-radius: 4px;
+      background: transparent;
+      color: #94a3b8;
+      cursor: pointer;
+      padding: 0;
+    }
+    .icon-btn:hover { background: #e2e8f0; color: var(--text); }
+    .icon-btn.active {
+      color: var(--primary-dark);
+      background: var(--primary-bg);
+    }
+
+    .sort-pair {
+      display: inline-flex;
+      flex-direction: column;
+      gap: 0;
+      line-height: 1;
+      margin-left: 2px;
+    }
+    .sort-pair button {
+      display: block;
+      width: 14px;
+      height: 10px;
+      border: none;
+      padding: 0;
+      background: transparent;
+      color: #cbd5e1;
+      cursor: pointer;
+      font-size: 9px;
+      line-height: 1;
+    }
+    .sort-pair button:hover { color: var(--text-muted); }
+    .sort-pair button.on { color: var(--primary-dark); }
+
+    .approach-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 12px;
+      margin-bottom: 20px;
+    }
+    @media (max-width: 900px) {
+      .approach-grid { grid-template-columns: 1fr; }
+    }
+    .card {
+      background: #fff;
+      border: 1px solid var(--border-mint);
+      border-radius: 10px;
+      padding: 14px;
+    }
+    .card.rec { border-color: var(--primary); box-shadow: 0 0 0 1px #a7f3d0; }
+    .card h3 {
+      margin: 0 0 6px;
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .badge {
+      font-size: 11px;
+      font-weight: 600;
+      padding: 2px 6px;
+      border-radius: 999px;
+      background: var(--primary);
+      color: #fff;
+    }
+    .card p {
+      margin: 0 0 12px;
+      font-size: 12px;
+      color: var(--text-muted);
+    }
+    .mock-th {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
+      padding: 10px;
+      background: var(--table-head);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--text-muted);
+    }
+
+    .complexity {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 12px;
+      margin-bottom: 20px;
+    }
+    @media (max-width: 700px) {
+      .complexity { grid-template-columns: 1fr; }
+    }
+    .complexity .card h3 { margin-bottom: 8px; }
+    .complexity ul {
+      margin: 0;
+      padding-left: 18px;
+      font-size: 12px;
+      color: var(--text-muted);
+    }
+    .complexity li { margin-bottom: 4px; }
+
+    .footer-note {
+      font-size: 12px;
+      color: var(--text-muted);
+      margin-top: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="page">
+    <h1>CRM 日期列头排序 Demo</h1>
+    <p class="desc">
+      在现有漏斗过滤旁增加日期列排序(正序 / 倒序)。样式对齐 Fresh Mint。
+      打开本文件即可交互:点击切换排序,表格会即时重排。
+    </p>
+
+    <div class="callout">
+      <strong>工作量结论:</strong>
+      只给 <code>type: 'datetime'</code> 的列加排序 —— 改公共列头组件 + 列表查询加一个排序参数,改动集中、可控。
+      若所有有漏斗的列(文本/枚举/数字/日期)都加 —— 前端交互可复用,但后端几乎每个 CRM 列表接口都要做白名单排序字段,工作量大约是「日期方案」的 2~3 倍,且数字/文本排序语义更啰嗦。
+      <strong>建议先只做日期列。</strong>
+    </div>
+
+    <div class="complexity">
+      <div class="card rec">
+        <h3>方案范围 A · 仅日期列 <span class="badge">推荐</span></h3>
+        <ul>
+          <li>前端:列头组件识别 datetime → 显示排序控件</li>
+          <li>后端:列表支持 <code>sortField</code> + <code>sortOrder</code>(白名单仅日期字段)</li>
+          <li>默认仍是 <code>create_time DESC</code>;点列头后覆盖</li>
+        </ul>
+      </div>
+      <div class="card">
+        <h3>方案范围 B · 所有漏斗列</h3>
+        <ul>
+          <li>交互可做成通用,但文本/枚举排序价值一般</li>
+          <li>数字列还要处理空值、精度</li>
+          <li>每个列表 API 白名单字段更多,联调面大</li>
+        </ul>
+      </div>
+    </div>
+
+    <h2>交互样式对比(选一种即可)</h2>
+    <div class="approach-grid">
+      <div class="card rec">
+        <h3>样式 1 · 点击列名循环 <span class="badge">推荐</span></h3>
+        <p>无排序 → 升序 → 降序 → 无。漏斗只管过滤,互不干扰。</p>
+        <div class="mock-th">
+          <span style="color:var(--primary-dark);background:var(--primary-bg);padding:2px 4px;border-radius:4px;">创建时间 ↑</span>
+          <span class="icon-btn active" title="过滤" aria-hidden="true">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z"/></svg>
+          </span>
+        </div>
+      </div>
+      <div class="card">
+        <h3>样式 2 · 双三角(Element 风格)</h3>
+        <p>上下三角独立点选;与漏斗并排,更贴近表格库默认习惯。</p>
+        <div class="mock-th">
+          <span>创建时间</span>
+          <span class="sort-pair" aria-hidden="true">
+            <button class="on">▲</button>
+            <button>▼</button>
+          </span>
+          <span class="icon-btn" title="过滤">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z"/></svg>
+          </span>
+        </div>
+      </div>
+      <div class="card">
+        <h3>样式 3 · 放进漏斗面板</h3>
+        <p>排序入口藏在过滤弹层里;列头更干净,但多一步点击。</p>
+        <div class="mock-th">
+          <span>创建时间</span>
+          <span class="icon-btn active">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z"/></svg>
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <div class="tabs" role="tablist" aria-label="交互样式">
+      <button type="button" class="tab active" data-mode="cycle">试用样式 1 · 点击列名</button>
+      <button type="button" class="tab" data-mode="carets">试用样式 2 · 双三角</button>
+      <button type="button" class="tab" data-mode="popover">试用样式 3 · 漏斗内排序</button>
+    </div>
+
+    <div class="panel">
+      <div class="panel-top">
+        <h2 class="title-bar">客户列表(示意)</h2>
+        <span class="hint" id="modeHint">日期列:点击列名循环 无 → 升序 → 降序</span>
+      </div>
+      <div class="toolbar">
+        <span>已选 0 项</span>
+        <span class="sort-badge" id="sortBadge"></span>
+        <span style="margin-left:auto" class="hint">非日期列仅有漏斗,无排序</span>
+      </div>
+      <table>
+        <thead>
+          <tr>
+            <th style="width:18%">
+              <div class="col-header">
+                <span class="col-label">客户名称</span>
+                <button type="button" class="icon-btn" title="过滤(示意)" tabindex="-1">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z"/></svg>
+                </button>
+              </div>
+            </th>
+            <th style="width:12%">
+              <div class="col-header">
+                <span class="col-label">状态</span>
+                <button type="button" class="icon-btn" title="过滤(示意)" tabindex="-1">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z"/></svg>
+                </button>
+              </div>
+            </th>
+            <th style="width:18%" data-date-col="lastTime">
+              <div class="col-header" id="hdr-lastTime"></div>
+            </th>
+            <th style="width:18%" data-date-col="dealTime">
+              <div class="col-header" id="hdr-dealTime"></div>
+            </th>
+            <th style="width:18%" data-date-col="createTime">
+              <div class="col-header" id="hdr-createTime"></div>
+            </th>
+            <th style="width:16%">
+              <div class="col-header">
+                <span class="col-label">负责人</span>
+                <button type="button" class="icon-btn" title="过滤(示意)" tabindex="-1">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z"/></svg>
+                </button>
+              </div>
+            </th>
+          </tr>
+        </thead>
+        <tbody id="tbody"></tbody>
+      </table>
+    </div>
+
+    <p class="footer-note">
+      说明:同一时刻只允许一列排序(点另一日期列会替换当前排序)。清空排序后恢复默认「创建时间倒序」展示(与现网列表默认一致)。
+      文件路径:<code>docs/crm-date-column-sort-demo.html</code>
+    </p>
+  </div>
+
+  <script>
+    const FILTER_SVG =
+      '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z"/></svg>'
+
+    const DATE_COLS = [
+      { prop: 'lastTime', label: '最后跟进时间' },
+      { prop: 'dealTime', label: '成交时间' },
+      { prop: 'createTime', label: '创建时间' }
+    ]
+
+    const LABEL = {
+      lastTime: '最后跟进时间',
+      dealTime: '成交时间',
+      createTime: '创建时间'
+    }
+
+    let mode = 'cycle' // cycle | carets | popover
+    /** @type {{ prop: string, order: 'asc' | 'desc' } | null} */
+    let sort = null
+
+    const rows = [
+      { name: '杭州绿源新材料', status: '跟进中', lastTime: '2026-09-01 10:20', dealTime: '', createTime: '2026-03-12 09:10', owner: '张三' },
+      { name: '宁波海天化工', status: '已成交', lastTime: '2026-08-28 16:40', dealTime: '2026-07-02 11:00', createTime: '2025-11-08 14:22', owner: '李四' },
+      { name: '嘉兴宏达科技', status: '跟进中', lastTime: '2026-09-06 09:05', dealTime: '', createTime: '2026-01-20 08:30', owner: '王五' },
+      { name: '绍兴蓝海贸易', status: '已成交', lastTime: '2026-07-15 13:18', dealTime: '2026-06-18 15:40', createTime: '2025-09-30 17:55', owner: '赵六' },
+      { name: '温州精工实业', status: '跟进中', lastTime: '2026-09-08 11:32', dealTime: '', createTime: '2026-05-03 10:00', owner: '张三' },
+      { name: '湖州安泰材料', status: '已成交', lastTime: '2026-08-02 09:48', dealTime: '2026-08-01 16:20', createTime: '2026-02-14 13:45', owner: '钱七' }
+    ]
+
+    function parseTs(v) {
+      if (!v) return Number.NEGATIVE_INFINITY
+      return Date.parse(String(v).replace(/-/g, '/')) || 0
+    }
+
+    function sortedRows() {
+      const data = rows.slice()
+      if (!sort) {
+        data.sort((a, b) => parseTs(b.createTime) - parseTs(a.createTime))
+        return data
+      }
+      const { prop, order } = sort
+      data.sort((a, b) => {
+        const av = parseTs(a[prop])
+        const bv = parseTs(b[prop])
+        // 空日期沉底
+        const aEmpty = !a[prop]
+        const bEmpty = !b[prop]
+        if (aEmpty && bEmpty) return 0
+        if (aEmpty) return 1
+        if (bEmpty) return -1
+        return order === 'asc' ? av - bv : bv - av
+      })
+      return data
+    }
+
+    function cycleSort(prop) {
+      if (!sort || sort.prop !== prop) {
+        sort = { prop, order: 'asc' }
+      } else if (sort.order === 'asc') {
+        sort = { prop, order: 'desc' }
+      } else {
+        sort = null
+      }
+      render()
+    }
+
+    function setSort(prop, order) {
+      if (sort && sort.prop === prop && sort.order === order) {
+        sort = null
+      } else {
+        sort = { prop, order }
+      }
+      render()
+    }
+
+    function arrowText(prop) {
+      if (!sort || sort.prop !== prop) return ''
+      return sort.order === 'asc' ? ' ↑' : ' ↓'
+    }
+
+    function filterBtn(prop) {
+      const active = mode === 'popover' && sort && sort.prop === prop
+      return `<button type="button" class="icon-btn${active ? ' active' : ''}" data-filter="${prop}" title="过滤">${FILTER_SVG}</button>`
+    }
+
+    function renderHeader(prop, label) {
+      const el = document.getElementById('hdr-' + prop)
+      if (!el) return
+      const isSorted = sort && sort.prop === prop
+
+      if (mode === 'cycle') {
+        el.innerHTML = `
+          <span class="col-label clickable${isSorted ? ' is-sorted' : ''}" data-cycle="${prop}" title="点击切换排序">${label}${arrowText(prop)}</span>
+          ${filterBtn(prop)}
+        `
+      } else if (mode === 'carets') {
+        const ascOn = isSorted && sort.order === 'asc'
+        const descOn = isSorted && sort.order === 'desc'
+        el.innerHTML = `
+          <span class="col-label">${label}</span>
+          <span class="sort-pair">
+            <button type="button" class="${ascOn ? 'on' : ''}" data-caret="${prop}" data-order="asc" title="升序">▲</button>
+            <button type="button" class="${descOn ? 'on' : ''}" data-caret="${prop}" data-order="desc" title="降序">▼</button>
+          </span>
+          ${filterBtn(prop)}
+        `
+      } else {
+        el.innerHTML = `
+          <span class="col-label">${label}</span>
+          ${filterBtn(prop)}
+        `
+      }
+    }
+
+    function renderBody() {
+      const tbody = document.getElementById('tbody')
+      tbody.innerHTML = sortedRows()
+        .map(
+          (r) => `
+        <tr>
+          <td class="left">${r.name}</td>
+          <td><span class="tag${r.status === '跟进中' ? ' warn' : ''}">${r.status}</span></td>
+          <td>${r.lastTime || '<span class="muted">—</span>'}</td>
+          <td>${r.dealTime || '<span class="muted">—</span>'}</td>
+          <td>${r.createTime}</td>
+          <td>${r.owner}</td>
+        </tr>`
+        )
+        .join('')
+    }
+
+    function renderBadge() {
+      const badge = document.getElementById('sortBadge')
+      if (!sort) {
+        badge.classList.remove('show')
+        badge.textContent = ''
+        return
+      }
+      badge.classList.add('show')
+      badge.textContent = `排序:${LABEL[sort.prop]} · ${sort.order === 'asc' ? '正序(升序)' : '倒序(降序)'}`
+    }
+
+    function render() {
+      DATE_COLS.forEach((c) => renderHeader(c.prop, c.label))
+      renderBody()
+      renderBadge()
+    }
+
+    document.querySelector('.tabs').addEventListener('click', (e) => {
+      const btn = e.target.closest('.tab')
+      if (!btn) return
+      document.querySelectorAll('.tab').forEach((t) => t.classList.remove('active'))
+      btn.classList.add('active')
+      mode = btn.dataset.mode
+      const hints = {
+        cycle: '日期列:点击列名循环 无 → 升序 → 降序',
+        carets: '日期列:点上下三角切换升/降序;再点同一方向可取消',
+        popover: '日期列:点漏斗打开面板,在面板里选正序/倒序(本 Demo 简化为直接切换)'
+      }
+      document.getElementById('modeHint').textContent = hints[mode]
+      render()
+    })
+
+    document.querySelector('thead').addEventListener('click', (e) => {
+      const cycle = e.target.closest('[data-cycle]')
+      if (cycle) {
+        cycleSort(cycle.dataset.cycle)
+        return
+      }
+      const caret = e.target.closest('[data-caret]')
+      if (caret) {
+        setSort(caret.dataset.caret, caret.dataset.order)
+        return
+      }
+      const filter = e.target.closest('[data-filter]')
+      if (filter && mode === 'popover') {
+        const prop = filter.dataset.filter
+        const choice = window.prompt(
+          `${LABEL[prop]} 排序\n输入 asc=正序 / desc=倒序 / clear=清除`,
+          sort && sort.prop === prop ? sort.order : 'desc'
+        )
+        if (choice == null) return
+        const v = String(choice).trim().toLowerCase()
+        if (v === 'clear' || v === '') {
+          sort = null
+        } else if (v === 'asc' || v === 'desc') {
+          sort = { prop, order: v }
+        }
+        render()
+      }
+    })
+
+    render()
+  </script>
+</body>
+</html>

+ 192 - 0
docs/superpowers/specs/2026-09-08-crm-date-column-sort-design.md

@@ -0,0 +1,192 @@
+# CRM 日期列头双三角排序(客户 / 报价 / 合同)
+
+**日期**:2026-09-08  
+**状态**:待审阅  
+**交互 Demo**:`docs/crm-date-column-sort-demo.html`(样式 2 · 双三角)  
+**前置能力**:列头漏斗整库筛选(`CrmColFilterHeader` + `useServerColumnFilters`)
+
+---
+
+## 1. 背景与目标
+
+CRM 客户、报价、合同等列表已具备列头漏斗过滤,但日期列无法在列头切换正序/倒序。分页场景下不能只排当前页,必须服务端排序。
+
+### 目标
+
+1. 日期列(`ColumnFilterDef.type === 'datetime'`)列头增加双三角,支持升序 / 降序 / 取消。  
+2. 排序打整库;与现有列过滤、Tab、快捷搜索 **AND**;`total` / 换页 / 导出与当前排序一致。  
+3. 同一时刻仅一列生效;取消后恢复默认 `create_time DESC`。  
+4. 首批只改客户 + 报价 + 合同(含管理与审批共用列表页);其它 CRM 页后续再加。
+
+### 非目标(本批)
+
+- 文本 / 枚举 / 数字列排序  
+- 产品、调价函、线索、商机、合同变更/模板/审批记录等列表  
+- 多列组合排序、排序状态持久化(URL / localStorage)  
+- 用 `el-table` 内置 `sortable` 替换自定义列头
+
+---
+
+## 2. 已确认产品决策
+
+| # | 决策 |
+|---|------|
+| D1 | 交互:**双三角**(上下箭头);再点**同一方向**取消排序 |
+| D2 | 范围首批:**客户管理** + **报价单管理/审批** + **合同管理/审批** |
+| D3 | 审批与管理共用 `QuoteListPage` / `ContractListPage`,**一并支持**(无需单独隐藏) |
+| D4 | **仅日期列**(`datetime`)显示排序三角;其它有漏斗的列不加 |
+| D5 | 空值:升序时空值在最前,降序时空值在最后(与 MySQL 对 NULL 的默认次序一致) |
+| D6 | 架构:公共列头 + 查询参数 `sortField`/`sortOrder` + 后端字段白名单(方案 1);不用纯前端当前页排序 |
+
+---
+
+## 3. 首批范围
+
+### 3.1 改造
+
+| 层 | 路径 / 说明 |
+|----|-------------|
+| 列头 UI | `web-admin/src/components/business/crm-col-filter-header/index.vue`(及必要样式) |
+| 排序状态 | 新建小型 composable 或扩展 provide(如 `useColumnSort` / `crmColumnSort`),由列表页 `provide` |
+| 客户列表 | `web-admin/src/views/crm/customer/index.vue` |
+| 报价列表 | `web-admin/src/views/crm/quote/QuoteListPage.vue`(`mode=manage\|approve`) |
+| 合同列表 | `web-admin/src/views/crm/contract/ContractListPage.vue`(`mode=manage\|approve`) |
+| 后端客户 | list / export:`CustomerListBody`(及公海若本批不改则不动公海)+ `list_customers` 排序分支 |
+| 后端报价 | `QuoteListBody` + quote list/export CRUD 排序分支 |
+| 后端合同 | `ContractListQuery` + contract list/export CRUD 排序分支 |
+
+**客户公海**:本批产品范围写的是「客户」主列表;**不改公海**,除非实现时发现与客户共用同一排序模块且零成本——默认不做公海。
+
+### 3.2 日期列白名单(前端 prop → 后端仅允许这些)
+
+以各页现有 `columnFilterDefs` 中 `type: 'datetime'` 为准:
+
+**客户**(`customer/columnFilterDefs.ts`)  
+`lastTime`、`nextTime`、`dealTime`、`intoPoolTime`、`claimTime`、`protectTime`、`createTime`、`updateTime`
+
+**报价**(`quote/columnFilterDefs.ts`)  
+`quoteDate`、`expireDate`、`lastViewTime`、`createTime`、`updateTime`
+
+**合同**(`contract/columnFilterDefs.ts`)  
+`signDate`、`startDate`、`endDate`、`createTime`、`updateTime`
+
+映射到 ORM 字段时使用既有 snake_case 列(如 `createTime` → `create_time`)。非法 `sortField` 忽略并回退默认排序,不 500。
+
+---
+
+## 4. 产品与交互
+
+### 4.1 列头布局
+
+从左到右(居中列同样水平排列):
+
+1. 列标题文案  
+2. **双三角**(仅 `datetime`)  
+3. 漏斗过滤按钮(已有)
+
+视觉对齐 Fresh Mint:未激活三角 `#cbd5e1`;激活 `#059669`;可点区域约 14×10px×2,避免挤爆列头。参考 Demo「样式 2」。
+
+### 4.2 交互规则
+
+| 操作 | 结果 |
+|------|------|
+| 点上三角 | 该列 `asc`;若已是该列 `asc` → 清除排序 |
+| 点下三角 | 该列 `desc`;若已是该列 `desc` → 清除排序 |
+| 点另一日期列三角 | 替换为新列的方向 |
+| 清除排序 | 不传 `sortField`/`sortOrder`,后端默认 `create_time DESC` |
+| 藏列 | 若隐藏列正是当前排序列 → **清除排序**并重查(与藏列清过滤对称) |
+| 漏斗过滤变更 | 保留当前排序(AND) |
+
+不在工具栏强制展示「当前排序」徽章(Demo 仅示意);列头高亮三角即为状态。
+
+### 4.3 空值
+
+MySQL:`NULL` 小于非空 → `ASC` 时 NULL 在前,`DESC` 时 NULL 在后。本批直接 `ORDER BY <col> ASC|DESC`,**不**额外写 `IS NULL` 表达式,除非实测与预期不符再补。
+
+### 4.4 导出
+
+导出请求与列表同一套:现有列筛参数 + 可选 `sortField`/`sortOrder`。无排序时导出顺序与现网默认一致。
+
+---
+
+## 5. 架构
+
+### 5.1 查询参数
+
+| 参数 | 类型 | 说明 |
+|------|------|------|
+| `sortField` | string | 前端列 `prop`(camelCase),须在白名单内 |
+| `sortOrder` | `asc` \| `desc` | 与 `sortField` 成对出现;缺一则忽略 |
+
+与 `useServerColumnFilters.toQueryParams()` 合并进 list/export 请求体(POST body 或现网同等位置)。
+
+### 5.2 前端状态
+
+建议 `provide('crmColumnSort', api)`,与 `crmColumnFilters` 并列:
+
+```ts
+{
+  sortField: Ref<string | null>
+  sortOrder: Ref<'asc' | 'desc' | null>
+  setSort(prop: string, order: 'asc' | 'desc'): void  // 同向再点 → 清空
+  clearSort(): void
+  isSortActive(prop: string, order?: 'asc' | 'desc'): boolean
+  toQueryParams(): { sortField?: string; sortOrder?: string }
+  onColumnHidden(prop: string): void  // 若 prop 为当前排序列则 clear
+}
+```
+
+`CrmColFilterHeader`:`def.type === 'datetime'` 且 inject 到 sort api 时渲染双三角;无 sort provide 的页面(产品等)行为不变,仅漏斗。
+
+列表页:`setSort` / 过滤 `onChange` → `pageNum = 1` → `getList()`。
+
+### 5.3 后端
+
+在客户 / 报价 / 合同的 list(及对应 export)组装 query 处:
+
+```text
+if sortField in WHITELIST and sortOrder in {asc, desc}:
+    order_by(mapped_column.asc() | .desc())
+else:
+    order_by(create_time.desc())  # 现网默认
+```
+
+白名单为 dict:`prop → Column`;禁止动态拼接任意字符串进 SQL。
+
+Schema:`CustomerListBody` / `QuoteListBody` / `ContractListQuery`(及 export 若独立 body)增加可选 `sortField`、`sortOrder`。
+
+### 5.4 单元边界
+
+| 单元 | 职责 | 依赖 |
+|------|------|------|
+| `CrmColFilterHeader` | 展示漏斗 + 条件渲染双三角,转发 sort 事件 | inject filters + sort |
+| `useColumnSort`(名可调整) | 单列 sort 状态与 query 片段 | 无后端 |
+| 各 ListPage | 合并 filter+sort 参数、藏列联动、拉数 | composable + API |
+| CRUD list | 白名单 order_by | Schema 字段 |
+
+---
+
+## 6. 测试要点
+
+1. 客户:对 `createTime` 升/降/取消,换页后顺序仍正确;与漏斗日期段同时生效。  
+2. 报价管理 + 报价审批:对 `quoteDate`/`expireDate` 排序;审批模式同样可见三角。  
+3. 合同管理 + 合同审批:对 `signDate`/`endDate` 排序。  
+4. 非法 `sortField`(抓包篡改)→ 回退默认,不报错。  
+5. 含空日期列(如客户 `dealTime`):升序空在前、降序空在后。  
+6. 隐藏当前排序列 → 排序清除,列表恢复默认序。  
+7. 导出顺序与当前列表排序一致(在导出支持 body 的前提下)。  
+8. 产品/调价函等未改页面:列头无三角、行为无回归。
+
+---
+
+## 7. 风险与后续
+
+- **风险**:三套 list/export 漏接排序导致「列表排了导出没排」——实现时 list 与 export 共用同一 order 辅助函数。  
+- **后续**:产品、调价函、线索、商机等复制同一 provide + 后端白名单即可;数字列排序另开需求。
+
+---
+
+## 8. 文档与 Demo
+
+- 本设计:`docs/superpowers/specs/2026-09-08-crm-date-column-sort-design.md`  
+- 交互 Demo:`docs/crm-date-column-sort-demo.html`