This commit is contained in:
zlwu committed 2026-08-13 16:50:36 +08:00
1 parent 8c49021d38
commit 283b8cd1e3
33 files changed
+3904 -1423

No files matched your search

@@ -0,0 +1,664 @@
<!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 列表 ·「管理」避开微信胶囊 Demo</title>
<style>
:root {
--brand: #0a9f6d;
--brand-dark: #087f57;
--brand-soft: #e9f9f2;
--warn: #d97706;
--warn-soft: #fff7e8;
--danger: #ef4444;
--nav-bg: #ecfdf5;
--page-bg: #f5f8f7;
--text: #1f2a26;
--text-muted: #6b7b74;
--border: #e8eaed;
--capsule-w: 87px;
--capsule-h: 32px;
--capsule-right: 7px;
--capsule-gap: 8px;
}
* { 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: 1240px; 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: 880px; }
.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 {
margin-left: 6px; font-size: 11px; font-weight: 700;
color: var(--brand-dark); background: #d1fae5;
border-radius: 999px; padding: 2px 7px;
}
.tab .badge.warn {
color: #92400e; background: #fef3c7;
}
.layout {
display: grid;
grid-template-columns: minmax(240px, 320px) 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 .pick {
margin-top: 12px; padding: 10px 12px; border-radius: 10px;
background: #fff7e8; border: 1px solid #fde68a;
font-size: 12px; color: #92400e;
}
.panel .ok {
margin-top: 10px; padding: 10px 12px; border-radius: 10px;
background: #ecfdf5; border: 1px solid #a7f3d0;
font-size: 12px; color: #047857;
}
.panel .bad {
margin-top: 10px; padding: 10px 12px; border-radius: 10px;
background: #fef2f2; border: 1px solid #fecaca;
font-size: 12px; color: #b91c1c;
}
.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%);
position: relative;
}
.cap {
text-align: center; font-size: 11px; font-weight: 650; color: #64748b;
padding: 8px; background: #f8fafc; border-bottom: 1px solid #eef2f0;
}
/* 模拟系统状态栏 + 自定义导航 */
.sys-bar {
height: 44px;
background: var(--nav-bg);
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: 0 16px 6px;
font-size: 12px;
font-weight: 650;
color: #0f291e;
position: relative;
}
.sys-bar__time { font-variant-numeric: tabular-nums; }
.sys-bar__icons { opacity: 0.75; letter-spacing: 2px; font-size: 11px; }
.nav-wrap {
background: var(--nav-bg);
border-bottom: 1px solid #d8f3e5;
position: relative;
}
.nav {
height: 44px;
display: flex;
align-items: center;
padding: 0 8px 0 4px;
position: relative;
}
.nav.is-capsule-safe {
padding-right: calc(var(--capsule-w) + var(--capsule-right) + var(--capsule-gap));
}
.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;
white-space: nowrap;
}
.nav-action {
margin-left: auto;
min-width: 48px;
height: 36px;
display: flex; align-items: center; justify-content: center;
padding: 0 8px;
font-size: 14px; font-weight: 650; color: #166534;
cursor: pointer; user-select: none;
position: relative; z-index: 2;
}
.nav-action.is-done { color: #64748b; }
.nav-action.is-hit {
outline: 2px solid var(--danger);
outline-offset: 1px;
border-radius: 6px;
background: rgba(239, 68, 68, 0.08);
}
.nav-action.is-safe {
outline: 2px solid var(--brand);
outline-offset: 1px;
border-radius: 6px;
background: rgba(10, 159, 109, 0.08);
}
/* 微信右上角胶囊(模拟) */
.wx-capsule {
position: absolute;
top: 6px;
right: var(--capsule-right);
width: var(--capsule-w);
height: var(--capsule-h);
border-radius: 16px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: 0 1px 2px rgba(0,0,0,.04);
display: flex;
align-items: center;
z-index: 50;
pointer-events: none;
overflow: hidden;
}
.wx-capsule__dots,
.wx-capsule__close {
flex: 1;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #111;
font-size: 13px;
font-weight: 700;
}
.wx-capsule__dots { gap: 3px; }
.wx-capsule__dots span {
width: 4px; height: 4px; border-radius: 50%; background: #111;
}
.wx-capsule__divider {
width: 1px; height: 18px; background: rgba(0,0,0,.12);
}
.wx-capsule__close { font-size: 15px; line-height: 1; }
.wx-capsule.is-warn {
box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.45);
}
.wx-capsule.is-ok {
box-shadow: 0 0 0 2px rgba(10, 159, 109, 0.35);
}
.hit-label {
position: absolute;
top: 46px;
right: 10px;
z-index: 40;
font-size: 10px;
font-weight: 700;
padding: 3px 8px;
border-radius: 999px;
background: #fee2e2;
color: #b91c1c;
border: 1px solid #fecaca;
}
.safe-label {
position: absolute;
top: 46px;
right: 10px;
z-index: 40;
font-size: 10px;
font-weight: 700;
padding: 3px 8px;
border-radius: 999px;
background: #d1fae5;
color: #047857;
border: 1px solid #a7f3d0;
}
.toolbar {
background: #fff;
padding: 8px 12px;
border-bottom: 1px solid var(--border);
}
.search {
height: 36px;
border-radius: 10px;
border: 1px solid #e8eaed;
background: #fafafa;
display: flex;
align-items: center;
padding: 0 12px;
gap: 8px;
color: #94a3b8;
font-size: 13px;
}
.search::before {
content: "";
width: 14px; height: 14px;
border: 2px solid #94a3b8;
border-radius: 50%;
box-sizing: border-box;
position: relative;
}
.toolbar-row {
display: flex;
align-items: center;
gap: 8px;
}
.toolbar-row .search { flex: 1; }
.manage-chip {
flex-shrink: 0;
height: 36px;
padding: 0 12px;
border-radius: 10px;
border: 1px solid #a7f3d0;
background: #ecfdf5;
color: #166534;
font-size: 13px;
font-weight: 650;
display: flex;
align-items: center;
cursor: pointer;
}
.manage-chip.is-done {
border-color: #e2e8f0;
background: #f8fafc;
color: #64748b;
}
.list-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px 6px;
background: var(--page-bg);
}
.list-head__count {
font-size: 12px;
color: var(--text-muted);
}
.list-head__count strong { color: var(--text); font-weight: 700; }
.list-head__link {
font-size: 13px;
font-weight: 650;
color: #166534;
cursor: pointer;
padding: 4px 2px;
}
.list-head__link.is-done { color: #64748b; }
.list-head__link.is-safe {
outline: 2px solid var(--brand);
outline-offset: 2px;
border-radius: 6px;
background: rgba(10, 159, 109, 0.08);
}
.list {
background: var(--page-bg);
padding: 8px 12px 20px;
min-height: 320px;
}
.card {
background: #fff;
border-radius: 14px;
border: 1px solid #eef2f0;
padding: 12px 14px;
margin-bottom: 10px;
box-shadow: 0 4px 12px rgba(15,23,42,.04);
}
.card__title {
font-size: 14px; font-weight: 650; color: #0f291e;
margin-bottom: 6px;
}
.card__meta { font-size: 12px; color: var(--text-muted); }
.card.is-manage {
display: flex; align-items: center; gap: 10px;
}
.check {
width: 20px; height: 20px; border-radius: 50%;
border: 2px solid #cbd5e1; flex-shrink: 0;
}
.check.on {
border-color: var(--brand);
background: var(--brand);
box-shadow: inset 0 0 0 3px #fff;
}
.card__body { flex: 1; min-width: 0; }
.legend {
margin-top: 16px;
display: flex; flex-wrap: wrap; gap: 10px;
font-size: 12px; color: #64748b;
}
.legend span {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 10px; border-radius: 8px; background: #fff;
border: 1px solid #e2e8f0;
}
.dot {
width: 10px; height: 10px; border-radius: 50%;
}
.dot.hit { background: #ef4444; }
.dot.ok { background: #0a9f6d; }
.dot.cap { background: #94a3b8; border: 1px solid #64748b; }
.note {
margin-top: 18px;
font-size: 12px;
color: #64748b;
max-width: 880px;
}
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>OA 列表 ·「管理」避开微信小程序胶囊</h1>
<p>
影响页面:自定义导航的 <b>草稿箱 / 待办中心 / 抄送我的</b>
(已办中心、我发起的目前用系统导航且无「管理」)。
右上角模拟微信「··· / 关闭」胶囊;红框=被遮挡,绿框=可点区域安全。
</p>
<div class="rec">
<b>建议:</b>优先选 <b>A · 顶栏保留「管理」+ 按胶囊宽度留白</b>
(改动最小,交互习惯不变)。若希望管理与列表语义更近,可选
<b>B · 列表头「共 N 条 | 管理」</b>。
</div>
</div>
<div class="tabs" id="tabs">
<button type="button" class="tab is-active" data-k="now">① 现状·被遮挡<span class="badge warn">问题</span></button>
<button type="button" class="tab" 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>
</div>
<div class="layout">
<aside class="panel" id="info">
<h2>—</h2>
<p class="sub">—</p>
<ul></ul>
<div class="pick" hidden></div>
<div class="ok" hidden></div>
<div class="bad" hidden></div>
</aside>
<div>
<div class="phones" id="phones"></div>
<div class="legend">
<span><i class="dot cap"></i>微信胶囊(不可覆盖)</span>
<span><i class="dot hit"></i>「管理」与胶囊冲突</span>
<span><i class="dot ok"></i>「管理」可安全点击</span>
</div>
</div>
</div>
<p class="note">
实现提示:方案 A 用 <code>uni.getMenuButtonBoundingClientRect()</code>
(或微信 <code>wx.getMenuButtonBoundingClientRect</code>)取胶囊
<code>width / left / right</code>,给 <code>.nav__inner</code> 增加
<code>padding-right</code>,把「管理」推到胶囊左侧并留约 8px 间隙。
非微信环境可回退为固定约 96px 右内边距。
</p>
</div>
<script>
var SCENES = {
now: {
title: "① 现状 · 顶栏右侧「管理」被胶囊遮住",
sub: "自定义 navigationStyle,仅处理了 statusBar,未避开胶囊。",
items: [
"「管理」贴在导航栏最右侧(margin-left: auto)",
"微信胶囊叠在同一垂直带上,文字被挡住、难以点击",
"草稿箱 / 待办 / 抄送三页结构相同"
],
bad: "不要继续这样落地:真机上关闭区会盖住「管理」。",
phoneCap: "现状 · 冲突",
mode: "now"
},
a: {
title: "② A · 顶栏保留「管理」+ 胶囊安全留白(推荐)",
sub: "仍在标题栏右侧,但右侧 padding 避开胶囊宽度。",
items: [
"交互位置不变:用户仍在顶栏找「管理 / 完成」",
"用 menuButtonBoundingClientRect 动态算右侧安全区",
"改动集中在公共顶栏样式 / 工具函数,三页可复用",
"标题仍居中,不会挤到胶囊上"
],
ok: "推荐:最小改动、符合现有 Demo 约定(顶栏管理)。",
phoneCap: "方案 A · 顶栏留白",
mode: "a"
},
b: {
title: "③ B · 列表头「共 N 条 | 管理」",
sub: "顶栏只留返回+标题;管理下移到搜索下方次级行。",
items: [
"彻底避开胶囊,无需计算胶囊宽度",
"管理与列表批量操作语义更近(对齐早期美化 Demo S1)",
"顶栏更干净,但入口位置相对现状下移",
"三页需改模板结构(多一行 list-head)"
],
pick: "想弱化顶栏操作、强调列表批量时选 B。",
phoneCap: "方案 B · 列表头",
mode: "b"
},
c: {
title: "④ C · 搜索框右侧胶囊按钮",
sub: "顶栏无「管理」;与搜索同排的描边小按钮。",
items: [
"同样避开胶囊,实现简单",
"搜索区会变窄,长 placeholder 更易截断",
"早期 Demo 曾认为「挤在搜索旁偏突兀」"
],
pick: "仅作备选;一般不如 A / B。",
phoneCap: "方案 C · 搜索旁",
mode: "c"
}
}
var cards = [
{ title: "差旅报销申请", meta: "张三 · 技术中心 · 2 小时前" },
{ title: "采购合同审批", meta: "李四 · 采购部 · 昨天" },
{ title: "请假申请", meta: "王五 · 行政 · 周一" }
]
function wxCapsule(extraClass) {
return (
'<div class="wx-capsule ' + (extraClass || "") + '" 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>'
)
}
function cardHtml(manage) {
return cards.map(function (c, i) {
if (!manage) {
return (
'<div class="card">' +
'<div class="card__title">' + c.title + '</div>' +
'<div class="card__meta">' + c.meta + '</div>' +
'</div>'
)
}
return (
'<div class="card is-manage">' +
'<div class="check' + (i === 0 ? ' on' : '') + '"></div>' +
'<div class="card__body">' +
'<div class="card__title">' + c.title + '</div>' +
'<div class="card__meta">' + c.meta + '</div>' +
'</div>' +
'</div>'
)
}).join("")
}
function phoneShell(label, bodyInner, flag) {
var labelHtml = ""
if (flag === "hit") labelHtml = '<div class="hit-label">被胶囊遮挡</div>'
if (flag === "safe") labelHtml = '<div class="safe-label">可安全点击</div>'
return (
'<div class="phone">' +
'<div class="cap">' + label + '</div>' +
'<div class="sys-bar">' +
'<span class="sys-bar__time">9:41</span>' +
'<span class="sys-bar__icons">▮▮▮ ░</span>' +
'</div>' +
'<div class="nav-wrap">' +
bodyInner +
(flag === "hit" ? wxCapsule("is-warn") : wxCapsule("is-ok")) +
labelHtml +
'</div>' +
'</div>'
)
}
function setInfo(key) {
var s = SCENES[key]
var info = document.getElementById("info")
info.querySelector("h2").textContent = s.title
info.querySelector(".sub").textContent = s.sub
info.querySelector("ul").innerHTML = s.items
.map(function (t) { return "<li>" + t + "</li>" })
.join("")
;["pick", "ok", "bad"].forEach(function (cls) {
var el = info.querySelector("." + cls)
if (s[cls]) {
el.hidden = false
el.textContent = s[cls]
} else {
el.hidden = true
el.textContent = ""
}
})
}
function buildPhone(mode, manage) {
var actionText = manage ? "完成" : "管理"
var actionCls = manage ? "nav-action is-done" : "nav-action"
var list = '<div class="list">' + cardHtml(manage) + "</div>"
var inner = ""
var flag = "safe"
var label = ""
if (mode === "now") {
flag = "hit"
label = manage ? "现状 · 管理态(冲突)" : "现状 · 普通态(冲突)"
inner =
'<div class="nav">' +
'<div class="nav-back"></div>' +
'<div class="nav-title">待办中心</div>' +
'<div class="' + actionCls + ' is-hit">' + actionText + "</div>" +
"</div>" +
'<div class="toolbar"><div class="search">搜索流程名称、申请人</div></div>' +
list
} else if (mode === "a") {
label = manage ? "A · 管理态" : "A · 普通态"
inner =
'<div class="nav is-capsule-safe">' +
'<div class="nav-back"></div>' +
'<div class="nav-title">待办中心</div>' +
'<div class="' + actionCls + ' is-safe">' + actionText + "</div>" +
"</div>" +
'<div class="toolbar"><div class="search">搜索流程名称、申请人</div></div>' +
list
} else if (mode === "b") {
label = manage ? "B · 管理态" : "B · 普通态"
var linkCls = manage
? "list-head__link is-done is-safe"
: "list-head__link is-safe"
inner =
'<div class="nav">' +
'<div class="nav-back"></div>' +
'<div class="nav-title">待办中心</div>' +
"</div>" +
'<div class="toolbar"><div class="search">搜索流程名称、申请人</div></div>' +
'<div class="list-head">' +
'<div class="list-head__count">共 <strong>3</strong> 条</div>' +
'<div class="' + linkCls + '">' + actionText + "</div>" +
"</div>" +
list
} else {
label = manage ? "C · 管理态" : "C · 普通态"
var chipCls = manage ? "manage-chip is-done" : "manage-chip"
inner =
'<div class="nav">' +
'<div class="nav-back"></div>' +
'<div class="nav-title">待办中心</div>' +
"</div>" +
'<div class="toolbar">' +
'<div class="toolbar-row">' +
'<div class="search">搜索流程名称、申请人</div>' +
'<div class="' + chipCls + '">' + actionText + "</div>" +
"</div>" +
"</div>" +
list
}
return phoneShell(label, inner, flag)
}
function render(key) {
var s = SCENES[key]
document.getElementById("phones").innerHTML =
buildPhone(s.mode, false) + buildPhone(s.mode, true)
setInfo(key)
}
document.getElementById("tabs").addEventListener("click", function (e) {
var btn = e.target.closest(".tab")
if (!btn) return
document.querySelectorAll(".tab").forEach(function (t) {
t.classList.toggle("is-active", t === btn)
})
render(btn.getAttribute("data-k"))
})
render("now")
</script>
</body>
</html>
@@ -0,0 +1,460 @@
<!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>