679 lines
29 KiB
HTML
679 lines
29 KiB
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>草稿箱 · 模式 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>
|