zkxw/docs/demos/oa-cc-unread-badge-demo.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>OA 抄送我的 · 未读角标 Demo</title>
  <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;
      --bg-page: #f8fafc;
      --surface: #ffffff;
      --table-head: #f8fafc;
      --row-alt: #fafafa;
      --shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      --radius: 10px;
      --warn: #d97706;
      --warn-bg: #fffbeb;
      --danger: #fd4e4e;
      --badge-zero: #94a3b8;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
      font-size: 14px;
      line-height: 1.5;
      color: var(--text);
      background: #eef2f0;
      padding: 24px;
    }
    .page-head {
      max-width: 1180px;
      margin: 0 auto 16px;
    }
    .page-head h1 {
      margin: 0 0 6px;
      font-size: 22px;
      font-weight: 700;
    }
    .page-head p {
      margin: 0;
      color: var(--text-muted);
      font-size: 13px;
    }
    .shell-wrap {
      max-width: 1180px;
      margin: 0 auto;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .shell { display: flex; min-height: 620px; }
    .sidebar {
      width: 220px;
      flex-shrink: 0;
      border-right: 1px solid var(--border);
      background: #fff;
      padding: 16px 12px;
    }
    .logo {
      font-weight: 700;
      padding: 4px 12px 16px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 12px;
    }
    .logo span { color: var(--primary); }
    .nav-group {
      font-size: 12px;
      font-weight: 700;
      color: var(--text-muted);
      padding: 8px 12px;
      letter-spacing: 0.02em;
    }
    .nav-item {
      position: relative;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 12px;
      border-radius: 8px;
      color: var(--text);
      text-decoration: none;
      font-size: 13px;
      margin-bottom: 2px;
      cursor: pointer;
      border: none;
      background: transparent;
      width: 100%;
      text-align: left;
      font-family: inherit;
    }
    .nav-item:hover { background: #f1f5f9; }
    .nav-item.active {
      background: var(--primary-bg);
      color: var(--primary-dark);
      font-weight: 600;
    }
    .nav-item .menu-name { flex: 1; min-width: 0; }
    /* 对齐 web-admin .art-text-badge */
    .art-text-badge {
      min-width: 20px;
      height: 18px;
      line-height: 17px;
      padding: 0 5px;
      font-size: 10px;
      font-weight: 700;
      color: #fff;
      text-align: center;
      background: var(--danger);
      border-radius: 4px;
      flex-shrink: 0;
    }
    .art-text-badge.is-zero {
      background: var(--badge-zero);
    }
    .nav-item.parent { font-weight: 600; }
    .nav-children { padding-left: 8px; margin-bottom: 8px; }
    .main { flex: 1; background: var(--bg-page); padding: 20px; min-width: 0; }
    .content-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
    }
    .panel-top {
      padding: 16px 20px;
      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;
      background: var(--primary);
      border-radius: 2px;
    }
    .panel-meta {
      margin-left: auto;
      font-size: 12px;
      color: var(--text-muted);
    }
    .panel-meta strong { color: var(--danger); }
    .list-body { padding: 0; }
    table { width: 100%; border-collapse: collapse; }
    th, td {
      padding: 12px 14px;
      text-align: center;
      border-bottom: 1px solid #eef2f0;
      font-size: 13px;
    }
    th {
      background: var(--table-head);
      color: var(--text-muted);
      font-weight: 600;
      font-size: 12px;
    }
    tr:nth-child(even) td { background: var(--row-alt); }
    tr.unread td:first-child .title-cell {
      font-weight: 700;
    }
    .title-cell {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      justify-content: center;
    }
    .dot-unread {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--danger);
      flex-shrink: 0;
    }
    .tag {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 600;
    }
    .tag-running { background: var(--primary-bg); color: var(--primary-dark); }
    .tag-done { background: #f1f5f9; color: var(--text-muted); }
    .tag-unread { background: #fef2f2; color: #dc2626; }
    .tag-read { background: #f1f5f9; color: var(--text-muted); }
    .ops { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      height: 30px;
      padding: 0 10px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: #fff;
      color: var(--text);
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      font-family: inherit;
    }
    .btn:hover { background: #f8fafc; }
    .btn-primary {
      color: var(--primary-dark);
      border-color: #a7f3d0;
      background: var(--primary-bg);
    }
    .btn-primary:hover { background: #d1fae5; }
    .btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
    .toast {
      position: fixed;
      right: 28px;
      bottom: 28px;
      background: #0f172a;
      color: #fff;
      padding: 10px 14px;
      border-radius: 8px;
      font-size: 13px;
      opacity: 0;
      transform: translateY(8px);
      transition: 0.2s ease;
      pointer-events: none;
      z-index: 20;
    }
    .toast.show { opacity: 1; transform: translateY(0); }
    .note {
      max-width: 1180px;
      margin: 14px auto 0;
      padding: 12px 14px;
      background: #fff;
      border: 1px dashed #a7f3d0;
      border-radius: 8px;
      color: var(--text-muted);
      font-size: 13px;
    }
    .note strong { color: var(--primary-dark); }
    .note ul { margin: 8px 0 0; padding-left: 18px; }
    .ref-row {
      max-width: 1180px;
      margin: 16px auto 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .ref-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 14px 16px;
    }
    .ref-card h3 {
      margin: 0 0 10px;
      font-size: 13px;
      font-weight: 700;
    }
    .ref-menu {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      border-radius: 8px;
      background: var(--primary-bg);
      color: var(--primary-dark);
      font-weight: 600;
      font-size: 13px;
    }
    .ref-menu .spacer { flex: 1; }
    .legend {
      margin-top: 8px;
      font-size: 12px;
      color: var(--text-muted);
    }
    /* 简易详情抽屉示意 */
    .drawer-mask {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.35);
      z-index: 30;
      align-items: stretch;
      justify-content: flex-end;
    }
    .drawer-mask.show { display: flex; }
    .drawer {
      width: min(420px, 100%);
      background: #fff;
      box-shadow: -8px 0 30px rgba(0, 0, 0, 0.12);
      display: flex;
      flex-direction: column;
    }
    .drawer-head {
      padding: 16px 18px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .drawer-head h3 { margin: 0; font-size: 15px; flex: 1; }
    .drawer-body { padding: 18px; flex: 1; color: var(--text-muted); font-size: 13px; }
    .drawer-body dl { margin: 0; display: grid; gap: 10px; }
    .drawer-body dt { font-size: 11px; color: var(--text-muted); }
    .drawer-body dd { margin: 2px 0 0; color: var(--text); font-weight: 600; }
    .drawer-foot {
      padding: 12px 18px;
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }
    .btn-lg { height: 36px; padding: 0 14px; font-size: 13px; }
    .btn-main {
      background: var(--primary);
      border-color: var(--primary);
      color: #fff;
    }
    .btn-main:hover { background: var(--primary-dark); }
  </style>
</head>
<body>
  <div class="page-head">
    <h1>OA「抄送我的」未读角标 · Demo</h1>
    <p>侧栏数字对齐「质检工单」红色文字角标；列表支持「已读」，点「查看」默认标记已读。</p>
  </div>

  <div class="shell-wrap">
    <div class="shell">
      <aside class="sidebar">
        <div class="logo">陇耘<span>鲜达</span></div>
        <div class="nav-group">质量检测（参照）</div>
        <div class="nav-item parent">
          <span class="menu-name">质检工单</span>
          <span class="art-text-badge">12</span>
        </div>
        <div class="nav-group">OA审批</div>
        <div class="nav-children">
          <button class="nav-item" type="button">待处理</button>
          <button class="nav-item" type="button">已处理</button>
          <button class="nav-item" type="button">我发起的</button>
          <button class="nav-item active" type="button" id="nav-cc">
            <span class="menu-name">抄送我的</span>
            <span class="art-text-badge" id="menu-badge">3</span>
          </button>
          <button class="nav-item" type="button">草稿箱</button>
        </div>
      </aside>

      <main class="main">
        <section class="content-card">
          <div class="panel-top">
            <h2>抄送我的</h2>
            <div class="panel-meta">未读 <strong id="unread-count">3</strong> 条 · 可点操作栏按钮体验</div>
          </div>
          <div class="list-body">
            <table>
              <thead>
                <tr>
                  <th style="min-width:68px">序号</th>
                  <th style="min-width:160px">流程名称</th>
                  <th style="min-width:100px">申请人</th>
                  <th style="min-width:150px">申请时间</th>
                  <th style="min-width:110px">当前节点</th>
                  <th style="min-width:100px">流程状态</th>
                  <th style="min-width:90px">阅读状态</th>
                  <th style="min-width:280px">操作</th>
                </tr>
              </thead>
              <tbody id="tbody"></tbody>
            </table>
          </div>
        </section>
      </main>
    </div>
  </div>

  <div class="ref-row">
    <div class="ref-card">
      <h3>参照：质检工单菜单角标</h3>
      <div class="ref-menu">
        <span>质检工单</span>
        <span class="spacer"></span>
        <span class="art-text-badge">12</span>
      </div>
      <p class="legend">红色小块数字 · 0 时灰底（本 Demo 未读为 0 时隐藏角标，也可改成灰「0」）</p>
    </div>
    <div class="ref-card">
      <h3>本需求：抄送我的</h3>
      <div class="ref-menu">
        <span>抄送我的</span>
        <span class="spacer"></span>
        <span class="art-text-badge" id="ref-badge">3</span>
      </div>
      <p class="legend">统计「抄送给我且尚未阅读」的记录数；列表操作可消减</p>
    </div>
  </div>

  <div class="note">
    <strong>交互约定（Demo 可点）：</strong>
    <ul>
      <li><strong>已读</strong>：仅标记已读，不打开详情；按钮在已读后禁用。</li>
      <li><strong>查看</strong>：打开详情示意抽屉，同时默认标记为已读，侧栏数字同步减少。</li>
      <li>未读行：流程名称前有红色圆点；阅读状态列显示「未读 / 已读」Tag。</li>
    </ul>
  </div>

  <div class="drawer-mask" id="drawer">
    <div class="drawer">
      <div class="drawer-head">
        <h3 id="drawer-title">审批详情</h3>
        <button class="btn btn-lg" type="button" id="drawer-close">关闭</button>
      </div>
      <div class="drawer-body">
        <dl>
          <div>
            <dt>流程名称</dt>
            <dd id="d-name">-</dd>
          </div>
          <div>
            <dt>申请人</dt>
            <dd id="d-user">-</dd>
          </div>
          <div>
            <dt>申请时间</dt>
            <dd id="d-time">-</dd>
          </div>
          <div>
            <dt>说明</dt>
            <dd style="font-weight:500;color:var(--text-muted)">打开详情即视为已读（与需求一致）。</dd>
          </div>
        </dl>
      </div>
      <div class="drawer-foot">
        <button class="btn btn-lg btn-main" type="button" id="drawer-ok">知道了</button>
      </div>
    </div>
  </div>

  <div class="toast" id="toast"></div>

  <script>
    const rows = [
      { id: '1', name: '请假申请', user: '张三', time: '2026-08-05 09:12', node: '部门负责人', status: 'running', read: false },
      { id: '2', name: '费用报销', user: '李四', time: '2026-08-04 16:40', node: '财务审核', status: 'running', read: false },
      { id: '3', name: '出差申请', user: '王五', time: '2026-08-03 11:05', node: '结束', status: 'done', read: false },
      { id: '4', name: '用章申请', user: '赵六', time: '2026-08-01 14:22', node: '结束', status: 'done', read: true },
      { id: '5', name: '采购申请', user: '钱七', time: '2026-07-28 10:08', node: '总经理', status: 'running', read: true }
    ]

    const tbody = document.getElementById('tbody')
    const menuBadge = document.getElementById('menu-badge')
    const refBadge = document.getElementById('ref-badge')
    const unreadCountEl = document.getElementById('unread-count')
    const toastEl = document.getElementById('toast')
    const drawer = document.getElementById('drawer')

    function unreadCount() {
      return rows.filter((r) => !r.read).length
    }

    function formatBadge(n) {
      if (n <= 0) return ''
      return n > 99 ? '99+' : String(n)
    }

    function syncBadge() {
      const n = unreadCount()
      const text = formatBadge(n)
      unreadCountEl.textContent = String(n)
      ;[menuBadge, refBadge].forEach((el) => {
        if (!text) {
          el.style.display = 'none'
          el.textContent = ''
        } else {
          el.style.display = ''
          el.textContent = text
          el.classList.toggle('is-zero', false)
        }
      })
    }

    function toast(msg) {
      toastEl.textContent = msg
      toastEl.classList.add('show')
      clearTimeout(toast._t)
      toast._t = setTimeout(() => toastEl.classList.remove('show'), 1600)
    }

    function markRead(id, source) {
      const row = rows.find((r) => r.id === id)
      if (!row || row.read) return false
      row.read = true
      render()
      toast(source === 'view' ? '已查看，标记为已读' : '已标记为已读')
      return true
    }

    function openDetail(id) {
      const row = rows.find((r) => r.id === id)
      if (!row) return
      markRead(id, 'view')
      document.getElementById('drawer-title').textContent = '抄送详情'
      document.getElementById('d-name').textContent = row.name
      document.getElementById('d-user').textContent = row.user
      document.getElementById('d-time').textContent = row.time
      drawer.classList.add('show')
    }

    function closeDrawer() {
      drawer.classList.remove('show')
    }

    function render() {
      tbody.innerHTML = rows
        .map((r, i) => {
          const statusTag =
            r.status === 'running'
              ? '<span class="tag tag-running">进行中</span>'
              : '<span class="tag tag-done">已完成</span>'
          const readTag = r.read
            ? '<span class="tag tag-read">已读</span>'
            : '<span class="tag tag-unread">未读</span>'
          const title = r.read
            ? `<span class="title-cell">${r.name}</span>`
            : `<span class="title-cell"><span class="dot-unread"></span>${r.name}</span>`
          return `<tr class="${r.read ? '' : 'unread'}" data-id="${r.id}">
            <td>${i + 1}</td>
            <td>${title}</td>
            <td>${r.user}</td>
            <td>${r.time}</td>
            <td>${r.node}</td>
            <td>${statusTag}</td>
            <td>${readTag}</td>
            <td>
              <div class="ops">
                <button class="btn btn-primary" data-act="view" data-id="${r.id}" type="button">👁 查看</button>
                <button class="btn" data-act="read" data-id="${r.id}" type="button" ${r.read ? 'disabled' : ''}>✓ 已读</button>
                <button class="btn" type="button" disabled>🖨 打印</button>
              </div>
            </td>
          </tr>`
        })
        .join('')
      syncBadge()
    }

    tbody.addEventListener('click', (e) => {
      const btn = e.target.closest('button[data-act]')
      if (!btn) return
      const id = btn.getAttribute('data-id')
      const act = btn.getAttribute('data-act')
      if (act === 'read') markRead(id, 'button')
      if (act === 'view') openDetail(id)
    })

    document.getElementById('drawer-close').addEventListener('click', closeDrawer)
    document.getElementById('drawer-ok').addEventListener('click', closeDrawer)
    drawer.addEventListener('click', (e) => {
      if (e.target === drawer) closeDrawer()
    })

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