:root { color-scheme: light; --ink: #192331; --muted: #758091; --line: #e5e9ef; --panel: #f7f9fc; --blue: #2168e8; --blue-soft: #eaf1ff; --green: #198754; --amber: #ae7100; --red: #c73a48; font-family: "Segoe UI", "Microsoft YaHei", sans-serif; } * { box-sizing: border-box; } /* hidden 属性必须能压过组件自身的 display（.alert-banner 之类的 flex/block）： 否则 JS 里设了 hidden，元素照样占着版面显示出来。 */ [hidden] { display: none !important; } body { margin: 0; color: var(--ink); background: #fff; font-size: 13px; } button, input, textarea, select { font: inherit; } button { cursor: pointer; } h1, h2, p { margin: 0; } .shell { display: grid; grid-template-columns: 180px minmax(0, 1fr); min-height: 100vh; } /* 滚动容器：`overflow-y: auto` 会让 overflow-x 的 visible 计算成 auto， 必须显式 hidden，否则表格 min-width 撑出的横向溢出会在主内容区多出一条横向滚动条。 内边距（尤其顶部）必须为 0：滚动发生在 .main 内侧，任何一个像素的内边距 都会变成固定区永远吃不掉的空档。首屏留白由 .view-tabs 的 margin-top 表达。 */ .main { min-width: 0; width: 100%; height: 100vh; padding: 0 0 48px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; } /* 滚动条常驻占位：名单够长时滚动条出现/消失不再让整表横向跳一下。 顶部固定条带是 100% 宽，已把这条滚动条算在内。 */ @supports (scrollbar-gutter: stable) { .main { scrollbar-gutter: stable; } } /* 固定区整体的滚动分隔线：名单越长越需要它提示"固定区下面还有内容"。 任务记录页仍是分块吸附，阴影照旧画在筛选条底边。 */ .main.is-scrolled .merchant-fixed { box-shadow: 0 7px 6px -6px rgba(25, 35, 49, .16); } :root { /* 主内容区水平内边距：滚动容器自己不留左右内边距（见下）， 改由视图内容各自使用，这样固定区可以横向铺满、又不会把内容顶到滚动条上。 */ --main-pad-inline: 48px; /* 首屏纵向留白：由 .view-tabs 的 margin-top 撑出（它随滚动正常走完， 不会像容器内边距那样变成吃不掉的空档）。必须 ≥ 页签自身高度， 否则页签会顶进下面的内容里（页签实测 40px 高：10 + 18 + 11 + 1px 下边框）。 48 → 32：页名大标题下线后，页签上方不再需要为"标题也要有一点呼吸位"留这么多。 */ --sticky-first-gap: 32px; /* 页签吸顶后占的高度：下方固定区（.merchant-fixed）贴它下沿吸顶。 默认 40px 与页签实测高度一致，脚本会跟随字体/内边距变化重写这个值。 */ --sticky-tabs-band: 40px; /* 表单控件统一高度：按钮、下拉框、图标按钮、纯文字按钮都按它对齐。 39 = 9×2 内边距 + 17 行高 + 1×2 边框。浏览器默认给下拉框只有 29px、 图标按钮 34px、主按钮 37px，同一行并排就会高低不齐（人工复核实测提出过）。 */ --control-height: 39px; } /* ── 固定工作台头部 ─────────────────────────────────────────── 需求：名单往下滚时，「页签 + 标题 + 搜索筛选/选择条」一直停在顶部， 表格以上区域不再被卷走；只有表格部分滚动。 组成：全局页签（.view-tabs，跨视图共用）吸顶在窗口最顶边； 商家名单页的固定区（.merchant-fixed）紧贴页签下沿吸顶。 两者都是 position: sticky，浏览器自己负责堆叠——没有"偏移量累加"的算术， 也就不存在改一处字号就要重算一长串 top 的问题。 前提：纵向滚动发生在 .main 自己身上（height:100vh + overflow-y:auto）， 且 .main 的上下内边距必须是 0——sticky 的 top 只相对滚动容器的 padding box 计算， 留在容器上的内边距会变成一块吃不掉的顶部空档，名单从它下方被裁切。 首屏留白则由 .view-tabs 的 margin-top 表达：它是内容的一部分，随滚动正常走完。 */ /* 固定区整体吸顶：页签下方的「筛选条 + 动作行 + 选择条」。 背景必须白：粘性块下方是滚动的表格，透明会看到表格从文字底下穿过。 */ .merchant-fixed { position: sticky; top: var(--sticky-tabs-band, 40px); z-index: 2; background: #fff; } /* 页签与下方内容之间的距离 28 → 12：页名大标题下线后，这段间距不再需要 "把标题和内容分开"，只保留"页签和内容不是同一块"的最小提示。 六个页签共用这一处，所以改一次六页一起收，不存在某页还空着的可能。 （之前实测：六个页签下沿到首块内容统一是 28px，视觉上就是一条空带。） */ .view-tabs { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); margin: var(--sticky-first-gap) var(--main-pad-inline) 12px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; background: #fff; /* top 就是吸附位置本身：0 = 贴住窗口最顶边。 未滚动时它只是普通文档流里的一块（margin-top 撑出首屏留白）， 滚动超过留白后才吸过去，两者在数值上没有补偿关系。 */ position: sticky; top: 0; z-index: 3; } .view-tabs::-webkit-scrollbar { display: none; width: 0; height: 0; } .view-tab { flex: 0 0 auto; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); padding: 10px 14px 11px; margin-bottom: -1px; white-space: nowrap; } .view-tab:hover { color: var(--blue); } .view-tab.active { border-bottom-color: var(--blue); color: var(--blue); font-weight: 600; } /* 此处曾有 `.collect-actionbar`（采集需求页的独立动作行）：已随"上半部分一行化"下线—— 三个页面动作并进了派发概览块（.collect-strip / .collect-strip__actions）， 吸顶与背景规则一并搬到那里，见文件后段「采集需求页与执行器页的采集设置」一节。 样式表里保留这块占位是为了让"动作行去哪了"有处可查，不引入任何新规则。 */ .muted { color: var(--muted); } .primary-button, .secondary-button, .danger-button { border: 1px solid transparent; border-radius: 5px; padding: 9px 13px; height: var(--control-height); font-weight: 600; white-space: nowrap; } .primary-button { background: var(--blue); color: #fff; } .primary-button:hover { background: #1856c5; } .secondary-button { background: #fff; color: var(--ink); border-color: var(--line); } .secondary-button:hover { background: var(--panel); } /* 「规则说明」这类"打开说明"的按钮：形状走 .secondary-button（和同排的「刷新」「新建」 同为按钮家族），只多一个「?」提示它是说明而不是动作。 图标用 ::before 而不是写进按钮文本：按钮的 textContent 必须保持「规则说明」—— UI 用例按 `textContent === '规则说明'` 断言入口文案，图标混进文本会让它假红。 */ .secondary-button--help::before { content: '?'; display: inline-grid; place-items: center; width: 14px; height: 14px; margin-right: 6px; border: 1px solid #b9c4d4; border-radius: 50%; color: var(--blue); font-size: 10px; font-weight: 700; line-height: 1; vertical-align: 1px; } .secondary-button--help:hover::before { border-color: var(--blue); } .danger-button { background: var(--red); color: #fff; } /* 禁用态必须有可见反馈：否则重跑在途时被锁住的按钮看起来仍然可点。 */ .primary-button:disabled, .secondary-button:disabled, .danger-button:disabled { opacity: .5; cursor: not-allowed; } .primary-button:disabled:hover { background: var(--blue); } .secondary-button:disabled:hover { background: #fff; } .icon-button { width: 34px; height: var(--control-height); border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--muted); font-size: 18px; } /* 统计卡随内容滚动（不常驻顶部，避免挤掉名单行），所以它紧接固定区下方、 与表格之间只留一点呼吸位。 */ .stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 8px var(--main-pad-inline) 14px; } .stat-card { border: 1px solid var(--line); border-radius: 6px; padding: 14px; } .stat-card strong { display: block; font-size: 22px; } .stat-card span { display: block; color: var(--muted); font-size: 11px; margin-top: 6px; } .stat-card.success strong { color: var(--green); } .stat-card.warning strong { color: var(--amber); } .stat-card.danger strong { color: var(--red); } /* 商家名单页头部只剩筛选条 + 选择条（页名与连接状态已下线，见 index.html 注释）。 页签下沿到筛选条之间留 12px：页签自身 margin-bottom 也是 12px，所以首块内容 与页签的分隔靠这一处表达；原来由 25px 大标题撑出的 60px 空档随标题一起去掉。 */ .merchant-fixed > .toolbar { margin-top: 12px; } /* ≤1200px 时 .toolbar 里的搜索框 + 状态筛选 + ↻ + 动作组可能放不下，靠 flex-wrap 换行； 这里把左右内边距移交给 .merchant-fixed 统一给，腾出那 96px（48×2）给搜索框—— 不腾的话搜索框最少时只剩 264px，动作组会被拆成两行。 阈值 1200px 是算出来的：视口 − 侧边栏 180 = 可用宽度，再减两侧各 48 的留白， 减去搜索框最小 220 + 状态筛选约 150 + ↻ 34 + 动作组 256 + 5 个 8px 间距 ≈ 1048px； 宽于它就该是一行，窄于它就换行。 上内边距保持 .toolbar 自己的 12px（sticky 只认滚动容器的 padding box， 横向内边距对吸顶没有影响）。 */ @media (max-width: 1200px) { .merchant-fixed { padding: 0 var(--main-pad-inline); } .merchant-fixed > .toolbar, .merchant-fixed > .selection-toolbar { margin-left: 0; margin-right: 0; } } /* 筛选/选择条（固定区里最该常驻的一块——名单几百行时靠它定位商家）。 底部这 10px 用 padding 而不是 margin 表达：吸附状态下 margin 是透明带， 滚动内容会从那道缝里透出来。 这一行里装六件东西，宽屏下**一行放完**： 左 = 搜索（吃掉剩余宽度）+ 状态筛选 + ↻刷新（都作用在同一份名单数据上） 右 = .toolbar__action：最近批次 / 批次执行 / 导入名单（页面级动作，靠右成组） 窄屏为什么必须换行（≤1000px 见下方媒体查询）：一行要装约 610px 的固定内容， 390px 视口下 flex 默认不换行，实测把 .main 撑到 scrollWidth 689px（横向溢出）。 */ .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 10px; margin: 0 var(--main-pad-inline); } /* 搜索框吃掉剩余宽度，把它右边的「状态筛选 + ↻刷新」推到中间偏右、动作组顶到最右。 为什么不用 justify-content: space-between：那会把状态筛选甩到正中间， 刷新与它之间被撑出一大段空白，看起来像"刷新"和它筛的那份数据没关系。 */ .toolbar > .search-control { flex: 1 1 220px; min-width: 0; } /* 左边距 auto = 把三个页面级动作推到这一行最右端（它们与筛选控件不是一回事）。 为什么用显式类名 .toolbar__actions 而不是 `:first-of-type`： `:first-of-type` 按**标签**计数，`.toolbar__action:first-of-type` 匹配的是这一行里 第一个