/* ============================================================================ 飞书皮肤（方向 D）—— 挂在真控制台上的换肤层 ──────────────────────────────────────────────────────────────────────────── 用法：。只在驾驶舱这一页挂，离开这一页就摘掉。 本文件**只覆盖 token 与观感**，控制台的业务组件、视图、构建一行不改； 不想要了就删掉这个文件和 index.html 里那两行，控制台回到原样。 三条纪律（来自 feishu-ui skill）： 1. 皮肤文件在 app.css **之后**加载。`:root[data-skin]`（0,2,0）和 `:root[data-theme="dark"]`（0,2,0）特异性相同，靠源序取胜——所以皮肤会把 深色刷成亮色。深色块必须写成 `:root[data-skin][data-theme="dark"]`（0,3,0）。 2. 深色三态都要覆盖：显式 dark、显式 light、以及跟随系统。漏掉第三种的话， 跟随系统的用户在暗色环境下会看到一半亮一半暗。 3. 只用控制台已有的 25 个 token 名，不发明新名字（新增的只有圆角一档， 在下面第一个块里定义，本文件内自足，不会变成幽灵 token）。 ============================================================================ */ /* ── 1. 浅色（默认） ─────────────────────────────────── */ :root[data-skin="feishu"] { /* 中性：纯灰不带色偏。控制台原来的冷石墨偏蓝，换成飞书的中性灰会「干净一档」 */ --ground: #f5f6f7; --surface: #ffffff; --surface-2: #fafbfc; --sunken: #f2f3f5; --line: #dee0e3; --line-soft: #eff0f1; --ink: #1f2329; --ink-2: #646a73; --ink-3: #8f959e; /* 强调：飞书蓝 */ --accent: #3370ff; --accent-ink: #ffffff; --accent-wash: #f0f4ff; --accent-line: #c2d5ff; /* 语义色。控制台用 --ok / --warn / --bad 画**字**，用 *-wash 画**底**， 正好对上飞书那套「深色版给要读的字、亮色版给色块」的分工： 这里给的是深色版（≥4.5:1），亮色版只出现在下面的条形与色块里。 */ --ok: #1f7a16; --ok-wash: #e8f7e4; --warn: #a85b00; --warn-wash: #fff3e0; --bad: #c4342f; --bad-wash: #fdedec; --idle: #8f959e; --idle-wash: #f2f3f5; --shadow: 0 1px 3px rgba(31,35,41,.05), 0 4px 12px rgba(31,35,41,.04); /* 圆角一档。控制台原来是 2/3/4px（量测机台的硬朗），飞书的「软」有一半来自这里。 这四个是本文件新增的 token，只在本文件里用。 */ --r-sm: 4px; --r-md: 7px; --r-lg: 10px; --r-xl: 14px; /* 条形与色块专用的亮色版语义色（飞书官方值）。只填面积，不放 14px 的字。 */ --solid-ok: #34c724; --solid-warn: #ff8800; --solid-bad: #f54a45; } /* ── 2. 深色（显式选择） ─────────────────────────────── */ /* 样板只做了浅色，但控制台本身有深色开关。这一块不写的话， 选了深色的用户在驾驶舱会被刷回亮色——那是纯粹的 bug，不是取舍。 */ :root[data-skin="feishu"][data-theme="dark"] { --ground: #17171a; --surface: #232324; --surface-2: #2a2a2b; --sunken: #313132; --line: #333335; --line-soft: #2a2a2b; --ink: #f7f8fa; --ink-2: #c9cdd4; --ink-3: #929aa5; --accent: #4e83fd; --accent-ink: #0b1220; --accent-wash: #182444; --accent-line: #2a4a94; /* 暗底上深色文字读不出来，语义色整体提亮 */ --ok: #5ed94a; --ok-wash: #17301a; --warn: #ffb545; --warn-wash: #33240c; --bad: #ff7d75; --bad-wash: #351a19; --idle: #929aa5; --idle-wash: #2a2a2b; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.5); } /* ── 3. 深色（跟随系统） ─────────────────────────────── */ /* 控制台的三态开关：跟随系统时不写 data-theme。所以这里用 :not([data-theme="light"])，特异性 0,3,0，压得住上面第 1 块。 */ @media (prefers-color-scheme: dark) { :root[data-skin="feishu"]:not([data-theme="light"]) { --ground: #17171a; --surface: #232324; --surface-2: #2a2a2b; --sunken: #313132; --line: #333335; --line-soft: #2a2a2b; --ink: #f7f8fa; --ink-2: #c9cdd4; --ink-3: #929aa5; --accent: #4e83fd; --accent-ink: #0b1220; --accent-wash: #182444; --accent-line: #2a4a94; --ok: #5ed94a; --ok-wash: #17301a; --warn: #ffb545; --warn-wash: #33240c; --bad: #ff7d75; --bad-wash: #351a19; --idle: #929aa5; --idle-wash: #2a2a2b; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.5); } } /* ============================================================================ 4. 圆角：控制台里的 2/3/4px 全部换成飞书那一档 （圆点、LED、进度圆圈这类 50% 的不动） ============================================================================ */ :root[data-skin="feishu"] .card, :root[data-skin="feishu"] .detail, :root[data-skin="feishu"] .sample, :root[data-skin="feishu"] .wizard, :root[data-skin="feishu"] .lead-dx, :root[data-skin="feishu"] .gap-card, :root[data-skin="feishu"] .cand, :root[data-skin="feishu"] .turn, :root[data-skin="feishu"] .fold-details, :root[data-skin="feishu"] .readouts { border-radius: var(--r-xl); } :root[data-skin="feishu"] .empty, :root[data-skin="feishu"] .banner, :root[data-skin="feishu"] .impact-fallback, :root[data-skin="feishu"] .gap-draft, :root[data-skin="feishu"] .intake-step, :root[data-skin="feishu"] .adapter, :root[data-skin="feishu"] .fstep, :root[data-skin="feishu"] .tier, :root[data-skin="feishu"] .wiz-step, :root[data-skin="feishu"] .nav-item, :root[data-skin="feishu"] .theme-switch, :root[data-skin="feishu"] .toast > div { border-radius: var(--r-lg); } :root[data-skin="feishu"] .btn, :root[data-skin="feishu"] .tag, :root[data-skin="feishu"] .editor input, :root[data-skin="feishu"] .editor textarea, :root[data-skin="feishu"] .correct textarea, :root[data-skin="feishu"] .intake-row input[type="url"] { border-radius: var(--r-md); } :root[data-skin="feishu"] .bar, :root[data-skin="feishu"] .usebar-track, :root[data-skin="feishu"] .usebar-fill, :root[data-skin="feishu"] .recap-count, :root[data-skin="feishu"] .regen code, :root[data-skin="feishu"] .nav-badge, :root[data-skin="feishu"] .die, :root[data-skin="feishu"] .legend-swatch, :root[data-skin="feishu"] .tier-mark, :root[data-skin="feishu"] .turn-mark, :root[data-skin="feishu"] .banner .mark, :root[data-skin="feishu"] .lead-dx .mark, :root[data-skin="feishu"] .sample-flag, :root[data-skin="feishu"] .wiz-state { border-radius: var(--r-sm); } :root[data-skin="feishu"] .bar-fill { border-radius: var(--r-sm) 0 0 var(--r-sm); } :root[data-skin="feishu"] .fstep > .fstep-bar { border-radius: var(--r-lg) 0 0 var(--r-lg); } :root[data-skin="feishu"] .ask-said { border-radius: 0 var(--r-sm) var(--r-sm) 0; } :root[data-skin="feishu"] .wiz-bar, :root[data-skin="feishu"] .wiz-fill { border-radius: 999px; } /* ============================================================================ 5. 驾驶舱：一处会说话的地方 ============================================================================ */ /* 诊断条 → 通栏横幅（方向 B 的那一条）。全页唯一可以重、可以有色的地方。 */ :root[data-skin="feishu"] .lead-dx { background: linear-gradient(120deg, var(--accent-wash) 0%, var(--surface) 62%); border: 1px solid var(--accent-line); padding: 22px 24px; gap: 16px; } :root[data-skin="feishu"] .lead-dx h2 { font-size: 21px; font-weight: 600; line-height: 1.45; letter-spacing: -.015em; } :root[data-skin="feishu"] .lead-dx p { font-size: 14px; line-height: 1.85; } :root[data-skin="feishu"] .lead-dx .mark { background: var(--accent-wash); color: var(--accent); font-weight: 600; border: 1px solid var(--accent-line); } /* 待办 → 任务卡（方向 C 的主视觉）。第一条加重：这是要你点的那一下。 */ :root[data-skin="feishu"] .ask { gap: 10px; } :root[data-skin="feishu"] .ask-item { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); padding: 16px 18px; } :root[data-skin="feishu"] .ask-item:first-child { border-color: var(--accent-line); background: var(--surface); box-shadow: 0 4px 12px rgba(31,35,41,.07), 0 16px 40px rgba(31,35,41,.05); } :root[data-skin="feishu"] .ask-one { font-size: 16px; font-weight: 600; } /* 卡片标题与正文：飞书那一档字号 */ :root[data-skin="feishu"] .card-head { padding: 14px 20px; } :root[data-skin="feishu"] .card-head h2 { font-size: 16px; font-weight: 600; } :root[data-skin="feishu"] .card-body { padding: 20px; } /* 流水行：靠留白和细线分层，不靠色块 */ :root[data-skin="feishu"] .recap-item { padding: 12px 20px; } :root[data-skin="feishu"] .recap-text { font-size: 14px; } /* 条形：单色只表达量级。控制台原来按 rate 高低换过颜色（is-low / is-mid）， 那是让条形替数字下判断——这里统一成单色，好坏交给右边的读数说。 */ :root[data-skin="feishu"] .bar { background: var(--accent-wash); } :root[data-skin="feishu"] .bar-fill, :root[data-skin="feishu"] .bar-fill.is-low, :root[data-skin="feishu"] .bar-fill.is-mid { background: var(--accent-line); } /* 状态标 pill 化：色 + 形 + 文字三重编码，圆点已经在 .tag .led 里了 */ :root[data-skin="feishu"] .tag { height: 22px; padding: 0 9px; font-weight: 500; } /* 按钮：主按钮实心飞书蓝 */ :root[data-skin="feishu"] .btn { height: 32px; padding: 0 16px; font-size: 14px; } :root[data-skin="feishu"] .btn.small { height: 28px; padding: 0 12px; font-size: 12px; } /* 左导航：选中项用极淡的品牌底，不用色块喊 */ :root[data-skin="feishu"] .nav-item[aria-current="page"] { background: var(--accent-wash); color: var(--accent); } /* 「样例数据」的琥珀斜纹框不动——那是产品声明，不是观感。 */ /* ============================================================================ 6. 第二轮加进来的两个视图（2026-08-30）：内容闭环 / AI 怎么说我 只做观感，不动信息结构。矩阵的 bin map 符号、斜纹「未采到」格、 「样例数据」琥珀框都不碰——那些是产品口径，不是装饰。 ============================================================================ */ /* 内容闭环：缺口卡 */ :root[data-skin="feishu"] .gap-head { padding: 16px 18px; } :root[data-skin="feishu"] .gap-q { font-size: 15px; } :root[data-skin="feishu"] .gap-foot { padding: 14px 18px; } :root[data-skin="feishu"] .gap-draft { margin: 0 18px; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--line-soft); font-size: 13.5px; } /* 引用的原文：左边线用淡一档的品牌色。它是「这是引擎的原话」的标记， 不该跟按钮一样重，但也不能退成灰——退成灰就跟普通注释混了。 */ :root[data-skin="feishu"] .quote { border-left-color: var(--accent-line); padding-left: 14px; font-size: 13.5px; } :root[data-skin="feishu"] .quote.is-empty { border-left-color: var(--line); } /* AI 怎么说我：矩阵与详情抽屉 */ :root[data-skin="feishu"] .q-cell { font-size: 13.5px; } :root[data-skin="feishu"] .detail { padding: 16px 18px; background: var(--surface); } :root[data-skin="feishu"] .cite-list li { font-size: 12px; } :root[data-skin="feishu"] .legend { padding-top: 16px; } /* ============================================================================ 7. 第三轮（2026-08-30）：剩下五个视图 开局设置 / AI 承接台 / 机读层 / 机器访客 / 积分用量 token 那一层已经把颜色和圆角全带过去了，这里只补几处内边距与字号。 刻意不碰的：候选事实「追不到出处」的红色虚线框、承接台没依据轮次的红框、 漏斗「测不到」的斜纹底、积分页的预警条——那些都是产品口径的落点。 ============================================================================ */ /* 开局设置：候选事实卡 */ :root[data-skin="feishu"] .cand { padding: 16px 18px; } :root[data-skin="feishu"] .cand-claim { font-size: 15px; } :root[data-skin="feishu"] .cand-src.is-bad { border-radius: var(--r-md); } /* AI 承接台：对话轮次 + 「答不上来的问题」台账 */ :root[data-skin="feishu"] .turn { padding: 14px 16px; } :root[data-skin="feishu"] .unans-item { padding: 14px 0; } :root[data-skin="feishu"] .unans-q { font-size: 15px; } /* 机器访客：漏斗。条底用极淡的品牌色，只表达量级 */ :root[data-skin="feishu"] .fstep { padding: 14px 16px; } :root[data-skin="feishu"] .fstep-val { font-size: 20px; } :root[data-skin="feishu"] .tier { padding: 13px 15px; } /* 机读层：协议产物 */ :root[data-skin="feishu"] .adapter { padding: 12px 14px; } /* 积分用量：用量条 */ :root[data-skin="feishu"] .usebar-track { height: 8px; }