Files
zkxw/mobile-ui/zkxw-mobile-oa-drafts-beautify-demos.html
T
2026-08-13 14:31:57 +08:00

679 lines
29 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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>草稿箱 · 模式 A 美化 Demo(管理位 + 卡片 + 勾选对齐)</title>
<style>
:root {
--brand: #0a9f6d;
--brand-dark: #087f57;
--brand-soft: #e9f9f2;
--warn: #d97706;
--warn-soft: #fff7e8;
--danger: #ef4444;
--text: #1f2a26;
--text-muted: #6b7b74;
--border: #dcebe4;
--page-bg: #f5f8f7;
--surface: #fff;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
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.14), transparent 55%),
radial-gradient(700px 380px at 92% 0%, rgba(214, 163, 67, 0.1), transparent 50%),
linear-gradient(180deg, #f8fffc 0%, #f4f7fb 45%, #f7f8fa 100%);
line-height: 1.45;
}
.stage { max-width: 1320px; margin: 0 auto; padding: 28px 16px 64px; }
.hero h1 { margin: 0 0 8px; font-size: 24px; font-weight: 720; letter-spacing: -0.02em; }
.hero p { margin: 0; max-width: 820px; color: #64748b; font-size: 14px; }
.hero .note {
margin-top: 12px; display: inline-block; padding: 8px 12px;
border-radius: 10px; background: #fff; border: 1px solid #e2e8f0;
font-size: 12px; color: #64748b;
}
.hero .note strong { color: #0f766e; }
.pain {
margin: 18px 0 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
}
.pain-item {
background: #fff;
border: 1px solid #fecaca;
border-radius: 12px;
padding: 10px 12px;
font-size: 12px;
color: #7f1d1d;
}
.pain-item b { color: #b91c1c; }
.tabs {
display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 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;
transition: .15s border-color, .15s box-shadow, .15s color, .15s background;
}
.tab:hover { border-color: #94a3b8; }
.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.18);
}
.tab .badge {
margin-left: 6px; font-size: 10px; font-weight: 700;
padding: 2px 6px; border-radius: 999px;
background: #ecfdf5; color: #047857;
}
.layout {
display: grid;
grid-template-columns: minmax(260px, 340px) 1fr;
gap: 22px;
align-items: start;
}
@media (max-width: 960px) { .layout { grid-template-columns: 1fr; } }
.panel {
background: rgba(255,255,255,.92);
border: 1px solid #e2e8f0;
border-radius: 18px;
padding: 18px;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}
.panel h2 { margin: 0 0 4px; font-size: 16px; }
.panel .sub { margin: 0 0 12px; 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: 14px; padding: 12px; border-radius: 12px;
background: var(--brand-soft); border: 1px solid #c6f0dc;
font-size: 12px; color: #166534;
}
.phones {
display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;
}
.phone {
width: 375px; background: #fff; border-radius: 28px;
box-shadow: 0 0 0 1px rgb(15 23 42 / 6%), 0 18px 40px rgb(15 23 42 / 12%);
overflow: hidden;
}
.phone-bar {
height: 44px; display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #0a9f6d, #087f57);
color: #fff; font-size: 16px; font-weight: 600;
}
.phone-cap {
padding: 8px 14px; font-size: 11px; font-weight: 650;
color: #64748b; background: #f8fafc; border-bottom: 1px solid #eef2f0;
text-align: center;
}
.page { background: var(--page-bg); min-height: 620px; padding-bottom: 18px; }
.style-block { display: none; }
.style-block.is-active { display: block; }
/* ========== 共用搜索 ========== */
.search {
height: 36px; display: flex; align-items: center; gap: 8px;
padding: 0 12px; border-radius: 10px; border: 1px solid #e8eaed;
background: #fafafa; font-size: 13px; color: #94a3b8; width: 100%;
}
.search::before {
content: ""; width: 12px; height: 12px; border: 1.5px solid #94a3b8;
border-radius: 50%; flex-shrink: 0;
}
/* ========== 共用卡片(美化后的模式 A) ========== */
.card {
width: 100%;
background: var(--surface);
border: 1px solid #e2ebe6;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}
.card-body { padding: 14px 14px 12px; }
.card-top {
display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.card-title {
font-size: 15px; font-weight: 700; color: #1f2a26; line-height: 1.35;
min-width: 0; flex: 1;
}
.card-status {
flex-shrink: 0; font-size: 11px; font-weight: 700;
padding: 3px 9px; border-radius: 999px;
background: var(--warn-soft); color: var(--warn);
}
.card-meta { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.card-meta-line {
display: flex; gap: 10px; font-size: 12px; line-height: 1.4;
}
.card-meta-line .lab { color: #94a3b8; min-width: 56px; flex-shrink: 0; }
.card-meta-line .val { color: #475569; min-width: 0; }
.card-footer {
display: flex; gap: 8px; padding: 10px 12px 12px;
border-top: 1px dashed rgba(140, 170, 155, 0.28);
}
.card-footer button {
flex: 1; min-width: 0; height: 34px; border-radius: 10px;
border: 1px solid #d8e3de; background: #fff;
font-size: 12px; font-weight: 650; color: #334155; cursor: pointer;
}
.card-footer .p {
background: var(--brand); border-color: var(--brand); color: #fff;
}
.card-footer .d {
color: var(--danger); border-color: rgba(239,68,68,.35);
background: rgba(239,68,68,.06);
}
.list { padding: 10px 12px 0; display: flex; flex-direction: column; gap: 10px; }
.end { text-align: center; padding: 14px 0 6px; font-size: 12px; color: #94a3b8; }
/* —— 卡片变体:更精致 —— */
.card.v-soft {
border-color: transparent;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.card.v-accent {
border-color: #e8eeeb;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
position: relative;
}
.card.v-accent::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: linear-gradient(180deg, #f59e0b, #d6a343);
}
.card.v-accent .card-body { padding-left: 16px; }
.card.v-flat {
border: 0;
background: #fff;
box-shadow: none;
border-radius: 12px;
outline: 1px solid #e8eeeb;
}
.card.v-meta-inline .card-meta {
flex-direction: row; flex-wrap: wrap; gap: 4px 12px;
}
.card.v-meta-inline .card-meta-line .lab { min-width: 0; }
.card.v-meta-inline .card-meta-line .lab::after { content: " "; }
.card.v-meta-inline .sep {
color: #cbd5e1; font-size: 12px;
}
/* ========== A0 现状对照 ========== */
.a0-toolbar {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; background: #fff; border-bottom: 1px solid #f1f5f9;
}
.a0-manage {
flex-shrink: 0; font-size: 14px; font-weight: 600; color: #166534;
padding: 0 2px; white-space: nowrap;
}
.a0-row {
display: flex; align-items: flex-start; gap: 8px; width: 100%;
}
.a0-check {
padding-top: 20px; flex-shrink: 0;
}
.a0-check span {
display: flex; width: 20px; height: 20px; border-radius: 50%;
border: 1.5px solid #cbd5e1; background: #fff;
align-items: center; justify-content: center;
font-size: 11px; color: #fff; font-weight: 700;
}
.a0-check span.on { background: #22c55e; border-color: #22c55e; }
.a0-row .card { flex: 1; min-width: 0; }
/* ========== 方案 1:搜索独占 + 列表头「共N条 | 管理」 ========== */
.s1-toolbar { padding: 10px 12px 8px; background: #fff; border-bottom: 1px solid #f1f5f9; }
.s1-head {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 14px 2px;
}
.s1-count { font-size: 12px; color: var(--text-muted); }
.s1-count strong { color: var(--brand-dark); font-weight: 700; }
.s1-link {
font-size: 13px; font-weight: 650; color: var(--brand-dark);
padding: 4px 2px; cursor: pointer; user-select: none;
}
.s1-link.is-done { color: #64748b; }
/* ========== 方案 2:顶栏右侧胶囊「管理」 ========== */
.s2-toolbar {
display: flex; align-items: center; gap: 8px;
padding: 10px 12px; background: #fff; border-bottom: 1px solid #f1f5f9;
}
.s2-chip {
flex-shrink: 0; height: 36px; padding: 0 14px;
border-radius: 999px; border: 1px solid #d8e3de;
background: #fff; font-size: 13px; font-weight: 650;
color: var(--brand-dark); cursor: pointer;
display: inline-flex; align-items: center; gap: 4px;
}
.s2-chip.is-on {
background: #f1f5f9; border-color: #e2e8f0; color: #64748b;
}
.s2-chip svg { width: 14px; height: 14px; }
/* ========== 方案 3:搜索下方次级工具条 ========== */
.s3-toolbar { padding: 10px 12px 0; background: #fff; border-bottom: 1px solid #f1f5f9; }
.s3-sub {
display: flex; align-items: center; justify-content: space-between;
margin-top: 10px; padding: 8px 2px 10px;
}
.s3-hint { font-size: 12px; color: #94a3b8; }
.s3-btn {
height: 28px; padding: 0 12px; border-radius: 8px;
border: 1px solid #c6f0dc; background: var(--brand-soft);
color: var(--brand-dark); font-size: 12px; font-weight: 650; cursor: pointer;
}
.s3-btn.is-on {
background: #f1f5f9; border-color: #e2e8f0; color: #64748b;
}
/* ========== 方案 4:底栏管理(列表干净) ========== */
.s4-page { position: relative; padding-bottom: 64px; }
.s4-toolbar { padding: 10px 12px; background: #fff; border-bottom: 1px solid #f1f5f9; }
.s4-dock {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
background: rgba(255,255,255,.96);
border-top: 1px solid #e8eeeb;
display: flex; align-items: center; justify-content: space-between;
backdrop-filter: blur(8px);
}
.s4-dock .hint { font-size: 12px; color: var(--text-muted); }
.s4-dock .btn {
height: 36px; padding: 0 18px; border-radius: 10px;
border: 0; background: var(--brand); color: #fff;
font-size: 13px; font-weight: 700; cursor: pointer;
}
.s4-dock.is-manage .btn {
background: #f1f5f9; color: #64748b;
}
.s4-dock .danger {
height: 36px; padding: 0 16px; border-radius: 10px;
border: 1px solid rgba(239,68,68,.35);
background: rgba(239,68,68,.06); color: var(--danger);
font-size: 13px; font-weight: 650; cursor: pointer;
}
/* ========== 管理态:勾选垂直居中 ========== */
.row {
display: flex; align-items: center; gap: 10px; width: 100%;
}
.row .card { flex: 1; min-width: 0; margin: 0; }
.check {
flex-shrink: 0; width: 22px; height: 22px;
display: flex; align-items: center; justify-content: center;
}
.check span {
display: flex; width: 20px; height: 20px; border-radius: 50%;
border: 1.5px solid #cbd5e1; background: #fff;
align-items: center; justify-content: center;
font-size: 11px; color: #fff; font-weight: 700;
}
.check span.on { background: #22c55e; border-color: #22c55e; }
.row.is-on .card {
border-color: rgba(34, 197, 94, 0.45);
box-shadow: 0 8px 20px rgba(22, 163, 74, 0.12);
}
.batch {
margin: 10px 12px 0; padding: 10px 12px; border-radius: 12px;
background: #fff; border: 1px solid #c6f0dc;
display: flex; align-items: center; justify-content: space-between;
font-size: 13px; color: #166534;
}
.batch button {
height: 30px; padding: 0 12px; border-radius: 8px;
border: 1px solid rgba(239,68,68,.35);
background: rgba(239,68,68,.06); color: var(--danger);
font-size: 12px; font-weight: 650; cursor: pointer;
}
/* 内嵌勾选(方案变体) */
.card-check-in {
display: flex; gap: 10px; align-items: flex-start;
}
.card-check-in .check { margin-top: 2px; }
.meta-inline {
margin-top: 8px; font-size: 12px; color: #64748b;
}
.meta-inline .dot { margin: 0 6px; color: #cbd5e1; }
</style>
</head>
<body>
<div class="stage">
<div class="hero">
<h1>草稿箱 · 模式 A 美化选型</h1>
<p>
保留现有信息结构(标题 / 草稿态 / 最近保存 / 版本 / 编辑·提交·删除),针对你反馈的三点做方案对比:
<strong>管理入口不突兀</strong>、<strong>勾选与卡片垂直居中</strong>、<strong>卡片更好看</strong>。
</p>
<div class="note">请选 <strong>S1 / S2 / S3 / S4</strong>(卡片可再指定 soft / accent / flat)。选好后我落到 <code>mobile-h5</code>。</div>
<div class="pain">
<div class="pain-item"><b>痛点 1</b> 「管理」挤在搜索框右侧,突兀</div>
<div class="pain-item"><b>痛点 2</b> 管理态勾选与卡片未垂直居中</div>
<div class="pain-item"><b>痛点 3</b> 卡片观感偏平、不好看</div>
</div>
</div>
<div class="tabs" id="tabs">
<button class="tab is-active" data-k="a0">A0 现状对照</button>
<button class="tab" data-k="s1">S1 列表头管理<span class="badge">推荐</span></button>
<button class="tab" data-k="s2">S2 胶囊按钮</button>
<button class="tab" data-k="s3">S3 次级工具条</button>
<button class="tab" data-k="s4">S4 底栏管理</button>
<button class="tab" data-k="cards">卡片三款</button>
</div>
<div class="layout">
<div class="panel" id="desc"></div>
<div class="phones" id="phones"></div>
</div>
</div>
<script>
const ICON_GEAR = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z"/></svg>';
function cardHtml(title, time, ver, opts) {
opts = opts || {};
var cls = "card" + (opts.variant ? " " + opts.variant : "");
var footer = opts.noActions ? "" : (
'<div class="card-footer">' +
'<button class="p">编辑</button>' +
'<button>提交审批</button>' +
'<button class="d">删除</button>' +
'</div>'
);
var meta = opts.inlineMeta
? ('<div class="meta-inline">' + time + '<span class="dot">·</span>版本 ' + ver + '</div>')
: (
'<div class="card-meta">' +
'<div class="card-meta-line"><span class="lab">最近保存</span><span class="val">' + time + '</span></div>' +
'<div class="card-meta-line"><span class="lab">版本</span><span class="val">' + ver + '</span></div>' +
'</div>'
);
return (
'<div class="' + cls + '">' +
'<div class="card-body">' +
'<div class="card-top">' +
'<div class="card-title">' + title + '</div>' +
'<div class="card-status">草稿</div>' +
'</div>' +
meta +
'</div>' +
footer +
'</div>'
);
}
const ROWS = [
["入帐单", "2026-08-12 17:03:42", "v5"],
["出差申请", "2026-08-11 09:18:00", "v3"],
["采购报销", "2026-08-10 17:05:11", "v2"]
];
function phone(cap, bodyHtml) {
return (
'<div class="phone">' +
'<div class="phone-bar">草稿箱</div>' +
(cap ? '<div class="phone-cap">' + cap + '</div>' : '') +
'<div class="page">' + bodyHtml + '</div>' +
'</div>'
);
}
const DESCS = {
a0: {
title: "A0 · 现状对照",
sub: "复现当前问题,方便并排对比。",
items: [
"「管理」文字直接贴在搜索框右侧,视觉突兀",
"管理态勾选 padding-top 硬对齐,无法跟卡片垂直居中",
"卡片可用,但边框/按钮节奏偏旧"
],
pick: "仅作对照,不建议落地。"
},
s1: {
title: "S1 · 列表头管理(推荐)",
sub: "搜索独占一行;「共 N 条」与「管理」放在列表上方次级行。",
items: [
"搜索框不再被挤窄,输入更舒适",
"管理入口与列表语义绑定,不再像外挂按钮",
"管理态:勾选与卡片 align-items:center 垂直居中",
"卡片:轻阴影 + 等分按钮(现状结构保留)"
],
pick: "最推荐:改动小、符合列表页习惯(微信/钉钉类)。"
},
s2: {
title: "S2 · 搜索旁胶囊按钮",
sub: "仍在顶栏,但「管理」做成等高胶囊,降低突兀感。",
items: [
"与搜索同高的描边胶囊,比纯文字更规整",
"可选左侧小图标强化「管理模式」",
"勾选垂直居中;完成态胶囊变灰"
],
pick: "想少改布局、只润色顶栏时选 S2。"
},
s3: {
title: "S3 · 搜索下次级工具条",
sub: "搜索下方增加一行提示 + 浅绿小按钮。",
items: [
"主搜索区干净,管理降为次级操作",
"可用文案提示「可批量删除草稿」",
"管理态同样垂直居中勾选"
],
pick: "需要教育用户「可批量管理」时选 S3。"
},
s4: {
title: "S4 · 底栏管理",
sub: "列表区完全干净;管理/批量删除沉到底部固定栏。",
items: [
"顶栏只留搜索,最清爽",
"进入管理后底栏切换为「已选 N · 批量删除 · 完成」",
"适合单手操作、强调批量删除场景"
],
pick: "草稿常需批量清理时选 S4;会占一点底部空间。"
},
cards: {
title: "卡片三款细调",
sub: "同一信息结构,只换卡片「皮」;可与 S1–S4 任意组合。",
items: [
"Soft:无描边、更柔阴影",
"Accent:左侧琥珀竖条强调草稿",
"Flat:细线扁平,信息更密(元信息可一行)"
],
pick: "建议:S1 布局 + Soft 或 Accent 卡片。"
}
};
function renderA0() {
var normal = phone("普通态 · 管理突兀",
'<div class="a0-toolbar"><div class="search" style="flex:1">搜索流程名称</div><div class="a0-manage">管理</div></div>' +
'<div class="list">' +
ROWS.map(function (r) { return cardHtml(r[0], r[1], r[2]); }).join("") +
'<div class="end">已经到底了</div></div>'
);
var manage = phone("管理态 · 勾选未居中",
'<div class="a0-toolbar"><div class="search" style="flex:1">搜索流程名称</div><div class="a0-manage" style="color:#64748b">完成</div></div>' +
'<div class="batch"><span>已选 1 项</span><button>批量删除</button></div>' +
'<div class="list">' +
'<div class="a0-row"><div class="a0-check"><span class="on">✓</span></div>' + cardHtml(ROWS[0][0], ROWS[0][1], ROWS[0][2], { noActions: true }) + '</div>' +
'<div class="a0-row"><div class="a0-check"><span></span></div>' + cardHtml(ROWS[1][0], ROWS[1][1], ROWS[1][2], { noActions: true }) + '</div>' +
'<div class="a0-row"><div class="a0-check"><span></span></div>' + cardHtml(ROWS[2][0], ROWS[2][1], ROWS[2][2], { noActions: true }) + '</div>' +
'</div>'
);
return normal + manage;
}
function renderS1() {
var normal = phone("普通态",
'<div class="s1-toolbar"><div class="search">搜索流程名称</div></div>' +
'<div class="s1-head"><div class="s1-count">共 <strong>3</strong> 条草稿</div><div class="s1-link">管理</div></div>' +
'<div class="list">' +
ROWS.map(function (r) { return cardHtml(r[0], r[1], r[2], { variant: "v-soft" }); }).join("") +
'<div class="end">已经到底了</div></div>'
);
var manage = phone("管理态 · 勾选居中",
'<div class="s1-toolbar"><div class="search">搜索流程名称</div></div>' +
'<div class="s1-head"><div class="s1-count">已选 <strong>1</strong> / 3</div><div class="s1-link is-done">完成</div></div>' +
'<div class="batch"><span>已选 1 项</span><button>批量删除</button></div>' +
'<div class="list">' +
'<div class="row is-on"><div class="check"><span class="on">✓</span></div>' + cardHtml(ROWS[0][0], ROWS[0][1], ROWS[0][2], { noActions: true, variant: "v-soft" }) + '</div>' +
'<div class="row"><div class="check"><span></span></div>' + cardHtml(ROWS[1][0], ROWS[1][1], ROWS[1][2], { noActions: true, variant: "v-soft" }) + '</div>' +
'<div class="row"><div class="check"><span></span></div>' + cardHtml(ROWS[2][0], ROWS[2][1], ROWS[2][2], { noActions: true, variant: "v-soft" }) + '</div>' +
'</div>'
);
return normal + manage;
}
function renderS2() {
var normal = phone("普通态 · 胶囊",
'<div class="s2-toolbar"><div class="search" style="flex:1">搜索流程名称</div>' +
'<button class="s2-chip">' + ICON_GEAR + '管理</button></div>' +
'<div class="list">' +
ROWS.map(function (r) { return cardHtml(r[0], r[1], r[2], { variant: "v-accent" }); }).join("") +
'<div class="end">已经到底了</div></div>'
);
var manage = phone("管理态 · 勾选居中",
'<div class="s2-toolbar"><div class="search" style="flex:1">搜索流程名称</div>' +
'<button class="s2-chip is-on">完成</button></div>' +
'<div class="batch"><span>已选 1 项</span><button>批量删除</button></div>' +
'<div class="list">' +
'<div class="row is-on"><div class="check"><span class="on">✓</span></div>' + cardHtml(ROWS[0][0], ROWS[0][1], ROWS[0][2], { noActions: true, variant: "v-accent" }) + '</div>' +
'<div class="row"><div class="check"><span></span></div>' + cardHtml(ROWS[1][0], ROWS[1][1], ROWS[1][2], { noActions: true, variant: "v-accent" }) + '</div>' +
'<div class="row"><div class="check"><span></span></div>' + cardHtml(ROWS[2][0], ROWS[2][1], ROWS[2][2], { noActions: true, variant: "v-accent" }) + '</div>' +
'</div>'
);
return normal + manage;
}
function renderS3() {
var normal = phone("普通态 · 次级条",
'<div class="s3-toolbar"><div class="search">搜索流程名称</div>' +
'<div class="s3-sub"><span class="s3-hint">可批量删除不用的草稿</span><button class="s3-btn">管理</button></div></div>' +
'<div class="list">' +
ROWS.map(function (r) { return cardHtml(r[0], r[1], r[2]); }).join("") +
'<div class="end">已经到底了</div></div>'
);
var manage = phone("管理态 · 勾选居中",
'<div class="s3-toolbar"><div class="search">搜索流程名称</div>' +
'<div class="s3-sub"><span class="s3-hint">点选草稿后可批量删除</span><button class="s3-btn is-on">完成</button></div></div>' +
'<div class="batch"><span>已选 1 项</span><button>批量删除</button></div>' +
'<div class="list">' +
'<div class="row is-on"><div class="check"><span class="on">✓</span></div>' + cardHtml(ROWS[0][0], ROWS[0][1], ROWS[0][2], { noActions: true }) + '</div>' +
'<div class="row"><div class="check"><span></span></div>' + cardHtml(ROWS[1][0], ROWS[1][1], ROWS[1][2], { noActions: true }) + '</div>' +
'<div class="row"><div class="check"><span></span></div>' + cardHtml(ROWS[2][0], ROWS[2][1], ROWS[2][2], { noActions: true }) + '</div>' +
'</div>'
);
return normal + manage;
}
function renderS4() {
var normal = phone("普通态 · 底栏",
'<div class="s4-page">' +
'<div class="s4-toolbar"><div class="search">搜索流程名称</div></div>' +
'<div class="list">' +
ROWS.map(function (r) { return cardHtml(r[0], r[1], r[2], { variant: "v-soft", inlineMeta: true }); }).join("") +
'<div class="end">已经到底了</div></div>' +
'<div class="s4-dock"><span class="hint">共 3 条草稿</span><button class="btn">管理</button></div>' +
'</div>'
);
var manage = phone("管理态 · 底栏批量",
'<div class="s4-page">' +
'<div class="s4-toolbar"><div class="search">搜索流程名称</div></div>' +
'<div class="list">' +
'<div class="row is-on"><div class="check"><span class="on">✓</span></div>' + cardHtml(ROWS[0][0], ROWS[0][1], ROWS[0][2], { noActions: true, variant: "v-soft", inlineMeta: true }) + '</div>' +
'<div class="row"><div class="check"><span></span></div>' + cardHtml(ROWS[1][0], ROWS[1][1], ROWS[1][2], { noActions: true, variant: "v-soft", inlineMeta: true }) + '</div>' +
'<div class="row"><div class="check"><span></span></div>' + cardHtml(ROWS[2][0], ROWS[2][1], ROWS[2][2], { noActions: true, variant: "v-soft", inlineMeta: true }) + '</div>' +
'</div>' +
'<div class="s4-dock is-manage">' +
'<span class="hint">已选 1 项</span>' +
'<div style="display:flex;gap:8px">' +
'<button class="danger">批量删除</button>' +
'<button class="btn">完成</button>' +
'</div>' +
'</div>' +
'</div>'
);
return normal + manage;
}
function renderCards() {
return (
phone("Soft · 柔阴影",
'<div class="s1-toolbar"><div class="search">搜索流程名称</div></div>' +
'<div class="s1-head"><div class="s1-count">共 <strong>3</strong> 条</div><div class="s1-link">管理</div></div>' +
'<div class="list">' + ROWS.map(function (r) { return cardHtml(r[0], r[1], r[2], { variant: "v-soft" }); }).join("") + '</div>'
) +
phone("Accent · 左色条",
'<div class="s1-toolbar"><div class="search">搜索流程名称</div></div>' +
'<div class="s1-head"><div class="s1-count">共 <strong>3</strong> 条</div><div class="s1-link">管理</div></div>' +
'<div class="list">' + ROWS.map(function (r) { return cardHtml(r[0], r[1], r[2], { variant: "v-accent" }); }).join("") + '</div>'
) +
phone("Flat · 扁平一行元信息",
'<div class="s1-toolbar"><div class="search">搜索流程名称</div></div>' +
'<div class="s1-head"><div class="s1-count">共 <strong>3</strong> 条</div><div class="s1-link">管理</div></div>' +
'<div class="list">' + ROWS.map(function (r) { return cardHtml(r[0], r[1], r[2], { variant: "v-flat", inlineMeta: true }); }).join("") + '</div>'
)
);
}
const RENDER = {
a0: renderA0,
s1: renderS1,
s2: renderS2,
s3: renderS3,
s4: renderS4,
cards: renderCards
};
const descEl = document.getElementById("desc");
const phonesEl = document.getElementById("phones");
const tabs = document.getElementById("tabs");
function show(key) {
var d = DESCS[key];
descEl.innerHTML =
"<h2>" + d.title + "</h2>" +
'<p class="sub">' + d.sub + "</p>" +
"<ul>" + d.items.map(function (i) { return "<li>" + i + "</li>"; }).join("") + "</ul>" +
'<div class="pick">' + d.pick + "</div>";
phonesEl.innerHTML = RENDER[key]();
}
tabs.addEventListener("click", function (e) {
var btn = e.target.closest(".tab");
if (!btn) return;
tabs.querySelectorAll(".tab").forEach(function (t) {
t.classList.toggle("is-active", t === btn);
});
show(btn.getAttribute("data-k"));
});
show("a0");
</script>
</body>
</html>