| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684 |
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <title>OA 表单设计器 · 画布描边方案对比</title>
- <style>
- :root {
- --mint: #10b981;
- --mint-dark: #059669;
- --mint-bg: #ecfdf5;
- --mint-soft: rgba(16, 185, 129, 0.35);
- --mint-softer: rgba(16, 185, 129, 0.18);
- --slate-50: #f8fafc;
- --slate-100: #f1f5f9;
- --slate-200: #e2e8f0;
- --slate-400: #94a3b8;
- --slate-500: #64748b;
- --slate-700: #334155;
- --slate-900: #0f172a;
- --blue: #2e73ff;
- }
- * { box-sizing: border-box; }
- body {
- margin: 0;
- font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
- color: var(--slate-900);
- background: linear-gradient(180deg, #f0fdf9 0%, var(--slate-50) 40%, #fff 100%);
- line-height: 1.5;
- }
- .page {
- max-width: 1180px;
- margin: 0 auto;
- padding: 32px 24px 64px;
- }
- header {
- margin-bottom: 28px;
- }
- header h1 {
- margin: 0 0 8px;
- font-size: 24px;
- font-weight: 700;
- letter-spacing: -0.02em;
- }
- header p {
- margin: 0;
- color: var(--slate-500);
- font-size: 14px;
- max-width: 720px;
- }
- .hint {
- display: inline-flex;
- align-items: center;
- gap: 6px;
- margin-top: 12px;
- padding: 6px 12px;
- border-radius: 8px;
- background: var(--mint-bg);
- color: var(--mint-dark);
- font-size: 13px;
- font-weight: 500;
- }
- .grid {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- gap: 20px;
- }
- @media (max-width: 900px) {
- .grid { grid-template-columns: 1fr; }
- }
- .card {
- background: #fff;
- border: 1px solid var(--slate-200);
- border-radius: 12px;
- overflow: hidden;
- box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
- transition: box-shadow 0.2s, border-color 0.2s;
- cursor: pointer;
- }
- .card:hover {
- border-color: #a7f3d0;
- box-shadow: 0 8px 24px rgba(16, 185, 129, 0.1);
- }
- .card.selected {
- border-color: var(--mint);
- box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
- }
- .card-head {
- display: flex;
- align-items: flex-start;
- gap: 12px;
- padding: 14px 16px 12px;
- border-bottom: 1px solid var(--slate-100);
- background: var(--slate-50);
- }
- .badge {
- flex-shrink: 0;
- width: 28px;
- height: 28px;
- border-radius: 8px;
- background: var(--mint);
- color: #fff;
- font-size: 13px;
- font-weight: 700;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .card.baseline .badge { background: var(--slate-400); }
- .card-head h2 {
- margin: 0 0 2px;
- font-size: 15px;
- font-weight: 650;
- }
- .card-head p {
- margin: 0;
- font-size: 12px;
- color: var(--slate-500);
- }
- .tag-row {
- display: flex;
- flex-wrap: wrap;
- gap: 6px;
- margin-top: 8px;
- }
- .tag {
- font-size: 11px;
- padding: 2px 8px;
- border-radius: 999px;
- background: var(--slate-100);
- color: var(--slate-500);
- }
- .tag.rec {
- background: var(--mint-bg);
- color: var(--mint-dark);
- font-weight: 600;
- }
- .tag.warn {
- background: #fff7ed;
- color: #c2410c;
- }
- .canvas {
- padding: 16px;
- min-height: 220px;
- background: #fafafa;
- user-select: none;
- }
- .canvas-label {
- font-size: 11px;
- color: var(--slate-400);
- margin-bottom: 10px;
- letter-spacing: 0.02em;
- }
- /* —— 通用控件外观 —— */
- .field {
- padding: 8px 10px;
- background: #fff;
- border-radius: 4px;
- }
- .field-label {
- font-size: 12px;
- color: var(--slate-700);
- margin-bottom: 6px;
- }
- .field-ctrl {
- height: 32px;
- border: 1px solid var(--slate-200);
- border-radius: 6px;
- background: #fff;
- display: flex;
- align-items: center;
- padding: 0 10px;
- font-size: 12px;
- color: var(--slate-400);
- }
- .layout {
- padding: 8px;
- background: rgba(255, 255, 255, 0.6);
- border-radius: 4px;
- }
- .layout-title {
- font-size: 11px;
- color: var(--slate-400);
- margin-bottom: 8px;
- padding-left: 2px;
- }
- .row {
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 8px;
- }
- .stack > * + * { margin-top: 8px; }
- /* DragTool 模拟:操作钮 */
- .dt {
- position: relative;
- padding: 2px;
- border-radius: 2px;
- }
- .dt-btns {
- display: none;
- position: absolute;
- right: 2px;
- bottom: 2px;
- z-index: 5;
- gap: 2px;
- }
- .dt-btns span {
- width: 18px;
- height: 18px;
- background: var(--mint);
- color: #fff;
- font-size: 10px;
- display: flex;
- align-items: center;
- justify-content: center;
- border-radius: 2px;
- }
- .dt.active > .dt-btns,
- .dt:hover > .dt-btns { display: flex; }
- /* ========== A 现状:始终虚线 ========== */
- .style-a .dt {
- outline: 1px dashed var(--mint);
- }
- .style-a .dt.active {
- outline: 1px solid var(--mint);
- }
- .style-a .dt:hover:not(.active) {
- outline-style: solid;
- outline-color: var(--mint-soft);
- }
- /* ========== B 悬停才显:默认无框 ========== */
- .style-b .dt {
- outline: 1px dashed transparent;
- }
- .style-b .dt:hover {
- outline-color: var(--mint-soft);
- outline-style: solid;
- }
- .style-b .dt.active {
- outline: 1px solid var(--mint);
- }
- /* ========== C 仅选中:最干净 ========== */
- .style-c .dt {
- outline: 1px solid transparent;
- }
- .style-c .dt.active {
- outline-color: var(--mint);
- }
- .style-c .dt:hover:not(.active) {
- background: rgba(16, 185, 129, 0.04);
- }
- /* ========== D 淡化常驻:浅虚线 ========== */
- .style-d .dt {
- outline: 1px dashed var(--mint-softer);
- }
- .style-d .dt:hover {
- outline-color: var(--mint-soft);
- outline-style: solid;
- }
- .style-d .dt.active {
- outline: 1px solid var(--mint);
- }
- /* ========== E 混合:布局淡框 + 字段悬停 ========== */
- .style-e .dt.leaf {
- outline: 1px dashed transparent;
- }
- .style-e .dt.leaf:hover {
- outline-color: var(--mint-soft);
- outline-style: solid;
- }
- .style-e .dt.leaf.active {
- outline: 1px solid var(--mint);
- }
- .style-e .dt.container {
- outline: 1px dashed var(--mint-softer);
- }
- .style-e .dt.container:hover {
- outline-color: var(--mint-soft);
- }
- .style-e .dt.container.active {
- outline: 1px solid var(--mint);
- }
- /* ========== F 父级指示条:左侧色条代替四周虚线 ========== */
- .style-f .dt {
- outline: none;
- border-left: 2px solid transparent;
- padding-left: 6px;
- }
- .style-f .dt.container {
- border-left-color: var(--mint-softer);
- background: rgba(16, 185, 129, 0.03);
- }
- .style-f .dt:hover {
- border-left-color: var(--mint-soft);
- background: rgba(16, 185, 129, 0.05);
- }
- .style-f .dt.active {
- border-left-color: var(--mint);
- background: rgba(16, 185, 129, 0.08);
- box-shadow: inset 0 0 0 1px var(--mint);
- }
- footer {
- margin-top: 28px;
- padding: 16px 18px;
- border-radius: 12px;
- background: #fff;
- border: 1px solid var(--slate-200);
- font-size: 13px;
- color: var(--slate-500);
- }
- footer strong { color: var(--slate-700); }
- #choice {
- margin-top: 8px;
- font-weight: 600;
- color: var(--mint-dark);
- min-height: 1.5em;
- }
- </style>
- </head>
- <body>
- <div class="page">
- <header>
- <h1>表单设计画布 · 描边方案对比</h1>
- <p>
- 模拟「布局容器嵌套字段」场景。请在每个画布里<strong>点击选中</strong>、<strong>悬停</strong>感受差异。
- 选中整张卡片表示你倾向的方案(可多选对比后口头反馈)。
- </p>
- <div class="hint">色值对齐本项目 Mint:#10b981(已替换 FormCreate 默认蓝 #2E73FF)</div>
- </header>
- <div class="grid" id="options">
- <!-- A -->
- <article class="card baseline" data-choice="A">
- <div class="card-head">
- <div class="badge">A</div>
- <div>
- <h2>现状:始终蓝色/绿色虚线</h2>
- <p>每个组件常驻 dashed outline,嵌套时多层叠加</p>
- <div class="tag-row">
- <span class="tag warn">噪音大</span>
- <span class="tag">层级一目了然</span>
- </div>
- </div>
- </div>
- <div class="canvas style-a" data-demo>
- <div class="canvas-label">点击组件试试 · 悬停看 hover</div>
- <div class="stack">
- <div class="dt container" tabindex="0">
- <div class="layout">
- <div class="layout-title">栅格布局</div>
- <div class="row">
- <div class="dt leaf" tabindex="0">
- <div class="field">
- <div class="field-label">申请人</div>
- <div class="field-ctrl">请输入</div>
- </div>
- <div class="dt-btns"><span>⧉</span><span>×</span></div>
- </div>
- <div class="dt leaf" tabindex="0">
- <div class="field">
- <div class="field-label">部门</div>
- <div class="field-ctrl">请选择</div>
- </div>
- <div class="dt-btns"><span>⧉</span><span>×</span></div>
- </div>
- </div>
- </div>
- <div class="dt-btns"><span>+</span><span>×</span></div>
- </div>
- <div class="dt leaf" tabindex="0">
- <div class="field">
- <div class="field-label">请假事由</div>
- <div class="field-ctrl">请输入</div>
- </div>
- <div class="dt-btns"><span>⧉</span><span>×</span></div>
- </div>
- </div>
- </div>
- </article>
- <!-- B -->
- <article class="card" data-choice="B">
- <div class="card-head">
- <div class="badge">B</div>
- <div>
- <h2>悬停显框</h2>
- <p>默认无描边;悬停出现浅色实线;选中为实线主色</p>
- <div class="tag-row">
- <span class="tag rec">推荐候选</span>
- <span class="tag">操作时才出现辅助线</span>
- </div>
- </div>
- </div>
- <div class="canvas style-b" data-demo>
- <div class="canvas-label">默认干净 · 鼠标移上去才有框</div>
- <div class="stack">
- <div class="dt container" tabindex="0">
- <div class="layout">
- <div class="layout-title">栅格布局</div>
- <div class="row">
- <div class="dt leaf" tabindex="0">
- <div class="field">
- <div class="field-label">申请人</div>
- <div class="field-ctrl">请输入</div>
- </div>
- <div class="dt-btns"><span>⧉</span><span>×</span></div>
- </div>
- <div class="dt leaf" tabindex="0">
- <div class="field">
- <div class="field-label">部门</div>
- <div class="field-ctrl">请选择</div>
- </div>
- <div class="dt-btns"><span>⧉</span><span>×</span></div>
- </div>
- </div>
- </div>
- <div class="dt-btns"><span>+</span><span>×</span></div>
- </div>
- <div class="dt leaf" tabindex="0">
- <div class="field">
- <div class="field-label">请假事由</div>
- <div class="field-ctrl">请输入</div>
- </div>
- <div class="dt-btns"><span>⧉</span><span>×</span></div>
- </div>
- </div>
- </div>
- </article>
- <!-- C -->
- <article class="card" data-choice="C">
- <div class="card-head">
- <div class="badge">C</div>
- <div>
- <h2>仅选中显框</h2>
- <p>默认完全无框;悬停仅微弱底色;只有选中才有实线</p>
- <div class="tag-row">
- <span class="tag">最干净</span>
- <span class="tag">嵌套边界稍难辨认</span>
- </div>
- </div>
- </div>
- <div class="canvas style-c" data-demo>
- <div class="canvas-label">几乎像真实表单 · 点一下才高亮</div>
- <div class="stack">
- <div class="dt container" tabindex="0">
- <div class="layout">
- <div class="layout-title">栅格布局</div>
- <div class="row">
- <div class="dt leaf" tabindex="0">
- <div class="field">
- <div class="field-label">申请人</div>
- <div class="field-ctrl">请输入</div>
- </div>
- <div class="dt-btns"><span>⧉</span><span>×</span></div>
- </div>
- <div class="dt leaf" tabindex="0">
- <div class="field">
- <div class="field-label">部门</div>
- <div class="field-ctrl">请选择</div>
- </div>
- <div class="dt-btns"><span>⧉</span><span>×</span></div>
- </div>
- </div>
- </div>
- <div class="dt-btns"><span>+</span><span>×</span></div>
- </div>
- <div class="dt leaf" tabindex="0">
- <div class="field">
- <div class="field-label">请假事由</div>
- <div class="field-ctrl">请输入</div>
- </div>
- <div class="dt-btns"><span>⧉</span><span>×</span></div>
- </div>
- </div>
- </div>
- </article>
- <!-- D -->
- <article class="card" data-choice="D">
- <div class="card-head">
- <div class="badge">D</div>
- <div>
- <h2>淡化常驻虚线</h2>
- <p>保留常驻提示,但透明度大幅降低;选中再加重</p>
- <div class="tag-row">
- <span class="tag">改动最小</span>
- <span class="tag">多层仍在,只是变淡</span>
- </div>
- </div>
- </div>
- <div class="canvas style-d" data-demo>
- <div class="canvas-label">虚线还在,但不再抢眼</div>
- <div class="stack">
- <div class="dt container" tabindex="0">
- <div class="layout">
- <div class="layout-title">栅格布局</div>
- <div class="row">
- <div class="dt leaf" tabindex="0">
- <div class="field">
- <div class="field-label">申请人</div>
- <div class="field-ctrl">请输入</div>
- </div>
- <div class="dt-btns"><span>⧉</span><span>×</span></div>
- </div>
- <div class="dt leaf" tabindex="0">
- <div class="field">
- <div class="field-label">部门</div>
- <div class="field-ctrl">请选择</div>
- </div>
- <div class="dt-btns"><span>⧉</span><span>×</span></div>
- </div>
- </div>
- </div>
- <div class="dt-btns"><span>+</span><span>×</span></div>
- </div>
- <div class="dt leaf" tabindex="0">
- <div class="field">
- <div class="field-label">请假事由</div>
- <div class="field-ctrl">请输入</div>
- </div>
- <div class="dt-btns"><span>⧉</span><span>×</span></div>
- </div>
- </div>
- </div>
- </article>
- <!-- E -->
- <article class="card" data-choice="E">
- <div class="card-head">
- <div class="badge">E</div>
- <div>
- <h2>混合:布局淡框 + 字段悬停</h2>
- <p>容器保留极淡虚线帮辨层级;普通字段默认无框</p>
- <div class="tag-row">
- <span class="tag rec">推荐候选</span>
- <span class="tag">兼顾布局与干净</span>
- </div>
- </div>
- </div>
- <div class="canvas style-e" data-demo>
- <div class="canvas-label">只有「栅格」常驻淡框 · 字段悬停才出</div>
- <div class="stack">
- <div class="dt container" tabindex="0">
- <div class="layout">
- <div class="layout-title">栅格布局</div>
- <div class="row">
- <div class="dt leaf" tabindex="0">
- <div class="field">
- <div class="field-label">申请人</div>
- <div class="field-ctrl">请输入</div>
- </div>
- <div class="dt-btns"><span>⧉</span><span>×</span></div>
- </div>
- <div class="dt leaf" tabindex="0">
- <div class="field">
- <div class="field-label">部门</div>
- <div class="field-ctrl">请选择</div>
- </div>
- <div class="dt-btns"><span>⧉</span><span>×</span></div>
- </div>
- </div>
- </div>
- <div class="dt-btns"><span>+</span><span>×</span></div>
- </div>
- <div class="dt leaf" tabindex="0">
- <div class="field">
- <div class="field-label">请假事由</div>
- <div class="field-ctrl">请输入</div>
- </div>
- <div class="dt-btns"><span>⧉</span><span>×</span></div>
- </div>
- </div>
- </div>
- </article>
- <!-- F -->
- <article class="card" data-choice="F">
- <div class="card-head">
- <div class="badge">F</div>
- <div>
- <h2>左侧指示条(无四周虚线)</h2>
- <p>用左边色条 + 选中内描边,彻底去掉虚线网格感</p>
- <div class="tag-row">
- <span class="tag">视觉更现代</span>
- <span class="tag">实现略多一点</span>
- </div>
- </div>
- </div>
- <div class="canvas style-f" data-demo>
- <div class="canvas-label">无虚线框 · 左侧色条表示可编辑区域</div>
- <div class="stack">
- <div class="dt container" tabindex="0">
- <div class="layout">
- <div class="layout-title">栅格布局</div>
- <div class="row">
- <div class="dt leaf" tabindex="0">
- <div class="field">
- <div class="field-label">申请人</div>
- <div class="field-ctrl">请输入</div>
- </div>
- <div class="dt-btns"><span>⧉</span><span>×</span></div>
- </div>
- <div class="dt leaf" tabindex="0">
- <div class="field">
- <div class="field-label">部门</div>
- <div class="field-ctrl">请选择</div>
- </div>
- <div class="dt-btns"><span>⧉</span><span>×</span></div>
- </div>
- </div>
- </div>
- <div class="dt-btns"><span>+</span><span>×</span></div>
- </div>
- <div class="dt leaf" tabindex="0">
- <div class="field">
- <div class="field-label">请假事由</div>
- <div class="field-ctrl">请输入</div>
- </div>
- <div class="dt-btns"><span>⧉</span><span>×</span></div>
- </div>
- </div>
- </div>
- </article>
- </div>
- <footer>
- <strong>怎么选?</strong>
- 想尽快落地、改动小 → 看 B / D;要保留布局层级感 → 看 E;想最接近真实表单 → 看 C;想换交互隐喻 → 看 F。
- <div id="choice">请点击卡片标题区域选择倾向方案…</div>
- </footer>
- </div>
- <script>
- // 画布内:点击选中组件(互斥)
- document.querySelectorAll('[data-demo]').forEach((canvas) => {
- canvas.addEventListener('click', (e) => {
- const dt = e.target.closest('.dt')
- if (!dt || !canvas.contains(dt)) return
- e.stopPropagation()
- canvas.querySelectorAll('.dt.active').forEach((el) => el.classList.remove('active'))
- dt.classList.add('active')
- })
- })
- // 卡片选择(方案偏好)
- const choiceEl = document.getElementById('choice')
- const selected = new Set()
- document.querySelectorAll('.card').forEach((card) => {
- card.addEventListener('click', (e) => {
- // 若点在画布控件上,不切换卡片选中(避免冲突)
- if (e.target.closest('[data-demo] .dt')) return
- const key = card.dataset.choice
- if (selected.has(key)) {
- selected.delete(key)
- card.classList.remove('selected')
- } else {
- selected.add(key)
- card.classList.add('selected')
- }
- choiceEl.textContent = selected.size
- ? '当前倾向:方案 ' + [...selected].sort().join('、')
- : '请点击卡片标题区域选择倾向方案…'
- })
- })
- </script>
- </body>
- </html>
|