zkxw/mobile-ui/zkxw-mobile-oa-mine-card-index-badge-demo.html

<!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 {
      --brand: #0a9f6d;
      --brand-dark: #087f57;
      --brand-soft: #e9f9f2;
      --warn: #d97706;
      --warn-soft: #fff7e8;
      --danger: #ef4444;
      --nav-bg: #ecfdf5;
      --page-bg: #f5f6f8;
      --text: #1f2329;
      --text-muted: #8f959e;
      --border: #e8eaed;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", -apple-system, system-ui, sans-serif;
      color: var(--text);
      background:
        radial-gradient(900px 420px at 8% -8%, rgba(10, 159, 109, 0.12), transparent 55%),
        linear-gradient(180deg, #f8fffc 0%, #f4f7fb 50%, #f7f8fa 100%);
      line-height: 1.45;
    }
    .stage { max-width: 1180px; margin: 0 auto; padding: 28px 16px 64px; }
    .hero h1 { margin: 0 0 8px; font-size: 22px; font-weight: 720; }
    .hero p { margin: 0; color: #64748b; font-size: 14px; max-width: 860px; }
    .rec {
      margin: 16px 0 0;
      padding: 14px 16px;
      border-radius: 14px;
      background: var(--brand-soft);
      border: 1px solid #b7ebd4;
      font-size: 13px;
      color: #166534;
      line-height: 1.55;
    }
    .rec b { color: var(--brand-dark); }

    .tabs {
      display: flex; flex-wrap: wrap; gap: 10px;
      margin: 20px 0 18px;
    }
    .tab {
      appearance: none; border: 1px solid #e2e8f0; background: #fff;
      border-radius: 999px; padding: 10px 16px; font-size: 13px;
      font-weight: 600; color: #475569; cursor: pointer;
    }
    .tab.is-active {
      color: var(--brand-dark); border-color: var(--brand);
      background: var(--brand-soft);
      box-shadow: 0 0 0 3px rgba(10, 159, 109, 0.16);
    }
    .tab .badge {
      display: inline-block; margin-left: 6px;
      padding: 1px 7px; border-radius: 999px;
      font-size: 11px; font-weight: 700;
      background: #fef3c7; color: #b45309;
    }
    .tab.is-active .badge {
      background: #fff; color: var(--brand-dark);
    }

    .layout {
      display: grid;
      grid-template-columns: minmax(240px, 300px) 1fr;
      gap: 20px; align-items: start;
    }
    @media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }

    .panel {
      background: rgba(255,255,255,.94);
      border: 1px solid #e2e8f0; border-radius: 16px; padding: 16px;
      box-shadow: 0 10px 28px rgba(15,23,42,.05);
    }
    .panel h2 { margin: 0 0 4px; font-size: 15px; }
    .panel .sub { margin: 0 0 10px; font-size: 12px; color: #64748b; }
    .panel ul { margin: 0; padding-left: 18px; font-size: 13px; color: #475569; }
    .panel li { margin: 6px 0; }
    .panel .ok {
      margin-top: 12px; padding: 10px 12px; border-radius: 10px;
      background: #ecfdf5; border: 1px solid #a7f3d0;
      font-size: 12px; color: #047857;
    }
    .panel .pick {
      margin-top: 10px; padding: 10px 12px; border-radius: 10px;
      background: #fff7e8; border: 1px solid #fde68a;
      font-size: 12px; color: #92400e;
    }

    .phones { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
    .phone {
      width: 375px; background: #fff; border-radius: 28px; overflow: hidden;
      box-shadow: 0 0 0 1px rgb(15 23 42 / 6%), 0 18px 40px rgb(15 23 42 / 12%);
    }
    .cap {
      text-align: center; font-size: 11px; font-weight: 650; color: #64748b;
      padding: 8px; background: #f8fafc; border-bottom: 1px solid #eef2f0;
    }
    .nav {
      height: 44px; display: flex; align-items: center; padding: 0 8px 0 4px;
      background: var(--nav-bg); border-bottom: 1px solid #d8f3e5;
      position: relative;
    }
    .nav-back {
      width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
      color: #0f291e; flex-shrink: 0;
    }
    .nav-back::before {
      content: ""; width: 10px; height: 10px;
      border-left: 2px solid #0f291e; border-bottom: 2px solid #0f291e;
      transform: rotate(45deg); margin-left: 4px;
    }
    .nav-title {
      position: absolute; left: 50%; transform: translateX(-50%);
      font-size: 16px; font-weight: 650; color: #0f291e;
    }

    .page {
      min-height: 640px;
      background: var(--page-bg);
      padding-bottom: 24px;
    }
    .toolbar {
      padding: 8px 12px;
      background: #fff;
      border-bottom: 1px solid #f1f5f9;
    }
    .search-box {
      height: 36px;
      display: flex; align-items: center; gap: 8px;
      padding: 0 12px; border-radius: 10px;
      background: #fafafa; border: 1px solid #e8eaed;
    }
    .search-ico {
      width: 13px; height: 13px; border: 1.5px solid #94a3b8; border-radius: 50%;
      position: relative; flex-shrink: 0;
    }
    .search-ico::after {
      content: ""; position: absolute; width: 6px; height: 1.5px;
      right: -4px; bottom: -2px; background: #94a3b8; border-radius: 2px;
      transform: rotate(45deg);
    }
    .search-ph { font-size: 13px; color: #b0b7c3; }

    .list {
      padding: 10px 12px 0;
      display: flex; flex-direction: column; gap: 10px;
    }

    /* ===== 对齐 mine/index.vue 现有卡片 ===== */
    .dd-card {
      position: relative;
      width: 100%;
      background: #fff;
      border-radius: 14px;
      padding: 14px 14px 12px;
      box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
      overflow: hidden;
    }
    .dd-card__head {
      display: flex; align-items: flex-start; gap: 8px;
    }
    .dd-card__title {
      flex: 1; min-width: 0;
      font-size: 15px; font-weight: 700; line-height: 1.4; color: #1f2329;
    }
    .dd-card__time {
      flex-shrink: 0; font-size: 12px; line-height: 1.4; color: #8f959e; padding-top: 2px;
    }
    .dd-card__meta { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
    .dd-card__meta-line {
      font-size: 13px; line-height: 1.45; color: #8f959e;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .dd-card__foot {
      margin-top: 12px; display: flex; align-items: center;
      justify-content: space-between; gap: 8px;
    }
    .dd-card__hint-tag {
      max-width: 70%;
      font-size: 11px; font-weight: 650; line-height: 1.2;
      padding: 4px 9px; border-radius: 999px;
      background: rgba(217, 119, 6, 0.12); color: #d97706;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .dd-card__hint-tag.is-success {
      background: rgba(10, 159, 109, 0.12); color: #0a9f6d;
    }
    .dd-card__hint-tag.is-danger {
      background: rgba(239, 68, 68, 0.12); color: #ef4444;
    }
    .dd-card__status {
      flex-shrink: 0; font-size: 12px; font-weight: 600; color: #d97706;
    }
    .dd-card__status.is-success { color: #0a9f6d; }
    .dd-card__status.is-danger { color: #ef4444; }

    /* ---------- A：左上折角序号 ---------- */
    .style-a .dd-card { padding-left: 14px; }
    .style-a .idx {
      position: absolute; top: 0; left: 0;
      width: 0; height: 0;
      border-style: solid;
      border-width: 34px 34px 0 0;
      border-color: var(--brand) transparent transparent transparent;
    }
    .style-a .idx span {
      position: absolute; top: -30px; left: 4px;
      font-size: 10px; font-weight: 800; color: #fff;
      line-height: 1; letter-spacing: -0.02em;
    }

    /* ---------- B：圆点序号（标题左侧）推荐 ---------- */
    .style-b .dd-card__head { align-items: center; }
    .style-b .idx {
      flex-shrink: 0;
      width: 22px; height: 22px; border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 800; color: #fff;
      background: var(--brand);
      box-shadow: 0 2px 6px rgba(10, 159, 109, 0.28);
    }
    .style-b .idx.is-warn { background: var(--warn); box-shadow: 0 2px 6px rgba(217, 119, 6, 0.28); }
    .style-b .idx.is-danger { background: var(--danger); box-shadow: 0 2px 6px rgba(239, 68, 68, 0.28); }
    .style-b .idx.is-mute { background: #94a3b8; box-shadow: none; }

    /* ---------- C：左色条 + 小号序号 ---------- */
    .style-c .dd-card {
      padding-left: 18px;
      border-left: 3px solid var(--brand);
    }
    .style-c .dd-card.is-warn { border-left-color: var(--warn); }
    .style-c .dd-card.is-danger { border-left-color: var(--danger); }
    .style-c .dd-card.is-mute { border-left-color: #94a3b8; }
    .style-c .idx {
      flex-shrink: 0;
      min-width: 18px;
      font-size: 12px; font-weight: 800; color: var(--brand);
      font-variant-numeric: tabular-nums;
      padding-top: 1px;
    }
    .style-c .dd-card.is-warn .idx { color: var(--warn); }
    .style-c .dd-card.is-danger .idx { color: var(--danger); }
    .style-c .dd-card.is-mute .idx { color: #94a3b8; }

    /* ---------- D：金额角标（有金额才显示） ---------- */
    .style-d .price {
      position: absolute; top: 0; left: 0;
      max-width: 72%;
      padding: 4px 10px 4px 8px;
      border-radius: 0 0 10px 0;
      background: linear-gradient(135deg, #0a9f6d 0%, #059669 100%);
      color: #fff;
      font-size: 11px; font-weight: 750;
      letter-spacing: 0.01em;
      box-shadow: 2px 2px 8px rgba(10, 159, 109, 0.22);
      white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis;
    }
    .style-d .dd-card.has-price { padding-top: 30px; }
    .style-d .price .yen { opacity: 0.88; margin-right: 1px; font-weight: 600; }
    .style-d .price.is-empty {
      background: #e2e8f0; color: #64748b; box-shadow: none; font-weight: 650;
    }

    /* ---------- E：序号胶囊叠左上 ---------- */
    .style-e .idx {
      position: absolute; top: 8px; left: 8px;
      min-width: 20px; height: 18px; padding: 0 6px;
      border-radius: 6px;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 10px; font-weight: 800; color: var(--brand-dark);
      background: var(--brand-soft);
      border: 1px solid #b7ebd4;
      font-variant-numeric: tabular-nums;
    }
    .style-e .dd-card { padding-top: 32px; }

    .legend {
      margin-top: 22px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 12px;
    }
    .legend .box {
      background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
      padding: 12px 14px; font-size: 12px; color: #475569;
    }
    .legend h3 { margin: 0 0 6px; font-size: 13px; color: #0f291e; }
    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="stage">
    <div class="hero">
      <h1>我发起的 · 列表卡片左上角序号 / 价格角标</h1>
      <p>
        对齐 <code>mobile-h5/pages/oa/mine/index</code> 现有钉钉风卡片（标题 / 相对时间 / previewFields / 待处理人 + 状态）。
        对比五种「左上角」处理方式，便于选型后落地。
      </p>
      <div class="rec">
        <b>已选定：A 折角序号</b> —— 左上品牌绿三角 + 白字两位序号（01、02…）；
        序号跨页连续；不随状态变色。详见
        <code>docs/superpowers/specs/2026-08-13-oa-mine-card-corner-index-design.md</code>。
      </div>
    </div>

    <div class="tabs" id="tabs">
      <button type="button" class="tab is-active" data-k="a">A 折角序号<span class="badge">选定</span></button>
      <button type="button" class="tab" data-k="b">B 圆点序号</button>
      <button type="button" class="tab" data-k="c">C 左色条+序号</button>
      <button type="button" class="tab" data-k="e">E 左上胶囊</button>
      <button type="button" class="tab" data-k="d">D 金额角标</button>
    </div>

    <div class="layout">
      <aside class="panel" id="side">
        <h2>A 折角序号</h2>
        <p class="sub">卡片左上三角折角</p>
        <ul>
          <li>视觉强、像「价签/角标」</li>
          <li>会略微挤压标题可读区</li>
          <li>长序号（两位数）空间紧</li>
        </ul>
        <div class="ok">产品已选定本方案，仅落地「我发起的」。</div>
      </aside>

      <div class="phones">
        <div class="phone">
          <div class="cap" id="cap">A 折角序号 · 选定 · 375px</div>
          <div class="nav">
            <div class="nav-back" aria-hidden="true"></div>
            <div class="nav-title">我发起的</div>
          </div>
          <div class="page">
            <div class="toolbar">
              <div class="search-box">
                <span class="search-ico" aria-hidden="true"></span>
                <span class="search-ph">搜索流程名称</span>
              </div>
            </div>
            <div class="list style-b" id="list"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="legend">
      <div class="box">
        <h3>序号规则</h3>
        与 Web 四个中心一致：跨页连续<br />
        <code>(page - 1) * pageSize + index + 1</code><br />
        本 Demo 假设第 1 页，pageSize=10。
      </div>
      <div class="box">
        <h3>「价格」从哪来</h3>
        D 方案从 <code>previewFields</code> 里识别含「金额」的字段；
        无金额则显示「无金额」灰角标或隐藏（可配置）。
      </div>
      <div class="box">
        <h3>落地范围建议</h3>
        先只改「我发起的」；若观感好，再同步待办 / 已办 / 抄送 / 草稿，避免五页风格分裂。
      </div>
    </div>
  </div>

  <script>
    const ROWS = [
      {
        title: '费用报销',
        time: '09:12',
        meta: ['报销金额:1280.00', '事由:差旅交通'],
        amount: '1,280.00',
        hint: '待张敏处理',
        status: '进行中',
        tone: 'warn'
      },
      {
        title: '请假申请',
        time: '昨天',
        meta: ['请假类型:事假', '请假天数:1'],
        amount: null,
        hint: '待李华处理',
        status: '进行中',
        tone: 'warn'
      },
      {
        title: '采购申请',
        time: '前天',
        meta: ['采购金额:8600.00', '供应商:华东物资'],
        amount: '8,600.00',
        hint: '审批完成',
        status: '已完成',
        tone: 'success'
      },
      {
        title: '出差申请',
        time: '3天前',
        meta: ['目的地:上海', '天数:2'],
        amount: null,
        hint: '已打回',
        status: '已打回',
        tone: 'danger'
      },
      {
        title: '用章申请',
        time: '2026.08.01',
        meta: ['用章类型:公章', '份数:2'],
        amount: null,
        hint: '我发起的',
        status: '已撤销',
        tone: 'mute'
      }
    ]

    const SIDE = {
      a: {
        title: 'A 折角序号',
        sub: '卡片左上三角折角',
        items: [
          '视觉强、像「价签/角标」',
          '会略微挤压标题可读区',
          '长序号（两位数）空间紧'
        ],
        note: 'ok',
        noteText: '产品已选定本方案，仅落地「我发起的」。'
      },
      b: {
        title: 'B 圆点序号',
        sub: '标题行左侧 · 状态同色',
        items: [
          '序号：(page-1)*pageSize + i + 1',
          '色：进行中琥珀 / 通过绿 / 拒绝红 / 其它灰',
          '不占绝对定位，标题不被遮挡'
        ],
        note: 'pick',
        noteText: '备选；本期不采用。'
      },
      c: {
        title: 'C 左色条 + 序号',
        sub: '状态色条 + 数字',
        items: [
          '左边框表达状态，序号为纯数字',
          '与草稿箱「左色条」Demo 可对齐',
          '标题仍完整可读'
        ],
        note: 'ok',
        noteText: '若五列表已统一左色条，这是自然延伸。'
      },
      d: {
        title: 'D 金额角标',
        sub: '左上价格条 · 无则灰/隐',
        items: [
          '从 previewFields 抽「*金额*」',
          '有金额：¥1,280.00 绿角标',
          '无金额：灰「无金额」或隐藏'
        ],
        note: 'pick',
        noteText: '「价格序号」若指金额露出，用本方案；序号另议。'
      },
      e: {
        title: 'E 左上胶囊',
        sub: '绝对定位浅绿胶囊',
        items: [
          '不挤标题行，但卡片整体变高',
          '视觉弱于折角、强于纯色条',
          '两位数序号更友好'
        ],
        note: 'ok',
        noteText: '折中方案；若标题很长可优先于 A。'
      }
    }

    const CAP = {
      a: 'A 折角序号 · 选定 · 375px',
      b: 'B 圆点序号 · 375px',
      c: 'C 左色条+序号 · 375px',
      d: 'D 金额角标 · 375px',
      e: 'E 左上胶囊 · 375px'
    }

    function pad(n) {
      return n < 10 ? '0' + n : String(n)
    }

    function render(style) {
      const list = document.getElementById('list')
      list.className = 'list style-' + style
      list.innerHTML = ROWS.map((row, i) => {
        const n = i + 1
        const tone = row.tone === 'mute' ? 'info' : row.tone
        const hintCls = row.tone === 'mute' ? '' : ' is-' + (row.tone === 'warn' ? '' : row.tone)
        const hintClass =
          'dd-card__hint-tag' +
          (row.tone === 'success' ? ' is-success' : '') +
          (row.tone === 'danger' ? ' is-danger' : '')
        const statusClass =
          'dd-card__status' +
          (row.tone === 'success' ? ' is-success' : '') +
          (row.tone === 'danger' ? ' is-danger' : '')

        let badge = ''
        let cardExtra = ''
        let headPrefix = ''

        if (style === 'a') {
          badge = '<div class="idx" aria-hidden="true"><span>' + pad(n) + '</span></div>'
        } else if (style === 'b') {
          const cls =
            'idx' +
            (row.tone === 'warn' ? ' is-warn' : '') +
            (row.tone === 'success' ? '' : '') +
            (row.tone === 'danger' ? ' is-danger' : '') +
            (row.tone === 'mute' ? ' is-mute' : '')
          // success 用默认绿；warn/danger/mute 覆盖
          let bCls = 'idx'
          if (row.tone === 'warn') bCls += ' is-warn'
          else if (row.tone === 'danger') bCls += ' is-danger'
          else if (row.tone === 'mute') bCls += ' is-mute'
          headPrefix = '<span class="' + bCls + '">' + n + '</span>'
        } else if (style === 'c') {
          cardExtra =
            ' is-' +
            (row.tone === 'mute' ? 'mute' : row.tone === 'success' ? 'success' : row.tone)
          // border uses warn/danger/mute; success stays brand via default
          if (row.tone === 'success') cardExtra = ''
          headPrefix = '<span class="idx">' + pad(n) + '</span>'
        } else if (style === 'd') {
          if (row.amount) {
            badge =
              '<div class="price"><span class="yen">¥</span>' +
              row.amount +
              '</div>'
            cardExtra = ' has-price'
          } else {
            badge = '<div class="price is-empty">无金额</div>'
            cardExtra = ' has-price'
          }
        } else if (style === 'e') {
          badge = '<span class="idx">' + pad(n) + '</span>'
        }

        const meta = row.meta
          .map((m) => '<span class="dd-card__meta-line">' + m + '</span>')
          .join('')

        return (
          '<div class="dd-card' +
          cardExtra +
          '">' +
          badge +
          '<div class="dd-card__head">' +
          headPrefix +
          '<div class="dd-card__title">' +
          row.title +
          '</div>' +
          '<div class="dd-card__time">' +
          row.time +
          '</div>' +
          '</div>' +
          '<div class="dd-card__meta">' +
          meta +
          '</div>' +
          '<div class="dd-card__foot">' +
          '<span class="' +
          hintClass +
          '">' +
          row.hint +
          '</span>' +
          '<span class="' +
          statusClass +
          '">' +
          row.status +
          '</span>' +
          '</div>' +
          '</div>'
        )
      }).join('')

      const s = SIDE[style]
      const side = document.getElementById('side')
      side.innerHTML =
        '<h2>' +
        s.title +
        '</h2>' +
        '<p class="sub">' +
        s.sub +
        '</p>' +
        '<ul>' +
        s.items.map((t) => '<li>' + t + '</li>').join('') +
        '</ul>' +
        '<div class="' +
        s.note +
        '">' +
        s.noteText +
        '</div>'

      document.getElementById('cap').textContent = CAP[style]
    }

    document.getElementById('tabs').addEventListener('click', (e) => {
      const btn = e.target.closest('.tab')
      if (!btn) return
      document.querySelectorAll('.tab').forEach((t) => t.classList.remove('is-active'))
      btn.classList.add('is-active')
      render(btn.dataset.k)
    })

    render('a')
  </script>
</body>
</html>