Files
drawlogo/_design-test/theme/index.html
T

685 lines
83 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
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">
<title>甄房业务系统 · 色彩体系选型对比(Carbon / Fiori / Ant Design)</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{background:#0a0d13;color:#e9edf5;font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
padding:40px 24px 90px;line-height:1.6}
.wrap{max-width:1500px;margin:0 auto}
h1{font-size:27px;letter-spacing:.2px}h1 b{color:#E3CB99}
.lead{color:#8b94a7;font-size:13.5px;margin:10px 0 26px;line-height:1.95}
h2{font-size:19px;margin:46px 0 6px;padding-left:11px;border-left:4px solid #C6A15B}
h2 span{font-size:11px;font-weight:400;color:#8b94a7;margin-left:10px}
h3{font-size:15px;margin:26px 0 10px;color:#E3CB99}
p.note{font-size:12.5px;color:#8b94a7;margin:8px 0 16px;line-height:1.9}
/* ── 调研结论 ── */
table.cmp{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:14px}
table.cmp th,table.cmp td{border:1px solid rgba(255,255,255,.09);padding:9px 11px;text-align:left}
table.cmp th{background:rgba(255,255,255,.045);font-weight:600;color:#cfd6e4}
table.cmp td.num{text-align:center;font-variant-numeric:tabular-nums}
table.cmp tr.win td{background:rgba(198,161,91,.10)}
table.cmp td.tot{font-weight:700;color:#E3CB99}
.badge{display:inline-block;font-size:10px;padding:1px 7px;border-radius:20px;margin-left:7px;
border:1px solid rgba(198,161,91,.45);color:#E3CB99}
.src{font-size:11px;color:#6d768a;margin-top:8px;line-height:1.9}
.src a{color:#8ab4f8;text-decoration:none}
/* ── 方案卡 ── */
.plan{border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:22px;margin-top:18px;
background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.012))}
.plan .hd{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.plan .hd h3{margin:0;font-size:18px;color:#fff}
.plan .hd .sys{font-size:11.5px;color:#8b94a7}
.plan .hd .sc{margin-left:auto;font-size:13px;color:#E3CB99;font-weight:700}
.plan .hd .finalmark{font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;
background:rgba(94,224,138,.13);border:1px solid rgba(94,224,138,.5);color:#5ee08a}
.plan.final{border-color:rgba(94,224,138,.42);box-shadow:0 0 0 1px rgba(94,224,138,.16) inset}
.plan .d{font-size:12.5px;color:#9aa4b8;margin:9px 0 16px;line-height:1.9}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.pc>div{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:11px;padding:13px 15px}
.pc h4{font-size:12.5px;margin-bottom:8px}
.pc ul{list-style:none;font-size:12px;color:#98a1b3;line-height:1.95}
.pc ul li{padding-left:15px;position:relative}
.pc ul li:before{position:absolute;left:0;top:0}
.pc .good li:before{content:'+';color:#5ee08a}
.pc .bad li:before{content:'−';color:#f0a55c}
.pc .fit li:before{content:'·';color:#8ab4f8}
/* ── 生产落地必改项 ── */
table.fix{margin-top:10px;font-size:12px}
table.fix th:nth-child(1),table.fix td:nth-child(1){width:132px}
table.fix th:nth-child(2),table.fix td:nth-child(2){width:150px}
table.fix th:nth-child(3),table.fix td:nth-child(3){width:250px}
table.fix code{background:rgba(255,255,255,.06);padding:1px 5px;border-radius:4px;font-size:11px}
table.fix td:nth-child(2) code{color:#f0a55c}
table.fix td:nth-child(3) code{color:#5ee08a}
.fixok{font-size:12.5px;color:#5ee08a;background:rgba(94,224,138,.07);
border:1px solid rgba(94,224,138,.28);border-radius:9px;padding:10px 13px;margin-top:10px}
.sumline{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.sumline div{flex:1;min-width:230px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);
border-radius:10px;padding:10px 13px;font-size:12px;color:#98a1b3}
.sumline div b{color:#e9edf5}
.sumline div em{font-style:normal;font-weight:700}
.sumline div em.ok{color:#5ee08a}.sumline div em.no{color:#f0a55c}
/* ── 令牌表 ── */
.tok{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:7px;margin-top:12px}
.tk{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);
border-radius:9px;padding:7px 10px;font-size:11.5px}
.tk i{width:22px;height:22px;border-radius:6px;flex:none;border:1px solid rgba(255,255,255,.16)}
.tk .n{flex:1;min-width:0}
.tk .n b{display:block;font-weight:600;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk .n code{color:#7f8899;font-size:10px;letter-spacing:.2px}
.tk .r{font-size:9.5px;padding:1px 6px;border-radius:20px;border:1px solid;flex:none;white-space:nowrap}
.tk .r.pass{color:#5ee08a;border-color:rgba(94,224,138,.4)}
.tk .r.fail{color:#f0a55c;border-color:rgba(240,165,92,.4)}
/* ── UI 演示(三套作用域)── */
.demo{border-radius:14px;overflow:hidden;margin-top:14px;border:1px solid rgba(255,255,255,.12);background:var(--bg);
font-family:var(--font);color:var(--text1);font-size:12.5px}
.demo[data-theme=carbon]{--brand:#0C2340;--primary:#0F62FE;--primary-h:#0043CE;--primary-a:#002D9C;--primary-s:#EDF5FF;
--bg:#FFFFFF;--bg2:#F4F4F4;--hover:#E8E8E8;--sel:#E0E0E0;--bd:#E0E0E0;--bd-s:#8D8D8D;--text1:#161616;--text2:#525252;--text3:#6F6F6F;
--ok:#198038;--warn:#F1C21B;--err:#DA1E28;--radius:2px;--sh:none;--gold:#C6A15B;
--font:"IBM Plex Sans","PingFang SC","Microsoft YaHei",sans-serif}
.demo[data-theme=fiori]{--brand:#0C2340;--primary:#0070F2;--primary-h:#0057D2;--primary-a:#0040B0;--primary-s:rgba(0,112,242,.08);
--bg:#FFFFFF;--bg2:#F5F6F7;--hover:rgba(0,112,242,.06);--sel:rgba(0,112,242,.10);--bd:#D5DADD;--bd-s:#A9B4BE;--text1:#223548;--text2:#475E75;--text3:#5B738B;
--ok:#256F3A;--warn:#E76500;--err:#D20A0A;--radius:8px;--sh:0 1px 2px rgba(34,53,72,.08);--gold:#C6A15B;
--font:"72","PingFang SC","Microsoft YaHei",sans-serif}
.demo[data-theme=antd]{--brand:#0C2340;--primary:#1677FF;--primary-h:#4096FF;--primary-a:#0958D9;--primary-s:#E6F4FF;
--bg:#FFFFFF;--bg2:#F5F5F5;--hover:#F5F5F5;--sel:#E6F4FF;--bd:#D9D9D9;--bd-s:#BFBFBF;--text1:#1F1F1F;--text2:#595959;--text3:#8C8C8C;
--ok:#52C41A;--warn:#FAAD14;--err:#FF4D4F;--radius:6px;--sh:0 1px 2px rgba(0,0,0,.06);--gold:#C6A15B;
--font:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif}
.app{display:grid;grid-template-columns:196px 1fr;min-height:540px}
.app .side{background:var(--brand);padding:14px 0;display:flex;flex-direction:column;gap:2px}
.app .side .brand{display:flex;align-items:center;gap:9px;padding:2px 14px 16px;color:#fff}
.app .side .brand b{font-size:15px;font-weight:600;letter-spacing:1px}
.app .side .brand em{font-size:8px;letter-spacing:1.4px;opacity:.62;font-style:normal;display:block}
.app .side a{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.72);text-decoration:none;
font-size:12.5px;padding:9px 14px;border-left:3px solid transparent}
.app .side a.on{background:rgba(255,255,255,.10);color:#fff;border-left-color:var(--gold);font-weight:600}
.app .side a .d{width:6px;height:6px;border-radius:2px;background:currentColor;opacity:.55;flex:none}
.app .main{display:flex;flex-direction:column;min-width:0}
.app .top{display:flex;align-items:center;gap:14px;padding:11px 18px;border-bottom:1px solid var(--bd);background:var(--bg)}
.app .top .crumb{font-size:12.5px;color:var(--text2)}
.app .top .crumb b{color:var(--text1);font-weight:600}
.app .top .usr{margin-left:auto;font-size:12px;color:var(--text2);display:flex;align-items:center;gap:8px}
.app .top .usr .av{width:24px;height:24px;border-radius:50%;background:var(--primary-s);color:var(--primary);
display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:600}
.app .body{padding:14px 18px 20px;background:var(--bg2);flex:1;display:flex;flex-direction:column;gap:12px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.kpi{background:var(--bg);border:1px solid var(--bd);border-radius:var(--radius);padding:11px 13px;box-shadow:var(--sh)}
.kpi .t{font-size:11px;color:var(--text3)}
.kpi .v{font-size:20px;font-weight:600;color:var(--text1);margin-top:3px;font-variant-numeric:tabular-nums}
.kpi .v em{font-size:11px;font-style:normal;color:var(--text3);font-weight:400;margin-left:3px}
.kpi .d{font-size:10.5px;margin-top:2px}
.kpi .d.up{color:var(--ok)}.kpi .d.dn{color:var(--err)}
.kpi.gold .v{color:var(--gold)}
.card{background:var(--bg);border:1px solid var(--bd);border-radius:var(--radius);box-shadow:var(--sh)}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;padding:13px}
.f{display:flex;flex-direction:column;gap:4px}
.f label{font-size:11px;color:var(--text3)}
.f input,.f select{font-family:inherit;font-size:12.5px;color:var(--text1);background:var(--bg);
border:1px solid var(--bd);border-radius:var(--radius);padding:6px 9px;min-width:132px}
.f input::placeholder{color:var(--text3)}
.f input:focus,.f select:focus{outline:2px solid var(--primary);outline-offset:-1px;border-color:var(--primary)}
.f.err input{border-color:var(--err)}
.f .msg{font-size:10.5px;color:var(--err)}
.btns{display:flex;gap:8px;margin-left:auto}
.btn{font-family:inherit;font-size:12.5px;border-radius:var(--radius);padding:6px 15px;cursor:default;
border:1px solid var(--bd);background:var(--bg);color:var(--text1);white-space:nowrap}
.btn.pri{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:500}
.btn.pri.h{background:var(--primary-h);border-color:var(--primary-h)}
.btn.pri.a{background:var(--primary-a);border-color:var(--primary-a)}
.btn.dan{background:var(--err);border-color:var(--err);color:#fff}
.btn.gho{border-color:var(--primary);color:var(--primary);background:transparent}
.btn.tx{border-color:transparent;background:transparent;color:var(--primary);padding:6px 6px}
.btn.dis{background:var(--bg2);border-color:var(--bd);color:var(--text3);opacity:.75}
.tbl{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
.tbl th{text-align:left;font-weight:600;font-size:11.5px;color:var(--text2);background:var(--bg2);
padding:9px 11px;border-bottom:1px solid var(--bd);white-space:nowrap}
.tbl td{padding:9px 11px;border-bottom:1px solid var(--bd);color:var(--text1)}
.tbl tbody tr:nth-child(even){background:var(--bg2)}
.tbl tbody tr.hov{background:var(--hover)}
.tbl tbody tr.sel{background:var(--sel)}
.tbl tbody tr.sel td:first-child{box-shadow:inset 2px 0 0 var(--primary)}
.tbl .code{color:var(--primary);font-weight:500}
.tbl .sub{color:var(--text3);font-size:11px;display:block}
.tbl .op a{color:var(--primary);text-decoration:none;margin-right:9px;font-size:12px}
.tbl .op a.dan{color:var(--err)}
.tag{display:inline-block;font-size:10.5px;padding:1px 8px;border-radius:20px;border:1px solid;white-space:nowrap}
.tag.ok{color:var(--ok);border-color:var(--ok);background:color-mix(in srgb,var(--ok) 9%,transparent)}
.tag.wn{color:var(--warn);border-color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent)}
.tag.er{color:var(--err);border-color:var(--err);background:color-mix(in srgb,var(--err) 9%,transparent)}
.tag.pri{color:var(--primary);border-color:var(--primary);background:var(--primary-s)}
.tag.nu{color:var(--text2);border-color:var(--bd-s);background:transparent}
.tag.gold{color:#8a6a2f;border-color:var(--gold);background:color-mix(in srgb,var(--gold) 14%,transparent)}
.pager{display:flex;align-items:center;gap:7px;padding:11px 13px;font-size:12px;color:var(--text2)}
.pg{min-width:26px;height:26px;display:flex;align-items:center;justify-content:center;border:1px solid var(--bd);
border-radius:var(--radius);background:var(--bg);color:var(--text1)}
.pg.on{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--bd);padding:0 13px}
.tabs a{font-size:12.5px;padding:9px 13px;color:var(--text2);text-decoration:none;border-bottom:2px solid transparent}
.tabs a.on{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}
.alerts{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.al{display:flex;gap:8px;align-items:flex-start;font-size:12px;padding:9px 12px;border-radius:var(--radius);border:1px solid}
.al b{font-weight:600}
.al.i{border-color:var(--primary);background:var(--primary-s);color:var(--text1)}
.al.s{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 8%,transparent);color:var(--text1)}
.al.w{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 11%,transparent);color:var(--text1)}
.al.e{border-color:var(--err);background:color-mix(in srgb,var(--err) 8%,transparent);color:var(--text1)}
/* 元素级对照 */
.elcmp{margin-top:12px;border:1px solid rgba(255,255,255,.09);border-radius:12px;overflow:hidden}
table.el{width:100%;border-collapse:collapse;font-size:12px}
table.el th,table.el td{border-bottom:1px solid rgba(255,255,255,.08);padding:8px 12px;vertical-align:middle}
table.el th{background:rgba(255,255,255,.04);color:#cfd6e4;font-size:11.5px;text-align:left}
table.el td:first-child{color:#8b94a7;font-size:11.5px;width:118px}
table.el td .demo{display:inline-block;margin:0;padding:9px 12px;border:none;border-radius:8px;min-width:0}
</style></head><body><div class="wrap">
<h1>甄房业务系统 · <b>色彩体系选型对比</b></h1>
<div class="lead">
面向「经纪人高频长时使用」的业务平台,从全球主流 SaaS / ERP 设计系统中筛选出综合评分最高的三套,
各自结合已定稿的 LOGO(框内 Forte Z + 甄房墨蓝 <code>#0C2340</code>)开发完整界面色彩方案。<br>
三套方案的界面结构完全相同,只替换色彩令牌 —— 保证对比公平。<b>所有对比度数值由页面运行时真实计算</b>,非人工填写。
</div>
<h2>一、调研结论<span>数据来源:三家官方设计系统文档</span></h2>
<p class="note">筛选维度与权重:数据密度适配 25% | 长时使用舒适度 20% | 无障碍可推导性 15% | 品牌融合度 15% | 落地迁移成本 15% | 行业验证广度 10%。<br>
注意:「无障碍」一列评的是<b>体系提供了多少可推导的对比度规则</b>,与默认色盘的实际通过率并不同向 —— Carbon 规则最硬,但它把 Yellow 30 定位成警报条底色,被当文字色用就会不达标;AntD 规则最少,默认色盘实测反而是问题最多的。所以下面每一套都给出<b>实测通过率</b>与<b>生产落地必改项</b>。</p>
<table class="cmp">
<thead><tr><th>体系</th><th>定位与代表产品</th><th class="num">密度25%</th><th class="num">舒适20%</th><th class="num">无障碍15%</th><th class="num">品牌15%</th><th class="num">成本15%</th><th class="num">验证10%</th><th class="num">加权总分</th></tr></thead>
<tbody>
<tr><td><b>IBM Carbon Design System</b></td><td style="color:#98a1b3">IBM 全线产品 · 数据密集型企业级标杆</td>
<td class="num">9.5</td><td class="num">9.5</td><td class="num">10.0</td><td class="num">8.5</td><td class="num">7.5</td><td class="num">9.0</td>
<td class="num tot">9.08</td></tr><tr><td><b>SAP Fiori · Morning Horizon</b></td><td style="color:#98a1b3">SAP S/4HANA、Ariba 等 ERP 全线</td>
<td class="num">9.0</td><td class="num">8.8</td><td class="num">9.5</td><td class="num">8.0</td><td class="num">7.0</td><td class="num">9.5</td>
<td class="num tot">8.63</td></tr><tr><td><b>Ant Design 5</b></td><td style="color:#98a1b3">阿里/蚂蚁中后台生态 · 国内事实标准</td>
<td class="num">8.0</td><td class="num">7.5</td><td class="num">8.0</td><td class="num">8.5</td><td class="num">9.5</td><td class="num">9.0</td>
<td class="num tot">8.30</td></tr>
</tbody></table>
<div class="src">
依据:Carbon 官方明确「Neutral Gray family is dominant」并规定「避免使用中间调」,Blue 60 <code>#0f62fe</code> 为全局 primary action,四套官方主题(White / Gray 10 / Gray 90 / Gray 100);<br>
Fiori Horizon 提供 S0–S8 表面、T1–T9 文字、边框、语义、强调五组语义令牌,并给出「相隔 4 级 = 3:1、相隔 5 级 = 4.5:1」的可推导对比度规则;<br>
Ant Design 5 以 <code>colorPrimary #1677ff</code> 为种子令牌,色板由算法生成 12 色 × 10 阶,第 6 阶满足 WCAG 4.5:1。<br>
参考:<a href="https://carbondesignsystem.com/elements/color/tokens/">Carbon Color Tokens</a> ·
<a href="https://experience.sap.com/fiori-design-web/v1-110/theming/">SAP Fiori Theming</a> ·
<a href="https://ant-design.antgroup.com/docs/spec/colors-cn">Ant Design 色彩</a>
</div>
<h2>二、三套方案的完整界面</h2>
<p class="note">
核心策略:<b>品牌色与交互色分离</b> —— 三套方案都把甄房墨蓝 <code>#0C2340</code> 固定在品牌/导航区(侧栏、Shell Bar、登录页),
交互色各自沿用体系的官方主色(<code>#0F62FE</code> / <code>#0070F2</code> / <code>#1677FF</code>)。
这样既保住品牌识别,又拿到该体系已验证的交互反馈与无障碍保障。
</p>
<div class="sumline" id="wcag-summary"></div>
<div class="plan">
<div class="hd"><h3>方案 A · Carbon 严谨派</h3><span class="sys">IBM Carbon Design System</span><span class="sc">加权 9.08 / 10</span></div>
<div class="d">以中性灰主导、蓝色只承担「行动色」的经典企业级体系。四套官方主题(White / Gray 10 / Gray 90 / Gray 100)与分层模型,为数据密集型界面而生。</div>
<div class="demo" data-theme="carbon">
<div class="app">
<aside class="side">
<div class="brand"><svg viewBox="0 0 64 64" width="30" height="30"><g transform="translate(5.3304 5.3294) scale(2.22222)"><path d="M3 11.99v2.51c0 3.3 0 4.95 1.025 5.975S6.7 21.5 10 21.5h4c3.3 0 4.95 0 5.975-1.025S21 17.8 21 14.5v-2.51c0-1.682 0-2.522-.356-3.25s-1.02-1.244-2.346-2.276l-2-1.555C14.233 3.303 13.2 2.5 12 2.5s-2.233.803-4.298 2.409l-2 1.555C4.375 7.496 3.712 8.012 3.356 8.74S3 10.308 3 11.99" fill="none" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><path d="M27.97 39.99 C27.85 40.09 27.73 40.19 27.25 40.59 C26.78 40.99 25.73 41.87 25.12 42.39 C24.52 42.91 23.97 43.38 23.61 43.70 C23.25 44.02 23.15 44.11 22.96 44.29 C22.77 44.47 22.59 44.63 22.45 44.78 C22.30 44.93 22.18 45.05 22.07 45.17 C21.96 45.29 21.86 45.40 21.77 45.51 C21.68 45.63 21.59 45.75 21.52 45.85 C21.46 45.96 21.40 46.05 21.36 46.15 C21.31 46.24 21.28 46.35 21.26 46.41 C21.25 46.47 21.25 46.48 21.25 46.52 C21.25 46.55 21.25 46.59 21.25 46.63 C21.25 46.66 21.26 46.71 21.27 46.75 C21.28 46.78 21.29 46.82 21.31 46.86 C21.33 46.90 21.35 46.94 21.37 46.98 C21.39 47.01 21.39 47.02 21.44 47.07 C21.49 47.13 21.58 47.22 21.66 47.29 C21.74 47.36 21.84 47.43 21.93 47.48 C22.03 47.54 22.10 47.58 22.21 47.63 C22.32 47.69 22.45 47.75 22.58 47.79 C22.70 47.84 22.81 47.89 22.94 47.93 C23.07 47.97 23.20 48.01 23.35 48.06 C23.51 48.10 23.69 48.15 23.86 48.19 C24.03 48.22 24.18 48.26 24.35 48.29 C24.53 48.32 24.70 48.36 24.89 48.39 C25.07 48.42 25.25 48.44 25.46 48.47 C25.67 48.50 25.92 48.53 26.14 48.55 C26.37 48.58 26.45 48.59 26.78 48.62 C27.12 48.64 27.66 48.68 28.16 48.70 C28.65 48.72 29.24 48.74 29.74 48.74 C30.25 48.75 30.75 48.74 31.21 48.73 C31.68 48.72 32.10 48.69 32.54 48.66 C32.97 48.63 33.41 48.59 33.84 48.54 C34.26 48.49 34.70 48.43 35.09 48.37 C35.48 48.31 35.91 48.22 36.17 48.17 C36.44 48.11 36.51 48.09 36.68 48.05 C36.86 48.01 37.05 47.95 37.22 47.91 C37.38 47.86 37.53 47.82 37.67 47.77 C37.82 47.72 37.96 47.67 38.10 47.62 C38.23 47.57 38.36 47.52 38.49 47.47 C38.61 47.42 38.73 47.36 38.84 47.31 C38.96 47.25 39.06 47.20 39.16 47.14 C39.27 47.08 39.38 47.01 39.48 46.95 C39.59 46.88 39.68 46.81 39.77 46.74 C39.86 46.67 39.94 46.60 40.03 46.53 C40.11 46.46 40.19 46.38 40.28 46.30 C40.36 46.21 40.44 46.13 40.52 46.04 C40.60 45.94 40.68 45.85 40.76 45.75 C40.84 45.65 40.92 45.55 41.00 45.44 C41.08 45.32 41.18 45.18 41.25 45.07 C41.32 44.95 41.38 44.85 41.44 44.75 C41.50 44.64 41.55 44.55 41.59 44.45 C41.64 44.35 41.69 44.24 41.72 44.15 C41.75 44.06 41.77 43.99 41.79 43.91 C41.81 43.83 41.82 43.74 41.83 43.67 C41.84 43.60 41.84 43.54 41.83 43.49 C41.82 43.44 41.81 43.39 41.79 43.35 C41.77 43.31 41.74 43.28 41.71 43.25 C41.67 43.23 41.63 43.20 41.58 43.18 C41.53 43.16 41.48 43.15 41.42 43.14 C41.36 43.13 41.31 43.12 41.24 43.12 C41.17 43.11 41.10 43.11 41.02 43.11 C40.94 43.12 40.88 43.12 40.76 43.13 C40.64 43.15 40.66 43.14 40.32 43.19 C39.97 43.25 39.23 43.38 38.70 43.46 C38.18 43.54 37.72 43.60 37.16 43.67 C36.60 43.73 35.90 43.81 35.34 43.86 C34.79 43.91 34.47 43.93 33.83 43.97 C33.19 44.00 31.89 44.06 31.48 44.07 C31.07 44.09 31.40 44.06 31.37 44.04 C31.34 44.03 31.31 44.00 31.29 43.97 C31.27 43.94 31.25 43.91 31.24 43.87 C31.24 43.84 31.24 43.80 31.24 43.77 C31.25 43.73 31.21 43.79 31.28 43.68 C31.34 43.57 31.50 43.30 31.64 43.10 C31.78 42.90 31.88 42.78 32.11 42.49 C32.34 42.20 32.68 41.78 33.02 41.37 C33.36 40.96 33.71 40.55 34.18 40.01 C34.65 39.47 35.17 38.88 35.85 38.12 C36.52 37.36 37.42 36.36 38.25 35.46 C39.08 34.57 40.29 33.32 40.84 32.75 C41.39 32.17 41.32 32.26 41.56 32.02 C41.81 31.78 42.11 31.50 42.31 31.30 C42.52 31.10 42.65 30.96 42.77 30.82 C42.90 30.69 42.99 30.57 43.06 30.47 C43.14 30.37 43.19 30.28 43.22 30.23 C43.25 30.17 43.25 30.15 43.25 30.12 C43.26 30.09 43.25 30.08 43.24 30.05 C43.23 30.03 43.23 30.02 43.19 29.98 C43.16 29.93 43.08 29.84 43.03 29.79 C42.99 29.75 42.97 29.73 42.94 29.71 C42.91 29.68 42.90 29.67 42.84 29.64 C42.78 29.61 42.67 29.56 42.57 29.53 C42.46 29.49 42.34 29.46 42.21 29.44 C42.09 29.41 41.97 29.39 41.80 29.37 C41.64 29.35 41.45 29.34 41.23 29.32 C41.01 29.31 40.74 29.29 40.48 29.29 C40.21 29.28 40.30 29.27 39.62 29.26 C38.94 29.26 37.39 29.25 36.39 29.26 C35.40 29.27 34.54 29.32 33.64 29.34 C32.74 29.37 31.68 29.39 31.01 29.40 C30.33 29.41 30.06 29.40 29.59 29.41 C29.12 29.41 28.50 29.43 28.19 29.44 C27.89 29.45 27.88 29.45 27.76 29.46 C27.63 29.48 27.54 29.49 27.45 29.51 C27.36 29.53 27.31 29.55 27.23 29.58 C27.16 29.62 27.10 29.65 27.00 29.71 C26.90 29.78 26.77 29.88 26.66 29.97 C26.54 30.07 26.43 30.16 26.32 30.26 C26.21 30.36 26.10 30.46 26.00 30.56 C25.90 30.66 25.80 30.77 25.70 30.88 C25.60 30.98 25.51 31.09 25.42 31.20 C25.33 31.32 25.22 31.45 25.14 31.57 C25.05 31.68 24.97 31.80 24.91 31.91 C24.84 32.01 24.79 32.11 24.74 32.20 C24.70 32.29 24.67 32.36 24.65 32.43 C24.62 32.50 24.61 32.55 24.60 32.61 C24.59 32.67 24.60 32.74 24.60 32.80 C24.61 32.85 24.62 32.90 24.64 32.94 C24.66 32.99 24.68 33.04 24.72 33.09 C24.75 33.13 24.80 33.18 24.84 33.22 C24.89 33.26 24.94 33.29 25.00 33.32 C25.07 33.35 25.14 33.38 25.21 33.41 C25.28 33.43 25.36 33.45 25.43 33.47 C25.50 33.48 25.50 33.49 25.62 33.50 C25.74 33.52 26.04 33.55 26.15 33.56 C26.26 33.57 26.08 33.57 26.30 33.56 C26.53 33.56 27.15 33.54 27.49 33.51 C27.84 33.49 28.05 33.46 28.37 33.42 C28.69 33.39 29.03 33.34 29.40 33.29 C29.76 33.23 29.98 33.20 30.57 33.10 C31.16 33.00 32.40 32.78 32.95 32.69 C33.51 32.60 33.59 32.59 33.90 32.55 C34.20 32.51 34.54 32.47 34.79 32.44 C35.04 32.42 35.28 32.39 35.39 32.38 C35.50 32.38 35.44 32.38 35.46 32.39 C35.49 32.40 35.51 32.40 35.54 32.42 C35.56 32.43 35.58 32.45 35.60 32.47 C35.62 32.49 35.63 32.51 35.64 32.54 C35.65 32.56 35.66 32.59 35.66 32.61 C35.67 32.64 35.67 32.67 35.66 32.69 C35.65 32.72 35.68 32.69 35.62 32.78 C35.57 32.86 35.41 33.07 35.32 33.20 C35.22 33.32 35.21 33.36 35.04 33.55 C34.86 33.73 34.53 34.06 34.27 34.32 C34.01 34.58 33.79 34.79 33.46 35.10 C33.13 35.42 32.68 35.84 32.29 36.21 C31.89 36.58 31.45 36.98 31.07 37.31 C30.70 37.65 30.21 38.07 30.04 38.22 Z" fill="#FFFFFF"/></svg><span><b>甄房</b><em>ZHENFANG</em></span></div>
<a class="on"><span class="d"></span>工作台</a>
<a><span class="d"></span>房源管理</a>
<a><span class="d"></span>客源管理</a>
<a><span class="d"></span>交易管理</a>
<a><span class="d"></span>钥匙管理</a>
<a><span class="d"></span>我的佣金</a>
<a><span class="d"></span>系统设置</a>
</aside>
<div class="main">
<div class="top">
<div class="crumb">房源管理 / <b>二手房房源</b></div>
<div class="usr"><span class="av">张</span>张伟 · 滨江门店</div>
</div>
<div class="body">
<div class="kpis">
<div class="kpi"><div class="t">在售房源</div><div class="v">1,284<em>套</em></div><div class="d up">↑ 3.2% 较上周</div></div>
<div class="kpi"><div class="t">本周新增客源</div><div class="v">96<em>位</em></div><div class="d up">↑ 12 位</div></div>
<div class="kpi"><div class="t">待跟进</div><div class="v">23<em>条</em></div><div class="d dn">↓ 5 条</div></div>
<div class="kpi gold"><div class="t">本月预估佣金</div><div class="v">86.4<em>万</em></div><div class="d up">↑ 8.6%</div></div>
</div>
<div class="card filters">
<div class="f"><label>房源编码</label><input placeholder="SH-ES-..."></div>
<div class="f"><label>所属楼盘</label><select><option>滨江壹号</option><option>钱江新城</option></select></div>
<div class="f"><label>委托起始日</label><input value="2026-09-01"></div>
<div class="f err"><label>维护人</label><input value="张"><span class="msg">请输入完整姓名</span></div>
<div class="btns">
<button class="btn pri">查询</button>
<button class="btn">重置</button>
<button class="btn gho">高级筛选</button>
</div>
</div>
<div class="card">
<div class="tabs">
<a class="on">全部 1284</a><a>有效 892</a><a>维护中 236</a><a>已成交 121</a><a>暂缓 35</a>
</div>
<table class="tbl">
<thead><tr>
<th>房源编码</th><th>楼盘 / 房号</th><th>面积</th><th>售价</th><th>状态</th><th>维护人</th><th>操作</th>
</tr></thead>
<tbody>
<tr><td><span class="code">SH-ES-202609-00037</span></td>
<td>滨江壹号 3幢 1802<span class="sub">滨江区 · 钱塘江畔</span></td>
<td>128.5 ㎡</td><td>1,285 万</td><td><span class="tag ok">有效</span></td><td>张伟</td>
<td class="op"><a>查看</a><a>编辑</a></td></tr>
<tr class="hov"><td><span class="code">SH-ES-202609-00041</span></td>
<td>钱江新城 7幢 2201<span class="sub">上城区 · 万象城</span></td>
<td>156.0 ㎡</td><td>1,860 万</td><td><span class="tag pri">待检核</span></td><td>李敏</td>
<td class="op"><a>查看</a><a>编辑</a></td></tr>
<tr class="sel"><td><span class="code">SH-ES-202609-00052</span></td>
<td>滨江壹号 5幢 901<span class="sub">滨江区 · 钱塘江畔</span></td>
<td>98.2 ㎡</td><td>920 万</td><td><span class="tag gold">独家</span></td><td>王强</td>
<td class="op"><a>查看</a><a>编辑</a></td></tr>
<tr><td><span class="code">SH-ES-202609-00058</span></td>
<td>绿城桂语 2幢 1503<span class="sub">西湖区 · 文三路</span></td>
<td>142.6 ㎡</td><td>1,420 万</td><td><span class="tag wn">维护中</span></td><td>张伟</td>
<td class="op"><a>查看</a><a>编辑</a></td></tr>
<tr><td><span class="code">SH-ES-202609-00063</span></td>
<td>万科未来 1幢 608<span class="sub">余杭区 · 未来科技城</span></td>
<td>89.0 ㎡</td><td>610 万</td><td><span class="tag er">已下架</span></td><td>赵磊</td>
<td class="op"><a>查看</a><a class="dan">删除</a></td></tr>
<tr><td><span class="code">SH-ES-202609-00071</span></td>
<td>滨江壹号 2幢 1101<span class="sub">滨江区 · 钱塘江畔</span></td>
<td>110.4 ㎡</td><td>1,080 万</td><td><span class="tag nu">草稿</span></td><td>李敏</td>
<td class="op"><a>查看</a><a>编辑</a></td></tr>
</tbody>
</table>
<div class="pager">共 1,284 条
<span class="pg on">1</span><span class="pg">2</span><span class="pg">3</span>
<span class="pg">…</span><span class="pg">65</span>
<span style="margin-left:auto"></span>
<span style="font-size:11.5px">每页 20 条</span>
</div>
</div>
<div class="alerts">
<div class="al i"><span>ℹ</span><span><b>提示:</b>该房源委托期将于 7 天后到期,请及时续签。</span></div>
<div class="al s"><span>✓</span><span><b>成功:</b>房源 SH-ES-202609-00037 已提交检核。</span></div>
<div class="al w"><span>⚠</span><span><b>警告:</b>钥匙编号与系统记录不一致,请核对。</span></div>
<div class="al e"><span>✕</span><span><b>错误:</b>售价不能低于政府指导价,请修改后重试。</span></div>
</div>
<div class="card" style="padding:13px;display:flex;gap:9px;flex-wrap:wrap;align-items:center">
<button class="btn pri">主按钮</button>
<button class="btn pri h">悬停态</button>
<button class="btn pri a">按下态</button>
<button class="btn gho">次要按钮</button>
<button class="btn dan">危险操作</button>
<button class="btn tx">文字按钮</button>
<button class="btn dis">禁用</button>
</div>
</div>
</div>
</div></div>
<h3>色彩令牌</h3>
<div class="tok">
<div class="tk"><i style="background:#0C2340"></i><span class="n"><b>品牌 / 导航底</b><code>#0C2340</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">甄房墨蓝(品牌区、侧栏、登录页)</span></div><div class="tk"><i style="background:#0F62FE"></i><span class="n"><b>交互主色</b><code>#0F62FE</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">Blue 60 · 官方 primary action</span></div><div class="tk"><i style="background:#0043CE"></i><span class="n"><b>主色悬停</b><code>#0043CE</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">Blue 70</span></div><div class="tk"><i style="background:#002D9C"></i><span class="n"><b>主色按下</b><code>#002D9C</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">Blue 80</span></div><div class="tk"><i style="background:#EDF5FF"></i><span class="n"><b>主色浅底</b><code>#EDF5FF</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">Blue 10 · 高亮/选中浅底</span></div><div class="tk"><i style="background:#FFFFFF"></i><span class="n"><b>页面底色</b><code>#FFFFFF</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">$background(White 主题)</span></div><div class="tk"><i style="background:#F4F4F4"></i><span class="n"><b>分层底色</b><code>#F4F4F4</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">Gray 10 · $layer-01</span></div><div class="tk"><i style="background:#E8E8E8"></i><span class="n"><b>悬停底色</b><code>#E8E8E8</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">Gray 10 hover</span></div><div class="tk"><i style="background:#E0E0E0"></i><span class="n"><b>选中底色</b><code>#E0E0E0</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">Gray 20 · $layer-selected-01</span></div><div class="tk"><i style="background:#E0E0E0"></i><span class="n"><b>边框</b><code>#E0E0E0</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">Gray 20</span></div><div class="tk"><i style="background:#8D8D8D"></i><span class="n"><b>边框-强</b><code>#8D8D8D</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">Gray 50</span></div><div class="tk"><i style="background:#161616"></i><span class="n"><b>一级文字</b><code>#161616</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">Gray 100</span></div><div class="tk"><i style="background:#525252"></i><span class="n"><b>二级文字</b><code>#525252</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">Gray 70</span></div><div class="tk"><i style="background:#6F6F6F"></i><span class="n"><b>三级文字</b><code>#6F6F6F</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">Gray 60</span></div><div class="tk"><i style="background:#198038"></i><span class="n"><b>成功</b><code>#198038</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">Green 60</span></div><div class="tk"><i style="background:#F1C21B"></i><span class="n"><b>警告</b><code>#F1C21B</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">Yellow 30</span></div><div class="tk"><i style="background:#DA1E28"></i><span class="n"><b>错误</b><code>#DA1E28</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">Red 60</span></div><div class="tk"><i style="background:#0F62FE"></i><span class="n"><b>信息</b><code>#0F62FE</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">Blue 60</span></div><div class="tk"><i style="background:#C6A15B"></i><span class="n"><b>品牌金(点缀)</b><code>#C6A15B</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">仅 logo / 关键数字,占比 ≤5%</span></div>
</div>
<h3>对比度实测(WCAG,AA 正文 4.5:1 / AA 大字与图形 3:1)</h3>
<div class="tok" id="wcag-carbon"></div>
<div class="pc">
<div><h4 style="color:#5ee08a">优点</h4><ul class="good"><li>中性灰主导(官方原文 “Neutral Gray family is dominant”),长时间盯表格最不累</li><li>明确要求「避免使用中间调」,界面层次靠灰阶深浅而非色块,密度最高</li><li>无障碍是一等公民:官方每个令牌都标注对比度要求(如 $layer-selected-inverse 标 4.5:1 AA)</li><li>四套官方主题 + 分层模型,深色模式与高对比模式有现成规范</li></ul></div>
<div><h4 style="color:#f0a55c">代价与不足</h4><ul class="bad"><li>圆角基本为 0(2px),偏工程感,国内用户可能觉得「硬」</li><li>品牌金几乎没有落点,品牌温度靠墨蓝承担</li><li>与 ElementUI 的默认圆角/间距差异大,改造成本三套中最高</li></ul></div>
</div>
<div class="pc" style="grid-template-columns:1fr"><div><h4 style="color:#8ab4f8">适用场景</h4><ul class="fit"><li>数据密度极高的作业台(房源批量检核、佣金结算)</li><li>需要长时间连续录入/核对的岗位</li><li>对无障碍有硬性要求的场景(政企、大客户交付)</li></ul></div></div>
<h3>生产落地必改项<span style="font-size:11px;font-weight:400;color:#8b94a7;margin-left:8px">依据上表实测结果</span></h3>
<table class="cmp fix"><thead><tr><th>用途</th><th>原值</th><th>建议改为</th><th>理由</th></tr></thead><tbody><tr><td><b>警告色用法</b></td><td><code>#F1C21B 作文字色</code></td><td><code>黄只作底色(#F1C21B 底 + #161616 字)</code></td><td style="color:#98a1b3">Yellow 30 在白底上仅 1.68:1;Carbon 官方本就把黄色用于警报条底色而非文字色</td></tr><tr><td><b>圆角</b></td><td><code>2px</code></td><td><code>按国内习惯可放宽到 4px</code></td><td style="color:#98a1b3">不是超标项,属外观取舍;Carbon 的 0–2px 方角在国内后台会显「硬」</td></tr></tbody></table>
</div>
<div class="plan final">
<div class="hd"><h3>方案 B · Fiori 商务派</h3><span class="sys">SAP Fiori · Morning Horizon</span><span class="finalmark">✓ 已定稿</span><span class="sc">加权 8.63 / 10</span></div>
<div class="d">ERP 领域事实标准。语义令牌分层最完整:表面 S0–S8、文字 T1–T9、边框、语义色、强调色五组,并给出可推导的对比度规则。</div>
<div class="demo" data-theme="fiori">
<div class="app">
<aside class="side">
<div class="brand"><svg viewBox="0 0 64 64" width="30" height="30"><g transform="translate(5.3304 5.3294) scale(2.22222)"><path d="M3 11.99v2.51c0 3.3 0 4.95 1.025 5.975S6.7 21.5 10 21.5h4c3.3 0 4.95 0 5.975-1.025S21 17.8 21 14.5v-2.51c0-1.682 0-2.522-.356-3.25s-1.02-1.244-2.346-2.276l-2-1.555C14.233 3.303 13.2 2.5 12 2.5s-2.233.803-4.298 2.409l-2 1.555C4.375 7.496 3.712 8.012 3.356 8.74S3 10.308 3 11.99" fill="none" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><path d="M27.97 39.99 C27.85 40.09 27.73 40.19 27.25 40.59 C26.78 40.99 25.73 41.87 25.12 42.39 C24.52 42.91 23.97 43.38 23.61 43.70 C23.25 44.02 23.15 44.11 22.96 44.29 C22.77 44.47 22.59 44.63 22.45 44.78 C22.30 44.93 22.18 45.05 22.07 45.17 C21.96 45.29 21.86 45.40 21.77 45.51 C21.68 45.63 21.59 45.75 21.52 45.85 C21.46 45.96 21.40 46.05 21.36 46.15 C21.31 46.24 21.28 46.35 21.26 46.41 C21.25 46.47 21.25 46.48 21.25 46.52 C21.25 46.55 21.25 46.59 21.25 46.63 C21.25 46.66 21.26 46.71 21.27 46.75 C21.28 46.78 21.29 46.82 21.31 46.86 C21.33 46.90 21.35 46.94 21.37 46.98 C21.39 47.01 21.39 47.02 21.44 47.07 C21.49 47.13 21.58 47.22 21.66 47.29 C21.74 47.36 21.84 47.43 21.93 47.48 C22.03 47.54 22.10 47.58 22.21 47.63 C22.32 47.69 22.45 47.75 22.58 47.79 C22.70 47.84 22.81 47.89 22.94 47.93 C23.07 47.97 23.20 48.01 23.35 48.06 C23.51 48.10 23.69 48.15 23.86 48.19 C24.03 48.22 24.18 48.26 24.35 48.29 C24.53 48.32 24.70 48.36 24.89 48.39 C25.07 48.42 25.25 48.44 25.46 48.47 C25.67 48.50 25.92 48.53 26.14 48.55 C26.37 48.58 26.45 48.59 26.78 48.62 C27.12 48.64 27.66 48.68 28.16 48.70 C28.65 48.72 29.24 48.74 29.74 48.74 C30.25 48.75 30.75 48.74 31.21 48.73 C31.68 48.72 32.10 48.69 32.54 48.66 C32.97 48.63 33.41 48.59 33.84 48.54 C34.26 48.49 34.70 48.43 35.09 48.37 C35.48 48.31 35.91 48.22 36.17 48.17 C36.44 48.11 36.51 48.09 36.68 48.05 C36.86 48.01 37.05 47.95 37.22 47.91 C37.38 47.86 37.53 47.82 37.67 47.77 C37.82 47.72 37.96 47.67 38.10 47.62 C38.23 47.57 38.36 47.52 38.49 47.47 C38.61 47.42 38.73 47.36 38.84 47.31 C38.96 47.25 39.06 47.20 39.16 47.14 C39.27 47.08 39.38 47.01 39.48 46.95 C39.59 46.88 39.68 46.81 39.77 46.74 C39.86 46.67 39.94 46.60 40.03 46.53 C40.11 46.46 40.19 46.38 40.28 46.30 C40.36 46.21 40.44 46.13 40.52 46.04 C40.60 45.94 40.68 45.85 40.76 45.75 C40.84 45.65 40.92 45.55 41.00 45.44 C41.08 45.32 41.18 45.18 41.25 45.07 C41.32 44.95 41.38 44.85 41.44 44.75 C41.50 44.64 41.55 44.55 41.59 44.45 C41.64 44.35 41.69 44.24 41.72 44.15 C41.75 44.06 41.77 43.99 41.79 43.91 C41.81 43.83 41.82 43.74 41.83 43.67 C41.84 43.60 41.84 43.54 41.83 43.49 C41.82 43.44 41.81 43.39 41.79 43.35 C41.77 43.31 41.74 43.28 41.71 43.25 C41.67 43.23 41.63 43.20 41.58 43.18 C41.53 43.16 41.48 43.15 41.42 43.14 C41.36 43.13 41.31 43.12 41.24 43.12 C41.17 43.11 41.10 43.11 41.02 43.11 C40.94 43.12 40.88 43.12 40.76 43.13 C40.64 43.15 40.66 43.14 40.32 43.19 C39.97 43.25 39.23 43.38 38.70 43.46 C38.18 43.54 37.72 43.60 37.16 43.67 C36.60 43.73 35.90 43.81 35.34 43.86 C34.79 43.91 34.47 43.93 33.83 43.97 C33.19 44.00 31.89 44.06 31.48 44.07 C31.07 44.09 31.40 44.06 31.37 44.04 C31.34 44.03 31.31 44.00 31.29 43.97 C31.27 43.94 31.25 43.91 31.24 43.87 C31.24 43.84 31.24 43.80 31.24 43.77 C31.25 43.73 31.21 43.79 31.28 43.68 C31.34 43.57 31.50 43.30 31.64 43.10 C31.78 42.90 31.88 42.78 32.11 42.49 C32.34 42.20 32.68 41.78 33.02 41.37 C33.36 40.96 33.71 40.55 34.18 40.01 C34.65 39.47 35.17 38.88 35.85 38.12 C36.52 37.36 37.42 36.36 38.25 35.46 C39.08 34.57 40.29 33.32 40.84 32.75 C41.39 32.17 41.32 32.26 41.56 32.02 C41.81 31.78 42.11 31.50 42.31 31.30 C42.52 31.10 42.65 30.96 42.77 30.82 C42.90 30.69 42.99 30.57 43.06 30.47 C43.14 30.37 43.19 30.28 43.22 30.23 C43.25 30.17 43.25 30.15 43.25 30.12 C43.26 30.09 43.25 30.08 43.24 30.05 C43.23 30.03 43.23 30.02 43.19 29.98 C43.16 29.93 43.08 29.84 43.03 29.79 C42.99 29.75 42.97 29.73 42.94 29.71 C42.91 29.68 42.90 29.67 42.84 29.64 C42.78 29.61 42.67 29.56 42.57 29.53 C42.46 29.49 42.34 29.46 42.21 29.44 C42.09 29.41 41.97 29.39 41.80 29.37 C41.64 29.35 41.45 29.34 41.23 29.32 C41.01 29.31 40.74 29.29 40.48 29.29 C40.21 29.28 40.30 29.27 39.62 29.26 C38.94 29.26 37.39 29.25 36.39 29.26 C35.40 29.27 34.54 29.32 33.64 29.34 C32.74 29.37 31.68 29.39 31.01 29.40 C30.33 29.41 30.06 29.40 29.59 29.41 C29.12 29.41 28.50 29.43 28.19 29.44 C27.89 29.45 27.88 29.45 27.76 29.46 C27.63 29.48 27.54 29.49 27.45 29.51 C27.36 29.53 27.31 29.55 27.23 29.58 C27.16 29.62 27.10 29.65 27.00 29.71 C26.90 29.78 26.77 29.88 26.66 29.97 C26.54 30.07 26.43 30.16 26.32 30.26 C26.21 30.36 26.10 30.46 26.00 30.56 C25.90 30.66 25.80 30.77 25.70 30.88 C25.60 30.98 25.51 31.09 25.42 31.20 C25.33 31.32 25.22 31.45 25.14 31.57 C25.05 31.68 24.97 31.80 24.91 31.91 C24.84 32.01 24.79 32.11 24.74 32.20 C24.70 32.29 24.67 32.36 24.65 32.43 C24.62 32.50 24.61 32.55 24.60 32.61 C24.59 32.67 24.60 32.74 24.60 32.80 C24.61 32.85 24.62 32.90 24.64 32.94 C24.66 32.99 24.68 33.04 24.72 33.09 C24.75 33.13 24.80 33.18 24.84 33.22 C24.89 33.26 24.94 33.29 25.00 33.32 C25.07 33.35 25.14 33.38 25.21 33.41 C25.28 33.43 25.36 33.45 25.43 33.47 C25.50 33.48 25.50 33.49 25.62 33.50 C25.74 33.52 26.04 33.55 26.15 33.56 C26.26 33.57 26.08 33.57 26.30 33.56 C26.53 33.56 27.15 33.54 27.49 33.51 C27.84 33.49 28.05 33.46 28.37 33.42 C28.69 33.39 29.03 33.34 29.40 33.29 C29.76 33.23 29.98 33.20 30.57 33.10 C31.16 33.00 32.40 32.78 32.95 32.69 C33.51 32.60 33.59 32.59 33.90 32.55 C34.20 32.51 34.54 32.47 34.79 32.44 C35.04 32.42 35.28 32.39 35.39 32.38 C35.50 32.38 35.44 32.38 35.46 32.39 C35.49 32.40 35.51 32.40 35.54 32.42 C35.56 32.43 35.58 32.45 35.60 32.47 C35.62 32.49 35.63 32.51 35.64 32.54 C35.65 32.56 35.66 32.59 35.66 32.61 C35.67 32.64 35.67 32.67 35.66 32.69 C35.65 32.72 35.68 32.69 35.62 32.78 C35.57 32.86 35.41 33.07 35.32 33.20 C35.22 33.32 35.21 33.36 35.04 33.55 C34.86 33.73 34.53 34.06 34.27 34.32 C34.01 34.58 33.79 34.79 33.46 35.10 C33.13 35.42 32.68 35.84 32.29 36.21 C31.89 36.58 31.45 36.98 31.07 37.31 C30.70 37.65 30.21 38.07 30.04 38.22 Z" fill="#FFFFFF"/></svg><span><b>甄房</b><em>ZHENFANG</em></span></div>
<a class="on"><span class="d"></span>工作台</a>
<a><span class="d"></span>房源管理</a>
<a><span class="d"></span>客源管理</a>
<a><span class="d"></span>交易管理</a>
<a><span class="d"></span>钥匙管理</a>
<a><span class="d"></span>我的佣金</a>
<a><span class="d"></span>系统设置</a>
</aside>
<div class="main">
<div class="top">
<div class="crumb">房源管理 / <b>二手房房源</b></div>
<div class="usr"><span class="av">张</span>张伟 · 滨江门店</div>
</div>
<div class="body">
<div class="kpis">
<div class="kpi"><div class="t">在售房源</div><div class="v">1,284<em>套</em></div><div class="d up">↑ 3.2% 较上周</div></div>
<div class="kpi"><div class="t">本周新增客源</div><div class="v">96<em>位</em></div><div class="d up">↑ 12 位</div></div>
<div class="kpi"><div class="t">待跟进</div><div class="v">23<em>条</em></div><div class="d dn">↓ 5 条</div></div>
<div class="kpi gold"><div class="t">本月预估佣金</div><div class="v">86.4<em>万</em></div><div class="d up">↑ 8.6%</div></div>
</div>
<div class="card filters">
<div class="f"><label>房源编码</label><input placeholder="SH-ES-..."></div>
<div class="f"><label>所属楼盘</label><select><option>滨江壹号</option><option>钱江新城</option></select></div>
<div class="f"><label>委托起始日</label><input value="2026-09-01"></div>
<div class="f err"><label>维护人</label><input value="张"><span class="msg">请输入完整姓名</span></div>
<div class="btns">
<button class="btn pri">查询</button>
<button class="btn">重置</button>
<button class="btn gho">高级筛选</button>
</div>
</div>
<div class="card">
<div class="tabs">
<a class="on">全部 1284</a><a>有效 892</a><a>维护中 236</a><a>已成交 121</a><a>暂缓 35</a>
</div>
<table class="tbl">
<thead><tr>
<th>房源编码</th><th>楼盘 / 房号</th><th>面积</th><th>售价</th><th>状态</th><th>维护人</th><th>操作</th>
</tr></thead>
<tbody>
<tr><td><span class="code">SH-ES-202609-00037</span></td>
<td>滨江壹号 3幢 1802<span class="sub">滨江区 · 钱塘江畔</span></td>
<td>128.5 ㎡</td><td>1,285 万</td><td><span class="tag ok">有效</span></td><td>张伟</td>
<td class="op"><a>查看</a><a>编辑</a></td></tr>
<tr class="hov"><td><span class="code">SH-ES-202609-00041</span></td>
<td>钱江新城 7幢 2201<span class="sub">上城区 · 万象城</span></td>
<td>156.0 ㎡</td><td>1,860 万</td><td><span class="tag pri">待检核</span></td><td>李敏</td>
<td class="op"><a>查看</a><a>编辑</a></td></tr>
<tr class="sel"><td><span class="code">SH-ES-202609-00052</span></td>
<td>滨江壹号 5幢 901<span class="sub">滨江区 · 钱塘江畔</span></td>
<td>98.2 ㎡</td><td>920 万</td><td><span class="tag gold">独家</span></td><td>王强</td>
<td class="op"><a>查看</a><a>编辑</a></td></tr>
<tr><td><span class="code">SH-ES-202609-00058</span></td>
<td>绿城桂语 2幢 1503<span class="sub">西湖区 · 文三路</span></td>
<td>142.6 ㎡</td><td>1,420 万</td><td><span class="tag wn">维护中</span></td><td>张伟</td>
<td class="op"><a>查看</a><a>编辑</a></td></tr>
<tr><td><span class="code">SH-ES-202609-00063</span></td>
<td>万科未来 1幢 608<span class="sub">余杭区 · 未来科技城</span></td>
<td>89.0 ㎡</td><td>610 万</td><td><span class="tag er">已下架</span></td><td>赵磊</td>
<td class="op"><a>查看</a><a class="dan">删除</a></td></tr>
<tr><td><span class="code">SH-ES-202609-00071</span></td>
<td>滨江壹号 2幢 1101<span class="sub">滨江区 · 钱塘江畔</span></td>
<td>110.4 ㎡</td><td>1,080 万</td><td><span class="tag nu">草稿</span></td><td>李敏</td>
<td class="op"><a>查看</a><a>编辑</a></td></tr>
</tbody>
</table>
<div class="pager">共 1,284 条
<span class="pg on">1</span><span class="pg">2</span><span class="pg">3</span>
<span class="pg">…</span><span class="pg">65</span>
<span style="margin-left:auto"></span>
<span style="font-size:11.5px">每页 20 条</span>
</div>
</div>
<div class="alerts">
<div class="al i"><span>ℹ</span><span><b>提示:</b>该房源委托期将于 7 天后到期,请及时续签。</span></div>
<div class="al s"><span>✓</span><span><b>成功:</b>房源 SH-ES-202609-00037 已提交检核。</span></div>
<div class="al w"><span>⚠</span><span><b>警告:</b>钥匙编号与系统记录不一致,请核对。</span></div>
<div class="al e"><span>✕</span><span><b>错误:</b>售价不能低于政府指导价,请修改后重试。</span></div>
</div>
<div class="card" style="padding:13px;display:flex;gap:9px;flex-wrap:wrap;align-items:center">
<button class="btn pri">主按钮</button>
<button class="btn pri h">悬停态</button>
<button class="btn pri a">按下态</button>
<button class="btn gho">次要按钮</button>
<button class="btn dan">危险操作</button>
<button class="btn tx">文字按钮</button>
<button class="btn dis">禁用</button>
</div>
</div>
</div>
</div></div>
<h3>色彩令牌</h3>
<div class="tok">
<div class="tk"><i style="background:#0C2340"></i><span class="n"><b>品牌 / Shell Bar</b><code>#0C2340</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">甄房墨蓝(Shell Bar、应用头)</span></div><div class="tk"><i style="background:#0070F2"></i><span class="n"><b>交互主色</b><code>#0070F2</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">Blue 7 · S2 Secondary / T4 CTA</span></div><div class="tk"><i style="background:#0057D2"></i><span class="n"><b>主色悬停</b><code>#0057D2</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">Blue 8 · T7 Selected</span></div><div class="tk"><i style="background:#0040B0"></i><span class="n"><b>主色按下</b><code>#0040B0</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">同体系推导(Blue 8 再压一档)</span></div><div class="tk"><i style="background:#EBF4FE"></i><span class="n"><b>主色浅底</b><code>#EBF4FE</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">S5 Selected Surface(官方 rgba(0,112,242,.08) 在白底上的合成值)</span></div><div class="tk"><i style="background:#FFFFFF"></i><span class="n"><b>页面底色</b><code>#FFFFFF</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">S0 Base Background</span></div><div class="tk"><i style="background:#F5F6F7"></i><span class="n"><b>次级底色</b><code>#F5F6F7</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">S4 Quaternary · Grey 1</span></div><div class="tk"><i style="background:#D5DADD"></i><span class="n"><b>边框</b><code>#D5DADD</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">Grey 3</span></div><div class="tk"><i style="background:#A9B4BE"></i><span class="n"><b>边框-强</b><code>#A9B4BE</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">Grey 4</span></div><div class="tk"><i style="background:#223548"></i><span class="n"><b>一级文字</b><code>#223548</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">T1 · Grey 9</span></div><div class="tk"><i style="background:#475E75"></i><span class="n"><b>二级文字</b><code>#475E75</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">T2 · Grey 7</span></div><div class="tk"><i style="background:#5B738B"></i><span class="n"><b>三级文字</b><code>#5B738B</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">T3 · Grey 6</span></div><div class="tk"><i style="background:#256F3A"></i><span class="n"><b>成功</b><code>#256F3A</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">Positive(同体系参考值)</span></div><div class="tk"><i style="background:#E76500"></i><span class="n"><b>警告</b><code>#E76500</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">Critical · Mango(同体系参考值)</span></div><div class="tk"><i style="background:#D20A0A"></i><span class="n"><b>错误</b><code>#D20A0A</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">Red 7 · Negative(官方确认)</span></div><div class="tk"><i style="background:#0070F2"></i><span class="n"><b>信息</b><code>#0070F2</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">Blue 7</span></div><div class="tk"><i style="background:#C6A15B"></i><span class="n"><b>品牌金(点缀)</b><code>#C6A15B</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">仅 logo / 关键数字,占比 ≤5%</span></div>
</div>
<h3>对比度实测(WCAG,AA 正文 4.5:1 / AA 大字与图形 3:1)</h3>
<div class="tok" id="wcag-fiori"></div>
<div class="pc">
<div><h4 style="color:#5ee08a">优点</h4><ul class="good"><li>唯一为 ERP 事务场景设计的体系,表格/表单/Shell 的层级划分最成熟</li><li>「相隔 4 级 = 3:1、相隔 5 级 = 4.5:1」——对比度可推导,选色不用猜</li><li>选中态用 8% 蓝底(而非实色块),长时间使用不刺眼</li><li>品牌化路径最清晰:官方 Quick Theming 就是「替换 logo + 主品牌色」</li></ul></div>
<div><h4 style="color:#f0a55c">代价与不足</h4><ul class="bad"><li>Shell Bar + 应用头 + 页面头三层结构,垂直空间占用大,密度略低于 Carbon</li><li>蓝白对比偏冷、现代感一般,年轻经纪人可能觉得「像老系统」</li><li>部分语义色官方文档未完整公开,落地前需核对准确值</li></ul></div>
</div>
<div class="pc" style="grid-template-columns:1fr"><div><h4 style="color:#8ab4f8">适用场景</h4><ul class="fit"><li>交易全流程、佣金结算这类强流程、强状态的模块</li><li>与财务/ERP 打通、需要符合企业级规范的场景</li><li>多角色、多层级权限的后台(选中态与层级表达最清楚)</li></ul></div></div>
<h3>生产落地必改项<span style="font-size:11px;font-weight:400;color:#8b94a7;margin-left:8px">依据上表实测结果</span></h3>
<div class="fixok">本方案 12 项对比度检查全部达标,无需为无障碍做任何色值改动 —— 三套中唯一「开箱即合规」的方案。</div>
</div>
<div class="plan">
<div class="hd"><h3>方案 C · AntD 亲和派</h3><span class="sys">Ant Design 5</span><span class="sc">加权 8.30 / 10</span></div>
<div class="d">国内中后台事实标准。12 色 × 10 阶色板 + 算法生成,可在品牌色基础上自动产出整条色阶;中文文档与团队熟悉度最高。</div>
<div class="demo" data-theme="antd">
<div class="app">
<aside class="side">
<div class="brand"><svg viewBox="0 0 64 64" width="30" height="30"><g transform="translate(5.3304 5.3294) scale(2.22222)"><path d="M3 11.99v2.51c0 3.3 0 4.95 1.025 5.975S6.7 21.5 10 21.5h4c3.3 0 4.95 0 5.975-1.025S21 17.8 21 14.5v-2.51c0-1.682 0-2.522-.356-3.25s-1.02-1.244-2.346-2.276l-2-1.555C14.233 3.303 13.2 2.5 12 2.5s-2.233.803-4.298 2.409l-2 1.555C4.375 7.496 3.712 8.012 3.356 8.74S3 10.308 3 11.99" fill="none" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><path d="M27.97 39.99 C27.85 40.09 27.73 40.19 27.25 40.59 C26.78 40.99 25.73 41.87 25.12 42.39 C24.52 42.91 23.97 43.38 23.61 43.70 C23.25 44.02 23.15 44.11 22.96 44.29 C22.77 44.47 22.59 44.63 22.45 44.78 C22.30 44.93 22.18 45.05 22.07 45.17 C21.96 45.29 21.86 45.40 21.77 45.51 C21.68 45.63 21.59 45.75 21.52 45.85 C21.46 45.96 21.40 46.05 21.36 46.15 C21.31 46.24 21.28 46.35 21.26 46.41 C21.25 46.47 21.25 46.48 21.25 46.52 C21.25 46.55 21.25 46.59 21.25 46.63 C21.25 46.66 21.26 46.71 21.27 46.75 C21.28 46.78 21.29 46.82 21.31 46.86 C21.33 46.90 21.35 46.94 21.37 46.98 C21.39 47.01 21.39 47.02 21.44 47.07 C21.49 47.13 21.58 47.22 21.66 47.29 C21.74 47.36 21.84 47.43 21.93 47.48 C22.03 47.54 22.10 47.58 22.21 47.63 C22.32 47.69 22.45 47.75 22.58 47.79 C22.70 47.84 22.81 47.89 22.94 47.93 C23.07 47.97 23.20 48.01 23.35 48.06 C23.51 48.10 23.69 48.15 23.86 48.19 C24.03 48.22 24.18 48.26 24.35 48.29 C24.53 48.32 24.70 48.36 24.89 48.39 C25.07 48.42 25.25 48.44 25.46 48.47 C25.67 48.50 25.92 48.53 26.14 48.55 C26.37 48.58 26.45 48.59 26.78 48.62 C27.12 48.64 27.66 48.68 28.16 48.70 C28.65 48.72 29.24 48.74 29.74 48.74 C30.25 48.75 30.75 48.74 31.21 48.73 C31.68 48.72 32.10 48.69 32.54 48.66 C32.97 48.63 33.41 48.59 33.84 48.54 C34.26 48.49 34.70 48.43 35.09 48.37 C35.48 48.31 35.91 48.22 36.17 48.17 C36.44 48.11 36.51 48.09 36.68 48.05 C36.86 48.01 37.05 47.95 37.22 47.91 C37.38 47.86 37.53 47.82 37.67 47.77 C37.82 47.72 37.96 47.67 38.10 47.62 C38.23 47.57 38.36 47.52 38.49 47.47 C38.61 47.42 38.73 47.36 38.84 47.31 C38.96 47.25 39.06 47.20 39.16 47.14 C39.27 47.08 39.38 47.01 39.48 46.95 C39.59 46.88 39.68 46.81 39.77 46.74 C39.86 46.67 39.94 46.60 40.03 46.53 C40.11 46.46 40.19 46.38 40.28 46.30 C40.36 46.21 40.44 46.13 40.52 46.04 C40.60 45.94 40.68 45.85 40.76 45.75 C40.84 45.65 40.92 45.55 41.00 45.44 C41.08 45.32 41.18 45.18 41.25 45.07 C41.32 44.95 41.38 44.85 41.44 44.75 C41.50 44.64 41.55 44.55 41.59 44.45 C41.64 44.35 41.69 44.24 41.72 44.15 C41.75 44.06 41.77 43.99 41.79 43.91 C41.81 43.83 41.82 43.74 41.83 43.67 C41.84 43.60 41.84 43.54 41.83 43.49 C41.82 43.44 41.81 43.39 41.79 43.35 C41.77 43.31 41.74 43.28 41.71 43.25 C41.67 43.23 41.63 43.20 41.58 43.18 C41.53 43.16 41.48 43.15 41.42 43.14 C41.36 43.13 41.31 43.12 41.24 43.12 C41.17 43.11 41.10 43.11 41.02 43.11 C40.94 43.12 40.88 43.12 40.76 43.13 C40.64 43.15 40.66 43.14 40.32 43.19 C39.97 43.25 39.23 43.38 38.70 43.46 C38.18 43.54 37.72 43.60 37.16 43.67 C36.60 43.73 35.90 43.81 35.34 43.86 C34.79 43.91 34.47 43.93 33.83 43.97 C33.19 44.00 31.89 44.06 31.48 44.07 C31.07 44.09 31.40 44.06 31.37 44.04 C31.34 44.03 31.31 44.00 31.29 43.97 C31.27 43.94 31.25 43.91 31.24 43.87 C31.24 43.84 31.24 43.80 31.24 43.77 C31.25 43.73 31.21 43.79 31.28 43.68 C31.34 43.57 31.50 43.30 31.64 43.10 C31.78 42.90 31.88 42.78 32.11 42.49 C32.34 42.20 32.68 41.78 33.02 41.37 C33.36 40.96 33.71 40.55 34.18 40.01 C34.65 39.47 35.17 38.88 35.85 38.12 C36.52 37.36 37.42 36.36 38.25 35.46 C39.08 34.57 40.29 33.32 40.84 32.75 C41.39 32.17 41.32 32.26 41.56 32.02 C41.81 31.78 42.11 31.50 42.31 31.30 C42.52 31.10 42.65 30.96 42.77 30.82 C42.90 30.69 42.99 30.57 43.06 30.47 C43.14 30.37 43.19 30.28 43.22 30.23 C43.25 30.17 43.25 30.15 43.25 30.12 C43.26 30.09 43.25 30.08 43.24 30.05 C43.23 30.03 43.23 30.02 43.19 29.98 C43.16 29.93 43.08 29.84 43.03 29.79 C42.99 29.75 42.97 29.73 42.94 29.71 C42.91 29.68 42.90 29.67 42.84 29.64 C42.78 29.61 42.67 29.56 42.57 29.53 C42.46 29.49 42.34 29.46 42.21 29.44 C42.09 29.41 41.97 29.39 41.80 29.37 C41.64 29.35 41.45 29.34 41.23 29.32 C41.01 29.31 40.74 29.29 40.48 29.29 C40.21 29.28 40.30 29.27 39.62 29.26 C38.94 29.26 37.39 29.25 36.39 29.26 C35.40 29.27 34.54 29.32 33.64 29.34 C32.74 29.37 31.68 29.39 31.01 29.40 C30.33 29.41 30.06 29.40 29.59 29.41 C29.12 29.41 28.50 29.43 28.19 29.44 C27.89 29.45 27.88 29.45 27.76 29.46 C27.63 29.48 27.54 29.49 27.45 29.51 C27.36 29.53 27.31 29.55 27.23 29.58 C27.16 29.62 27.10 29.65 27.00 29.71 C26.90 29.78 26.77 29.88 26.66 29.97 C26.54 30.07 26.43 30.16 26.32 30.26 C26.21 30.36 26.10 30.46 26.00 30.56 C25.90 30.66 25.80 30.77 25.70 30.88 C25.60 30.98 25.51 31.09 25.42 31.20 C25.33 31.32 25.22 31.45 25.14 31.57 C25.05 31.68 24.97 31.80 24.91 31.91 C24.84 32.01 24.79 32.11 24.74 32.20 C24.70 32.29 24.67 32.36 24.65 32.43 C24.62 32.50 24.61 32.55 24.60 32.61 C24.59 32.67 24.60 32.74 24.60 32.80 C24.61 32.85 24.62 32.90 24.64 32.94 C24.66 32.99 24.68 33.04 24.72 33.09 C24.75 33.13 24.80 33.18 24.84 33.22 C24.89 33.26 24.94 33.29 25.00 33.32 C25.07 33.35 25.14 33.38 25.21 33.41 C25.28 33.43 25.36 33.45 25.43 33.47 C25.50 33.48 25.50 33.49 25.62 33.50 C25.74 33.52 26.04 33.55 26.15 33.56 C26.26 33.57 26.08 33.57 26.30 33.56 C26.53 33.56 27.15 33.54 27.49 33.51 C27.84 33.49 28.05 33.46 28.37 33.42 C28.69 33.39 29.03 33.34 29.40 33.29 C29.76 33.23 29.98 33.20 30.57 33.10 C31.16 33.00 32.40 32.78 32.95 32.69 C33.51 32.60 33.59 32.59 33.90 32.55 C34.20 32.51 34.54 32.47 34.79 32.44 C35.04 32.42 35.28 32.39 35.39 32.38 C35.50 32.38 35.44 32.38 35.46 32.39 C35.49 32.40 35.51 32.40 35.54 32.42 C35.56 32.43 35.58 32.45 35.60 32.47 C35.62 32.49 35.63 32.51 35.64 32.54 C35.65 32.56 35.66 32.59 35.66 32.61 C35.67 32.64 35.67 32.67 35.66 32.69 C35.65 32.72 35.68 32.69 35.62 32.78 C35.57 32.86 35.41 33.07 35.32 33.20 C35.22 33.32 35.21 33.36 35.04 33.55 C34.86 33.73 34.53 34.06 34.27 34.32 C34.01 34.58 33.79 34.79 33.46 35.10 C33.13 35.42 32.68 35.84 32.29 36.21 C31.89 36.58 31.45 36.98 31.07 37.31 C30.70 37.65 30.21 38.07 30.04 38.22 Z" fill="#FFFFFF"/></svg><span><b>甄房</b><em>ZHENFANG</em></span></div>
<a class="on"><span class="d"></span>工作台</a>
<a><span class="d"></span>房源管理</a>
<a><span class="d"></span>客源管理</a>
<a><span class="d"></span>交易管理</a>
<a><span class="d"></span>钥匙管理</a>
<a><span class="d"></span>我的佣金</a>
<a><span class="d"></span>系统设置</a>
</aside>
<div class="main">
<div class="top">
<div class="crumb">房源管理 / <b>二手房房源</b></div>
<div class="usr"><span class="av">张</span>张伟 · 滨江门店</div>
</div>
<div class="body">
<div class="kpis">
<div class="kpi"><div class="t">在售房源</div><div class="v">1,284<em>套</em></div><div class="d up">↑ 3.2% 较上周</div></div>
<div class="kpi"><div class="t">本周新增客源</div><div class="v">96<em>位</em></div><div class="d up">↑ 12 位</div></div>
<div class="kpi"><div class="t">待跟进</div><div class="v">23<em>条</em></div><div class="d dn">↓ 5 条</div></div>
<div class="kpi gold"><div class="t">本月预估佣金</div><div class="v">86.4<em>万</em></div><div class="d up">↑ 8.6%</div></div>
</div>
<div class="card filters">
<div class="f"><label>房源编码</label><input placeholder="SH-ES-..."></div>
<div class="f"><label>所属楼盘</label><select><option>滨江壹号</option><option>钱江新城</option></select></div>
<div class="f"><label>委托起始日</label><input value="2026-09-01"></div>
<div class="f err"><label>维护人</label><input value="张"><span class="msg">请输入完整姓名</span></div>
<div class="btns">
<button class="btn pri">查询</button>
<button class="btn">重置</button>
<button class="btn gho">高级筛选</button>
</div>
</div>
<div class="card">
<div class="tabs">
<a class="on">全部 1284</a><a>有效 892</a><a>维护中 236</a><a>已成交 121</a><a>暂缓 35</a>
</div>
<table class="tbl">
<thead><tr>
<th>房源编码</th><th>楼盘 / 房号</th><th>面积</th><th>售价</th><th>状态</th><th>维护人</th><th>操作</th>
</tr></thead>
<tbody>
<tr><td><span class="code">SH-ES-202609-00037</span></td>
<td>滨江壹号 3幢 1802<span class="sub">滨江区 · 钱塘江畔</span></td>
<td>128.5 ㎡</td><td>1,285 万</td><td><span class="tag ok">有效</span></td><td>张伟</td>
<td class="op"><a>查看</a><a>编辑</a></td></tr>
<tr class="hov"><td><span class="code">SH-ES-202609-00041</span></td>
<td>钱江新城 7幢 2201<span class="sub">上城区 · 万象城</span></td>
<td>156.0 ㎡</td><td>1,860 万</td><td><span class="tag pri">待检核</span></td><td>李敏</td>
<td class="op"><a>查看</a><a>编辑</a></td></tr>
<tr class="sel"><td><span class="code">SH-ES-202609-00052</span></td>
<td>滨江壹号 5幢 901<span class="sub">滨江区 · 钱塘江畔</span></td>
<td>98.2 ㎡</td><td>920 万</td><td><span class="tag gold">独家</span></td><td>王强</td>
<td class="op"><a>查看</a><a>编辑</a></td></tr>
<tr><td><span class="code">SH-ES-202609-00058</span></td>
<td>绿城桂语 2幢 1503<span class="sub">西湖区 · 文三路</span></td>
<td>142.6 ㎡</td><td>1,420 万</td><td><span class="tag wn">维护中</span></td><td>张伟</td>
<td class="op"><a>查看</a><a>编辑</a></td></tr>
<tr><td><span class="code">SH-ES-202609-00063</span></td>
<td>万科未来 1幢 608<span class="sub">余杭区 · 未来科技城</span></td>
<td>89.0 ㎡</td><td>610 万</td><td><span class="tag er">已下架</span></td><td>赵磊</td>
<td class="op"><a>查看</a><a class="dan">删除</a></td></tr>
<tr><td><span class="code">SH-ES-202609-00071</span></td>
<td>滨江壹号 2幢 1101<span class="sub">滨江区 · 钱塘江畔</span></td>
<td>110.4 ㎡</td><td>1,080 万</td><td><span class="tag nu">草稿</span></td><td>李敏</td>
<td class="op"><a>查看</a><a>编辑</a></td></tr>
</tbody>
</table>
<div class="pager">共 1,284 条
<span class="pg on">1</span><span class="pg">2</span><span class="pg">3</span>
<span class="pg">…</span><span class="pg">65</span>
<span style="margin-left:auto"></span>
<span style="font-size:11.5px">每页 20 条</span>
</div>
</div>
<div class="alerts">
<div class="al i"><span>ℹ</span><span><b>提示:</b>该房源委托期将于 7 天后到期,请及时续签。</span></div>
<div class="al s"><span>✓</span><span><b>成功:</b>房源 SH-ES-202609-00037 已提交检核。</span></div>
<div class="al w"><span>⚠</span><span><b>警告:</b>钥匙编号与系统记录不一致,请核对。</span></div>
<div class="al e"><span>✕</span><span><b>错误:</b>售价不能低于政府指导价,请修改后重试。</span></div>
</div>
<div class="card" style="padding:13px;display:flex;gap:9px;flex-wrap:wrap;align-items:center">
<button class="btn pri">主按钮</button>
<button class="btn pri h">悬停态</button>
<button class="btn pri a">按下态</button>
<button class="btn gho">次要按钮</button>
<button class="btn dan">危险操作</button>
<button class="btn tx">文字按钮</button>
<button class="btn dis">禁用</button>
</div>
</div>
</div>
</div></div>
<h3>色彩令牌</h3>
<div class="tok">
<div class="tk"><i style="background:#0C2340"></i><span class="n"><b>品牌 / 侧栏</b><code>#0C2340</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">甄房墨蓝(侧栏、品牌区)</span></div><div class="tk"><i style="background:#1677FF"></i><span class="n"><b>交互主色</b><code>#1677FF</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">colorPrimary · blue-6(官方默认)</span></div><div class="tk"><i style="background:#4096FF"></i><span class="n"><b>主色悬停</b><code>#4096FF</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">blue-5</span></div><div class="tk"><i style="background:#0958D9"></i><span class="n"><b>主色按下</b><code>#0958D9</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">blue-7</span></div><div class="tk"><i style="background:#E6F4FF"></i><span class="n"><b>主色浅底</b><code>#E6F4FF</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">blue-1 · 选中行浅底</span></div><div class="tk"><i style="background:#FFFFFF"></i><span class="n"><b>页面底色</b><code>#FFFFFF</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">官方容器色</span></div><div class="tk"><i style="background:#F5F5F5"></i><span class="n"><b>次级底色</b><code>#F5F5F5</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">官方中性灰</span></div><div class="tk"><i style="background:#D9D9D9"></i><span class="n"><b>边框</b><code>#D9D9D9</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">官方边框色</span></div><div class="tk"><i style="background:#1F1F1F"></i><span class="n"><b>一级文字</b><code>#1F1F1F</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">rgba(0,0,0,.88) 合成值</span></div><div class="tk"><i style="background:#595959"></i><span class="n"><b>二级文字</b><code>#595959</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">rgba(0,0,0,.65) 合成值</span></div><div class="tk"><i style="background:#8C8C8C"></i><span class="n"><b>三级文字</b><code>#8C8C8C</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">rgba(0,0,0,.45) 合成值</span></div><div class="tk"><i style="background:#52C41A"></i><span class="n"><b>成功</b><code>#52C41A</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">colorSuccess</span></div><div class="tk"><i style="background:#FAAD14"></i><span class="n"><b>警告</b><code>#FAAD14</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">colorWarning</span></div><div class="tk"><i style="background:#FF4D4F"></i><span class="n"><b>错误</b><code>#FF4D4F</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">colorError</span></div><div class="tk"><i style="background:#1677FF"></i><span class="n"><b>信息</b><code>#1677FF</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">colorInfo</span></div><div class="tk"><i style="background:#C6A15B"></i><span class="n"><b>品牌金(点缀)</b><code>#C6A15B</code></span><span class="r" style="color:#7f8899;border-color:rgba(255,255,255,.14)">仅 logo / 关键数字,占比 ≤5%</span></div>
</div>
<h3>对比度实测(WCAG,AA 正文 4.5:1 / AA 大字与图形 3:1)</h3>
<div class="tok" id="wcag-antd"></div>
<div class="pc">
<div><h4 style="color:#5ee08a">优点</h4><ul class="good"><li>团队最熟、中文文档最全,与现有 Vue2 + ElementUI 生态迁移成本最低</li><li>色板算法可由品牌色直接生成整条色阶(12 阶),扩展与派生最省事</li><li>色彩语义与国内用户预期一致(成功绿/警告黄/错误红),零学习成本</li><li>品牌金在三套中最好安排(圆角卡片 + 金色数字自然)</li></ul></div>
<div><h4 style="color:#f0a55c">代价与不足</h4><ul class="bad"><li>默认色饱和偏高:#FF4D4F 错误色、#52C41A 成功色长时间看刺激较强</li><li>官方定位偏「轻盈」,高数据密度下需要额外收紧间距与层级</li><li>中性灰层级不如 Carbon/Fiori 严谨,容易出现「灰得不够分明」</li></ul></div>
</div>
<div class="pc" style="grid-template-columns:1fr"><div><h4 style="color:#8ab4f8">适用场景</h4><ul class="fit"><li>经纪人日常高频作业(房源/客源/跟进),要求上手快、认知零负担</li><li>迭代节奏快、需要大量复用生态组件的中后台</li><li>团队以国内前端为主、希望降低长期维护成本的项目</li></ul></div></div>
<h3>生产落地必改项<span style="font-size:11px;font-weight:400;color:#8b94a7;margin-left:8px">依据上表实测结果</span></h3>
<table class="cmp fix"><thead><tr><th>用途</th><th>原值</th><th>建议改为</th><th>理由</th></tr></thead><tbody><tr><td><b>主色(按钮底 / 链接字)</b></td><td><code>#1677FF</code></td><td><code>#0958D9(blue-7)</code></td><td style="color:#98a1b3">官方默认主色在白底上实测仅 4.10:1,差 0.4 未达 AA 4.5:1 —— 「第 6 阶满足 4.5:1」只对部分色相成立;下移一阶到 blue-7 即 6.16:1,肉眼几乎无差别</td></tr><tr><td><b>成功色</b></td><td><code>#52C41A</code></td><td><code>#389E0D(green-7)</code></td><td style="color:#98a1b3">#52C41A 白底仅 2.27:1,连图形类 3:1 都不到;图标与文字改 green-7(3.46:1),浅底仍可保留亮绿</td></tr><tr><td><b>警告色</b></td><td><code>#FAAD14</code></td><td><code>文字与描边改 #AD6800(gold-8)</code></td><td style="color:#98a1b3">#FAAD14 白底仅 1.90:1;沿用「亮色只作底、深色作字」的做法,gold-8 为 4.41:1,几乎直接满足正文标准</td></tr><tr><td><b>错误色(正文)</b></td><td><code>#FF4D4F</code></td><td><code>正文与链接改 #CF1322(red-7)</code></td><td style="color:#98a1b3">#FF4D4F 作正文仅 3.27:1;作为图形勉强及格,但表格里的错误提示是正文级文字,改 red-7 后 5.57:1;描边与底色可继续用亮红</td></tr><tr><td><b>三级文字</b></td><td><code>#8C8C8C</code></td><td><code>#6E6E6E</code></td><td style="color:#98a1b3">rgba(0,0,0,.45) 的合成值白底 3.36:1,未达 AA;加深到 #6E6E6E 即 5.10:1</td></tr><tr><td><b>灰阶层级</b></td><td><code>仅三级文字灰</code></td><td><code>补一级 #BFBFBF 专用于占位符 / 禁用</code></td><td style="color:#98a1b3">AntD 只有三级文字灰,导致占位符被迫复用 #8C8C8C —— 既不够浅(有对比度不达标风险)又会被误读为正文;补一级浅灰后三级文字才能安心加深</td></tr></tbody></table>
</div>
<h2>三、主要界面元素横向对照<span>同一元素 · 三套色彩并排</span></h2>
<div class="elcmp"><table class="el">
<thead><tr><th>元素</th><th>Carbon 严谨派</th><th>Fiori 商务派</th><th>AntD 亲和派</th></tr></thead>
<tbody>
<tr><td>主按钮</td><td><div class="demo" data-theme="carbon"><button class="btn pri">查询房源</button></div></td><td><div class="demo" data-theme="fiori"><button class="btn pri">查询房源</button></div></td><td><div class="demo" data-theme="antd"><button class="btn pri">查询房源</button></div></td></tr><tr><td>次要按钮</td><td><div class="demo" data-theme="carbon"><button class="btn gho">高级筛选</button></div></td><td><div class="demo" data-theme="fiori"><button class="btn gho">高级筛选</button></div></td><td><div class="demo" data-theme="antd"><button class="btn gho">高级筛选</button></div></td></tr><tr><td>危险按钮</td><td><div class="demo" data-theme="carbon"><button class="btn dan">删除房源</button></div></td><td><div class="demo" data-theme="fiori"><button class="btn dan">删除房源</button></div></td><td><div class="demo" data-theme="antd"><button class="btn dan">删除房源</button></div></td></tr><tr><td>状态标签</td><td><div class="demo" data-theme="carbon"><span class="tag ok">有效</span> <span class="tag wn">维护中</span> <span class="tag er">已下架</span> <span class="tag pri">待检核</span> <span class="tag gold">独家</span></div></td><td><div class="demo" data-theme="fiori"><span class="tag ok">有效</span> <span class="tag wn">维护中</span> <span class="tag er">已下架</span> <span class="tag pri">待检核</span> <span class="tag gold">独家</span></div></td><td><div class="demo" data-theme="antd"><span class="tag ok">有效</span> <span class="tag wn">维护中</span> <span class="tag er">已下架</span> <span class="tag pri">待检核</span> <span class="tag gold">独家</span></div></td></tr><tr><td>表单</td><td><div class="demo" data-theme="carbon"><div class="f" style="width:150px"><label>房源编码</label><input placeholder="请输入"></div></div></td><td><div class="demo" data-theme="fiori"><div class="f" style="width:150px"><label>房源编码</label><input placeholder="请输入"></div></div></td><td><div class="demo" data-theme="antd"><div class="f" style="width:150px"><label>房源编码</label><input placeholder="请输入"></div></div></td></tr><tr><td>表单错误态</td><td><div class="demo" data-theme="carbon"><div class="f err" style="width:150px"><label>维护人</label><input value="张"><span class="msg">请输入完整姓名</span></div></div></td><td><div class="demo" data-theme="fiori"><div class="f err" style="width:150px"><label>维护人</label><input value="张"><span class="msg">请输入完整姓名</span></div></div></td><td><div class="demo" data-theme="antd"><div class="f err" style="width:150px"><label>维护人</label><input value="张"><span class="msg">请输入完整姓名</span></div></div></td></tr><tr><td>表头 / 行</td><td><div class="demo" data-theme="carbon"><table class="tbl" style="width:290px"><thead><tr><th>房源编码</th><th>状态</th></tr></thead><tbody><tr><td><span class="code">SH-...037</span></td><td><span class="tag ok">有效</span></td></tr><tr class="sel"><td><span class="code">SH-...052</span></td><td><span class="tag gold">独家</span></td></tr></tbody></table></div></td><td><div class="demo" data-theme="fiori"><table class="tbl" style="width:290px"><thead><tr><th>房源编码</th><th>状态</th></tr></thead><tbody><tr><td><span class="code">SH-...037</span></td><td><span class="tag ok">有效</span></td></tr><tr class="sel"><td><span class="code">SH-...052</span></td><td><span class="tag gold">独家</span></td></tr></tbody></table></div></td><td><div class="demo" data-theme="antd"><table class="tbl" style="width:290px"><thead><tr><th>房源编码</th><th>状态</th></tr></thead><tbody><tr><td><span class="code">SH-...037</span></td><td><span class="tag ok">有效</span></td></tr><tr class="sel"><td><span class="code">SH-...052</span></td><td><span class="tag gold">独家</span></td></tr></tbody></table></div></td></tr><tr><td>分页 / 页签</td><td><div class="demo" data-theme="carbon"><div class="tabs" style="padding:0"><a class="on">全部</a><a>有效</a></div><div class="pager" style="padding:9px 0"><span class="pg on">1</span><span class="pg">2</span><span class="pg">3</span></div></div></td><td><div class="demo" data-theme="fiori"><div class="tabs" style="padding:0"><a class="on">全部</a><a>有效</a></div><div class="pager" style="padding:9px 0"><span class="pg on">1</span><span class="pg">2</span><span class="pg">3</span></div></div></td><td><div class="demo" data-theme="antd"><div class="tabs" style="padding:0"><a class="on">全部</a><a>有效</a></div><div class="pager" style="padding:9px 0"><span class="pg on">1</span><span class="pg">2</span><span class="pg">3</span></div></div></td></tr><tr><td>提示条</td><td><div class="demo" data-theme="carbon"><div class="al w"><span>⚠</span><span>钥匙编号不一致,请核对。</span></div></div></td><td><div class="demo" data-theme="fiori"><div class="al w"><span>⚠</span><span>钥匙编号不一致,请核对。</span></div></div></td><td><div class="demo" data-theme="antd"><div class="al w"><span>⚠</span><span>钥匙编号不一致,请核对。</span></div></div></td></tr>
</tbody>
</table></div>
<h2>四、高频长时使用的统一优化层<span>三套方案共用</span></h2>
<p class="note">这是针对「经纪人每天连续使用 6-8 小时」这一前提,在三套体系之上叠加的四条约束。三套方案均已落实。</p>
<table class="cmp">
<thead><tr><th>优化项</th><th>做法</th><th>解决什么</th></tr></thead>
<tbody>
<tr><td><b>深色品牌侧栏</b></td><td>侧栏统一用 <code>#0C2340</code> 而非浅灰</td><td>减少整屏亮度、形成稳定视觉锚点;浅灰侧栏在长时间使用中会与内容区「糊在一起」,找不到导航边界</td></tr>
<tr><td><b>斑马纹极低对比</b></td><td>条纹底色与白底差值控制在 2–3%(<code>#F4F4F4</code>/<code>#F5F6F7</code>/<code>#F5F5F5</code>)</td><td>帮助横向追行不串行,但不会产生条纹眩光;这是数据表最高频的疲劳源</td></tr>
<tr><td><b>语义色降饱和</b></td><td>状态标签用「描边+浅底」而非实心色块,浅底透明度压到 8–12%</td><td>一屏内可能有几十个状态标签,实心高饱和色块是最大的刺眼来源</td></tr>
<tr><td><b>金色只做点</b></td><td>品牌金 <code>#C6A15B</code> 只用于 logo、关键数字、选中指示条,占比 ≤5%</td><td>保住品牌质感,同时避免金色大面积铺陈显廉价</td></tr>
</tbody></table>
<h2>五、选型建议</h2>
<p class="note"><b style="color:#5ee08a">本次结论:已定稿 方案 B · Fiori 商务派</b>(2026-09-19)。定稿理由:三套中唯一 12/12 对比度开箱合规、语义令牌分层最完整、选中态用 8% 蓝底而非实色块(长时使用最不刺眼),且官方 Quick Theming 就是「替换 logo + 主品牌色」,与已定稿的甄房墨蓝最契合。下表保留完整选型逻辑,供后续复盘与其他产品线参考。</p>
<table class="cmp">
<thead><tr><th>如果……</th><th>建议</th><th>理由</th></tr></thead>
<tbody>
<tr><td>团队人少、迭代快,希望最快落地并降低长期维护成本</td><td><b>方案 C · AntD 亲和派</b></td><td>迁移成本最低、中文生态最全;代价是要按「生产落地必改项」把 6 处色值各下移一阶(改完视觉几乎无差别,但差别在无障碍上)</td></tr>
<tr><td>需要严谨的层级与无障碍,且能接受工程感外观</td><td><b>方案 A · Carbon 严谨派</b></td><td>灰阶分层最严谨、对比度有官方硬约束;数据密度最高。仅「黄色被当文字色」与「圆角偏硬」两处需按建议调整</td></tr>
<tr><td>交易与佣金等强流程模块、或需与财务/ERP 打通</td><td><b>方案 B · Fiori 商务派</b></td><td>状态与选中态表达最清楚,对比度规则可推导,符合企业级规范;三套中唯一 12/12 开箱合规</td></tr>
<tr><td>想要「一次到位」但不想赌</td><td><b>混合:Carbon 骨架 + AntD 语义色</b></td><td>用 Carbon 的灰阶分层与密度打底,语义色采用国内用户熟悉的 AntD 色相并降饱和(沿用 C 的必改项色值);这是我推荐的落地路径</td></tr>
</tbody></table>
</div>
<script>
// ── 令牌数据(由 Node 侧注入)──
var THEMES = [{"id":"carbon","name":"方案 A · Carbon 严谨派","sys":"IBM Carbon Design System","total":9.075000000000001},{"id":"fiori","name":"方案 B · Fiori 商务派","sys":"SAP Fiori · Morning Horizon","total":8.635},{"id":"antd","name":"方案 C · AntD 亲和派","sys":"Ant Design 5","total":8.299999999999999}];
// ── 真实计算 WCAG 对比度 ──────────────────────────────────────
function toRgb(c){
if (c.indexOf('rgba') === 0) {
return c.slice(5, c.length - 1).split(',').slice(0, 3).map(Number);
}
var h = c.replace('#', '');
if (h.length === 3) h = h.split('').map(function(x){ return x + x; }).join('');
return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
}
function lum(c){
var v = toRgb(c).map(function(x){ x/=255; return x <= .03928 ? x/12.92 : Math.pow((x+.055)/1.055, 2.4); });
return .2126*v[0] + .7152*v[1] + .0722*v[2];
}
function ratio(a,b){
var l1 = lum(a), l2 = lum(b);
return (Math.max(l1,l2) + .05) / (Math.min(l1,l2) + .05);
}
function blend(fg, bg, alpha){
var f = toRgb(fg), b = toRgb(bg);
return '#' + f.map(function(x,i){ return Math.round(x*alpha + b[i]*(1-alpha)).toString(16).padStart(2,'0'); }).join('');
}
var PAIRS = [
['一级文字 / 白底', 'text1', '#FFFFFF', 4.5],
['二级文字 / 白底', 'text2', '#FFFFFF', 4.5],
['三级文字 / 白底', 'text3', '#FFFFFF', 4.5],
['一级文字 / 次级底', 'text1', 'bg2', 4.5],
['白字 / 交互主色(按钮)', '#FFFFFF', 'primary', 4.5],
['主色文字 / 白底(链接)', 'primary', '#FFFFFF', 4.5],
['成功 / 白底', 'ok', '#FFFFFF', 3],
['警告 / 白底', 'warn', '#FFFFFF', 3],
['错误 / 白底', 'err', '#FFFFFF', 3],
['错误 / 白底(正文)', 'err', '#FFFFFF', 4.5],
['白字 / 品牌墨蓝(侧栏)', '#FFFFFF', 'brand', 4.5],
['侧栏二级字 / 品牌墨蓝', null, 'brand', 4.5, '#B9C2D0']
];
var SUMMARY = [];
THEMES.forEach(function(t){
var el = document.getElementById('wcag-' + t.id);
if (!el) return;
var dummy = document.querySelector('.demo[data-theme="' + t.id + '"]');
var cs = getComputedStyle(dummy);
var val = function(k){ return k.charAt(0) === '#' ? k : cs.getPropertyValue('--' + k).trim(); };
var out = [], bad = [];
PAIRS.forEach(function(p){
var fg = p[4] ? p[4] : val(p[1]); // p[4] 为直接色值覆盖(可选)
var bg = val(p[2]);
if (bg.indexOf('rgba') === 0) { bg = blend(bg, '#FFFFFF', parseFloat(bg.split(',')[3])); }
var r = ratio(fg, bg);
var req = p[3];
if (r < req) bad.push(p[0] + ' ' + r.toFixed(2) + ':1');
out.push('<div class="tk"><i style="background:' + bg + ';border-color:rgba(255,255,255,.2)"></i>' +
'<span class="n"><b>' + p[0] + '</b><code>' + r.toFixed(2) + ':1 要求 ≥' + req + ':1</code></span>' +
'<span class="r ' + (r >= req ? 'pass' : 'fail') + '">' + (r >= req ? '通过' : '未达标') + '</span></div>');
});
el.innerHTML = out.join('');
SUMMARY.push({ id: t.id, name: t.name, sys: t.sys, total: t.total, pass: PAIRS.length - bad.length, n: PAIRS.length, bad: bad });
});
var sumEl = document.getElementById('wcag-summary');
if (sumEl) {
sumEl.innerHTML = SUMMARY.map(function(s){
return '<div><b>' + s.sys + '</b> WCAG 实测 <em class="' + (s.bad.length ? 'no' : 'ok') + '">' +
s.pass + ' / ' + s.n + ' 通过</em>' + (s.bad.length ? ',需修正:' + s.bad.join('、') : ',全部达标') + '</div>';
}).join('');
}
</script>
</body></html>