zkxw/mobile-ui/zkxw-mobile-oa-manage-search-icon-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>OA 列表 · 搜索后方管理 Icon 选型</title>
  <style>
    :root {
      --brand: #0a9f6d;
      --brand-dark: #087f57;
      --brand-soft: #e9f9f2;
      --nav-bg: #ecfdf5;
      --page-bg: #f5f8f7;
      --text: #1f2a26;
      --text-muted: #6b7b74;
      --border: #e8eaed;
      --capsule-w: 87px;
      --capsule-h: 32px;
      --capsule-right: 7px;
    }
    * { 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: 1280px; 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: 900px; }
    .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); }

    .mode-tabs {
      display: flex; flex-wrap: wrap; gap: 10px;
      margin: 20px 0 8px;
    }
    .mode-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;
    }
    .mode-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);
    }

    .hint {
      margin: 0 0 16px;
      font-size: 13px;
      color: #64748b;
    }

    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 18px;
    }

    .option {
      background: rgba(255,255,255,.94);
      border: 2px solid #e2e8f0;
      border-radius: 18px;
      padding: 12px;
      cursor: pointer;
      transition: border-color .15s, box-shadow .15s;
    }
    .option:hover { border-color: #a7f3d0; }
    .option.is-selected {
      border-color: var(--brand);
      box-shadow: 0 0 0 4px rgba(10, 159, 109, 0.18);
      background: #f0fdf7;
    }
    .option__head {
      display: flex; align-items: center; justify-content: space-between;
      gap: 8px; margin-bottom: 10px; padding: 0 4px;
    }
    .option__name { font-size: 14px; font-weight: 700; color: #0f291e; }
    .option__tag {
      font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
      background: #f1f5f9; color: #64748b;
    }
    .option.is-selected .option__tag {
      background: #d1fae5; color: #047857;
    }
    .option__desc {
      margin: 0 0 10px; padding: 0 4px;
      font-size: 12px; color: #64748b;
    }

    .phone {
      width: 100%; max-width: 320px; margin: 0 auto;
      background: #fff; border-radius: 22px; overflow: hidden;
      box-shadow: 0 0 0 1px rgb(15 23 42 / 6%), 0 12px 28px rgb(15 23 42 / 10%);
      position: relative;
      pointer-events: none;
    }
    .sys-bar {
      height: 36px; background: var(--nav-bg);
      display: flex; align-items: flex-end; justify-content: space-between;
      padding: 0 14px 4px; font-size: 11px; font-weight: 650; color: #0f291e;
    }
    .nav-wrap {
      background: var(--nav-bg);
      border-bottom: 1px solid #d8f3e5;
      position: relative;
    }
    .nav {
      height: 40px; display: flex; align-items: center;
      padding: 0 8px 0 4px; position: relative;
    }
    .nav-back {
      width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    }
    .nav-back::before {
      content: ""; width: 9px; height: 9px;
      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: 15px; font-weight: 650; color: #0f291e;
    }
    .wx-capsule {
      position: absolute; top: 4px; right: 6px;
      width: 74px; height: 28px;
      border-radius: 14px; background: rgba(255,255,255,.92);
      border: 1px solid rgba(0,0,0,.12);
      display: flex; align-items: center; z-index: 50;
    }
    .wx-capsule__dots, .wx-capsule__close {
      flex: 1; height: 100%; display: flex; align-items: center; justify-content: center;
      color: #111; font-size: 11px; font-weight: 700;
    }
    .wx-capsule__dots { gap: 2px; }
    .wx-capsule__dots span {
      width: 3px; height: 3px; border-radius: 50%; background: #111;
    }
    .wx-capsule__divider { width: 1px; height: 14px; background: rgba(0,0,0,.12); }

    .toolbar {
      background: #fff; padding: 8px 10px;
      border-bottom: 1px solid var(--border);
    }
    .toolbar-row { display: flex; align-items: center; gap: 8px; }
    .search {
      flex: 1; min-width: 0; height: 34px; border-radius: 9px;
      border: 1px solid #e8eaed; background: #fafafa;
      display: flex; align-items: center; padding: 0 10px; gap: 6px;
      color: #94a3b8; font-size: 12px;
    }
    .search::before {
      content: ""; width: 12px; height: 12px; flex-shrink: 0;
      border: 2px solid #94a3b8; border-radius: 50%; box-sizing: border-box;
    }

    .manage-ico-btn {
      flex-shrink: 0;
      width: 34px; height: 34px;
      border-radius: 9px;
      border: 1px solid #c6f0dc;
      background: #ecfdf5;
      color: #166534;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      outline: 2px solid rgba(10, 159, 109, 0.45);
      outline-offset: 1px;
    }
    .manage-ico-btn.is-done {
      border-color: #e2e8f0;
      background: #f8fafc;
      color: #64748b;
      outline-color: rgba(100, 116, 139, 0.35);
    }
    .manage-ico-btn svg { width: 17px; height: 17px; display: block; }

    .pair {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 8px;
    }
    .pair__label {
      text-align: center;
      font-size: 11px;
      font-weight: 650;
      color: #64748b;
      margin-bottom: 4px;
    }
    .mini-phone {
      background: #fff;
      border: 1px solid #e8eeeb;
      border-radius: 12px;
      overflow: hidden;
    }
    .mini-bar {
      background: var(--nav-bg);
      height: 18px;
      border-bottom: 1px solid #d8f3e5;
    }
    .mini-tool {
      display: flex; align-items: center; gap: 6px;
      padding: 6px;
      background: #fff;
    }
    .mini-search {
      flex: 1; height: 26px; border-radius: 7px;
      border: 1px solid #e8eaed; background: #fafafa;
    }
    .mini-ico {
      width: 26px; height: 26px; border-radius: 7px;
      border: 1px solid #c6f0dc; background: #ecfdf5; color: #166534;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .mini-ico.is-done {
      border-color: #e2e8f0; background: #f8fafc; color: #64748b;
    }
    .mini-ico svg { width: 14px; height: 14px; }
    .mini-list { background: var(--page-bg); padding: 6px; min-height: 52px; }
    .mini-card {
      height: 18px; border-radius: 6px; background: #fff;
      border: 1px solid #eef2f0; margin-bottom: 4px;
    }

    .footer-pick {
      position: sticky;
      bottom: 12px;
      margin-top: 20px;
      padding: 12px 14px;
      border-radius: 14px;
      background: rgba(15, 41, 30, 0.92);
      color: #ecfdf5;
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      box-shadow: 0 10px 28px rgba(15,23,42,.18);
    }
    .footer-pick strong { color: #6ee7b7; }
    .footer-pick .muted { color: #94a3b8; font-size: 12px; }
  </style>
</head>
<body>
  <div class="stage">
    <div class="hero">
      <h1>搜索框后方 · 管理 Icon 选型</h1>
      <p>
        布局已定：顶栏不放「管理」；搜索框右侧放 36×36 icon。
        下面每种 icon 都画出<strong>普通态 / 管理态（完成）</strong>对照，点选卡片即可选定。
      </p>
      <div class="rec">
        <b>已选定：</b>搜索行 <code>[搜索框] [三点菜单 icon]</code>；
        普通态 = 三点；管理态 = 勾选。已落地到草稿箱 / 待办 / 抄送三页。
      </div>
    </div>

    <div class="mode-tabs">
      <button type="button" class="mode-tab is-active" disabled>每种方案均含：普通态 + 管理态</button>
    </div>
    <p class="hint">绿框为当前可点区域示意；右上角仍保留微信胶囊，确认不会挡到 icon。</p>

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

    <div class="footer-pick" id="footerPick">
      <div>
        当前选中：<strong id="pickedName">—</strong>
        <div class="muted" id="pickedDesc">点击上方卡片选择 icon</div>
      </div>
      <div class="muted">点选后回复方案名即可落地</div>
    </div>
  </div>

  <script>
    var CHECK =
      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">' +
      '<path d="M5 12.5l4.2 4.2L19 7"/></svg>'

    var OPTIONS = [
      {
        id: "more",
        name: "三点菜单",
        tag: "已落地",
        desc: "入口克制；真机用三个圆点，兼容性好。完成态换勾。",
        normal:
          '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">' +
          '<circle cx="6" cy="12" r="1.4" fill="currentColor" stroke="none"/>' +
          '<circle cx="12" cy="12" r="1.4" fill="currentColor" stroke="none"/>' +
          '<circle cx="18" cy="12" r="1.4" fill="currentColor" stroke="none"/>' +
          '</svg>'
      },
      {
        id: "gear",
        name: "齿轮设置",
        tag: "备选",
        desc: "真机 CSS 齿轮不稳定，已弃用。",
        normal:
          '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
          '<circle cx="12" cy="12" r="3"/>' +
          '<path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/>' +
          '</svg>'
      },
      {
        id: "sliders",
        name: "调参条",
        tag: "偏整理",
        desc: "「整理/批量操作」感；完成态换勾。",
        normal:
          '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
          '<path d="M4 7h10M16 7h4M4 17h4M10 17h10M14 4v6M8 14v6"/>' +
          '</svg>'
      },
      {
        id: "layers",
        name: "多层卡片",
        tag: "偏批量",
        desc: "暗示对多条记录操作；完成态换勾。",
        normal:
          '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
          '<path d="M12 2l9 4.5-9 4.5L3 6.5 12 2z"/>' +
          '<path d="M3 12.5l9 4.5 9-4.5"/>' +
          '<path d="M3 17.5l9 4.5 9-4.5"/>' +
          '</svg>'
      },
      {
        id: "checklist",
        name: "清单勾选",
        tag: "偏多选",
        desc: "直接表达「进入多选管理」；完成态换勾。",
        normal:
          '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
          '<path d="M9 6h11M9 12h11M9 18h11"/>' +
          '<path d="M4.5 6.5l1.2 1.2L7.8 5.5M4.5 12.5l1.2 1.2L7.8 11.5M4.5 18.5l1.2 1.2L7.8 17.5"/>' +
          '</svg>'
      },
      {
        id: "edit",
        name: "铅笔编辑",
        tag: "偏编辑",
        desc: "草稿箱场景很贴切；待办/抄送也说得通。完成态换勾。",
        normal:
          '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
          '<path d="M12 20h9"/>' +
          '<path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z"/>' +
          '</svg>'
      },
      {
        id: "square-check",
        name: "方框勾选",
        tag: "偏选择",
        desc: "一眼是「可勾选」；管理态用实心勾强调完成。",
        normal:
          '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
          '<rect x="4" y="4" width="16" height="16" rx="3"/>' +
          '<path d="M8 12l2.8 2.8L16.5 9"/>' +
          '</svg>'
      }
    ]

    var selected = "more"

    function miniPair(opt) {
      return (
        '<div class="pair">' +
          '<div>' +
            '<div class="pair__label">普通态 · 管理</div>' +
            '<div class="mini-phone">' +
              '<div class="mini-bar"></div>' +
              '<div class="mini-tool">' +
                '<div class="mini-search"></div>' +
                '<div class="mini-ico">' + opt.normal + '</div>' +
              '</div>' +
              '<div class="mini-list"><div class="mini-card"></div><div class="mini-card"></div></div>' +
            '</div>' +
          '</div>' +
          '<div>' +
            '<div class="pair__label">管理态 · 完成</div>' +
            '<div class="mini-phone">' +
              '<div class="mini-bar"></div>' +
              '<div class="mini-tool">' +
                '<div class="mini-search"></div>' +
                '<div class="mini-ico is-done">' + CHECK + '</div>' +
              '</div>' +
              '<div class="mini-list"><div class="mini-card"></div><div class="mini-card"></div></div>' +
            '</div>' +
          '</div>' +
        '</div>'
      )
    }

    function fullPhone(opt, manage) {
      var svg = manage ? CHECK : opt.normal
      var cls = "manage-ico-btn" + (manage ? " is-done" : "")
      return (
        '<div class="phone">' +
          '<div class="sys-bar"><span>9:41</span><span>▮▮</span></div>' +
          '<div class="nav-wrap">' +
            '<div class="nav"><div class="nav-back"></div><div class="nav-title">待办中心</div></div>' +
            '<div class="wx-capsule" aria-hidden="true">' +
              '<div class="wx-capsule__dots"><span></span><span></span><span></span></div>' +
              '<div class="wx-capsule__divider"></div>' +
              '<div class="wx-capsule__close">✕</div>' +
            '</div>' +
          '</div>' +
          '<div class="toolbar"><div class="toolbar-row">' +
            '<div class="search">搜索流程名称、申请人</div>' +
            '<div class="' + cls + '">' + svg + '</div>' +
          '</div></div>' +
        '</div>'
      )
    }

    function render() {
      var root = document.getElementById("gallery")
      root.innerHTML = OPTIONS.map(function (opt) {
        var on = opt.id === selected ? " is-selected" : ""
        var tag = opt.id === selected ? "已选" : opt.tag
        return (
          '<div class="option' + on + '" data-id="' + opt.id + '">' +
            '<div class="option__head">' +
              '<div class="option__name">' + opt.name + '</div>' +
              '<div class="option__tag">' + tag + '</div>' +
            '</div>' +
            '<p class="option__desc">' + opt.desc + '</p>' +
            fullPhone(opt, false) +
            miniPair(opt) +
          '</div>'
        )
      }).join("")

      var cur = OPTIONS.find(function (o) { return o.id === selected })
      document.getElementById("pickedName").textContent = cur ? cur.name : "—"
      document.getElementById("pickedDesc").textContent = cur ? cur.desc : ""
    }

    document.getElementById("gallery").addEventListener("click", function (e) {
      var card = e.target.closest(".option")
      if (!card) return
      selected = card.getAttribute("data-id")
      render()
    })

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