/* ========================================================================== PaperOps 设计系统 桌面优先、中文优先的内部业务界面。无构建步骤（ADR-010）。 ========================================================================== */ /* --- 1. 设计令牌 ------------------------------------------------------- */ :root { /* 中性色。 背景比卡片暗一档是整套视觉的地基：白卡片必须"浮"在页面上， 否则一屏白底白框只剩下边框在承担层级，那正是上一轮"像原生后台"的来源。 */ --c-bg: #f4f5f8; --c-surface: #ffffff; --c-surface-alt: #fafbfc; --c-surface-sunken: #f1f3f6; --c-border: #e4e7ec; --c-border-strong: #c9d0d9; /* 悬停面：比 sunken 更浅，用于行悬停与安静按钮，不与"禁用"混淆 */ --c-hover: #f3f5f8; /* 输入控件的关闭态底色（CR-20260814-02 §五）。比卡片暗**一档**—— 这一档就是「这里可以输入」的信号。聚焦或已填写时回到纯白。 刻意不用 sunken：那个色阶用于整块区域（筛选栏托盘）， 控件用它会与所在区域糊在一起。 */ --c-surface-input: #fcfcfd; /* 文本 */ --c-text: #1a1f27; --c-text-secondary: #5a6472; --c-text-muted: #8b95a3; --c-text-inverse: #ffffff; /* 主色 */ --c-primary: #2563eb; --c-primary-hover: #1d4ed8; --c-primary-active: #1e40af; --c-primary-soft: #eff4ff; --c-primary-border: #bfd3ff; /* 语义色 */ --c-success: #15803d; --c-success-soft: #eaf7ee; --c-success-border: #b7e3c6; --c-warning: #b45309; --c-warning-soft: #fef6e7; --c-warning-border: #f5dca6; --c-danger: #b91c1c; --c-danger-soft: #fdefef; --c-danger-border: #f5c2c2; --c-info: #0369a1; --c-info-soft: #eaf5fb; --c-info-border: #b3ddf0; --c-neutral-soft: #f0f2f5; --c-neutral-border: #d9dee5; /* 排版 */ --font-sans: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", sans-serif; --font-mono: "SFMono-Regular", "Cascadia Mono", "JetBrains Mono", Consolas, "Liberation Mono", monospace; --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-base: 0.875rem; --fs-md: 0.9375rem; --fs-lg: 1.0625rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem; /* 间距 */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; /* 圆角与阴影 */ --radius-sm: 4px; --radius: 6px; --radius-lg: 10px; --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04); --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.07), 0 1px 2px rgba(16, 24, 40, 0.04); --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08); --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.14); /* 侧栏（深色反相面）。此前这五个值是散在 §3 里的字面量， 改一次主色要翻三处；集中到令牌层，与 §6.1 的颜色角色一一对应。 */ --c-nav-bg: #101720; --c-nav-text: #aeb8c6; --c-nav-text-strong: #ffffff; --c-nav-text-muted: #667283; --c-nav-border: rgba(255, 255, 255, 0.07); --c-nav-hover: rgba(255, 255, 255, 0.055); --c-nav-active: rgba(255, 255, 255, 0.1); --c-nav-accent: #6ea0ff; /* 布局 */ --sidebar-w: 224px; --topbar-h: 52px; --content-max: 1560px; /* 图标底托：指标卡、操作卡、空状态共用同一个尺寸， 不同页面的图标块大小不一致会立刻显得是拼出来的。 */ --tile: 34px; --tile-sm: 28px; --transition: 140ms cubic-bezier(0.4, 0, 0.2, 1); } /* --- 2. 基础重置 ------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.6; color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; line-height: 1.35; } h1 { font-size: var(--fs-2xl); } h2 { font-size: var(--fs-xl); } h3 { font-size: var(--fs-lg); } h4 { font-size: var(--fs-md); } p { margin: 0 0 var(--sp-3); } p:last-child { margin-bottom: 0; } a { color: var(--c-primary); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--c-primary-hover); text-decoration: underline; } code, pre, .mono { font-family: var(--font-mono); font-size: 0.92em; } pre { margin: 0; padding: var(--sp-3) var(--sp-4); background: var(--c-surface-sunken); border: 1px solid var(--c-border); border-radius: var(--radius); overflow-x: auto; line-height: 1.55; } code:not(pre code) { padding: 0.1em 0.35em; background: var(--c-surface-sunken); border-radius: var(--radius-sm); border: 1px solid var(--c-border); } hr { border: 0; border-top: 1px solid var(--c-border); margin: var(--sp-6) 0; } :focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: var(--radius-sm); } /* 图标基类（`components/icon.html`）。默认 16px、跟随 currentColor、 `flex-shrink:0` 防止在挤压的 Flex 行里被压扁成椭圆。 尺寸只有四档——图标大小是"看起来是一套"最容易露馅的地方。 */ .icon { width: 16px; height: 16px; display: block; flex-shrink: 0; } .icon--sm { width: 14px; height: 14px; } .icon--lg { width: 18px; height: 18px; } .icon--xl { width: 22px; height: 22px; } /* --- 3. 应用骨架 ------------------------------------------------------- */ .app { display: flex; min-height: 100vh; } /* 侧栏：品牌与页脚固定，只有导航区可滚（CR-20260816-06 / §12）。 * * 此前 `overflow-y: auto` 挂在 `.sidebar` 上，于是超出的时候**整根侧栏**一起滚， * 页脚（时区）会被推到视口外——1366×768 实测 scrollHeight 916 / clientHeight 768， * 「系统设置」底边在 853、页脚底边在 916，两者都在折线以下。 * * 改成滚动区落在 `.sidebar__nav`：品牌永远在顶、页脚永远在底， * 中间那段导航才是弹性区。即便将来权限矩阵再长出几个入口， * 掉出视口的也只会是中间的导航条目，而不是页脚。 * * `min-height: 0` 是这套写法的关键：flex item 的默认 `min-height: auto` * 会让它拒绝收缩到内容高度以下，`overflow-y: auto` 因此永远不触发。 */ .sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: var(--c-nav-bg); color: var(--c-nav-text); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: hidden; } .sidebar__brand { display: flex; align-items: center; gap: var(--sp-3); height: var(--topbar-h); padding: 0 var(--sp-4); font-size: var(--fs-md); font-weight: 650; letter-spacing: -0.01em; color: var(--c-nav-text-strong); border-bottom: 1px solid var(--c-nav-border); flex-shrink: 0; } .sidebar__brand:hover { text-decoration: none; color: var(--c-nav-text-strong); } .sidebar__brand-mark { width: 22px; height: 22px; display: block; flex-shrink: 0; } .sidebar__nav { padding: var(--sp-2) var(--sp-3); flex: 1 1 auto; min-height: 0; overflow-y: auto; } /* 分组标题（总览 / 业务 / 邮件 / 工具 / 系统）。 中文不存在大小写，`text-transform: uppercase` 对它没有任何作用—— 之前那条规则只是让夹在中间的拉丁字母变形。改用字号 + 字距 + 弱化色 来拉开它与条目本身的层级。 */ /* 分组间距（CR-20260816-06 收紧）：原来是 20px 上 / 8px 下，五个分组光间距就吃掉 216px。11px 的小标签不需要 20px 的上留白来和上一组拉开——8/4 之后分组依然 一眼可辨，而 1366×768 下整根侧栏才装得下。字号一个像素没动。 */ /* CR-20260816-07 §39 曾试图把分组上留白从 8px 加到 9px，**实测之后撤销**。 * * 字号 14→15 之后 1366×768 下 `.sidebar__nav` 的余量已经不足 1px： * 加 1px × 4 个分组（首个分组另有 `:first-child` 覆盖）就让 * scrollHeight 689 > clientHeight 688，侧栏内部开始滚动——那是本节的硬约束。 * * 字号与行高的收益（14→15px、32.4→34px）比分组间距明显得多，因此保留前者、 * 放弃后者。这里留下记录是为了让下一个人知道：这一格不是忘了改，是量过之后没有余量。 */ .sidebar__section { padding: var(--sp-2) var(--sp-3) var(--sp-1); font-size: 11px; letter-spacing: 0.09em; color: var(--c-nav-text-muted); font-weight: 600; } .sidebar__section:first-child { padding-top: var(--sp-1); } /* 导航条目（CR-20260814-01 / §3）。 * * 此前 active 是一整块实心主色：一屏之内最饱和的色块落在"我现在在哪"上， * 比页面上任何一个业务动作都响。改成"抬起的中性面 + 左侧 2px 指示条 + * 提亮的图标"：位置信息照样一眼可见，但它退回背景层，不再和内容抢注意力。 * * 指示条用 ::before 画而不是 border-left，这样条目本身不会因为选中而位移。 */ .sidebar__link { position: relative; display: flex; align-items: center; gap: var(--sp-3); /* 7px → 5px / 2px → 1px（CR-20260816-06）：15 个条目，每个省 5px 就是 75px。 行高从 36.4 收到 32.4，仍在舒适点选区间内（图标 17px），字号未动。 CR-20260816-07 §39：在 1366×768 不滚动这条硬约束**不变**的前提下把字号调回去。 预算是量出来的，不是估的——改动前实测 1366×768 下最后一个导航项底边 703.8px、 页脚顶边 731.8px，中间 28px 是纯黑留白（正是用户说的「底部无意义留白」）。 再把页脚上下内边距从 8px 收到 4px（版权行本来就是低视觉权重，§38）， 合计可支配约 36px。 花法：字号 14 → 15px。行盒随之从 22.4 长到 24，每行 +1.6px、15 行 +24px， 行高因此从 32.4 回到 34（§39 点名的「font size」与「row height」一起兑现）。 内边距刻意**不动**：+1px 内边距是每行 +2px、合计 +30px，一项就会吃光预算。 */ padding: 5px var(--sp-3); margin-bottom: 1px; border-radius: var(--radius); color: var(--c-nav-text); font-size: var(--fs-md); transition: background var(--transition), color var(--transition); } .sidebar__link::before { content: ""; position: absolute; left: calc(-1 * var(--sp-3) + 1px); top: 50%; width: 2px; height: 0; border-radius: 0 2px 2px 0; background: var(--c-nav-accent); transform: translateY(-50%); transition: height var(--transition); } .sidebar__link:hover { background: var(--c-nav-hover); color: var(--c-nav-text-strong); text-decoration: none; } .sidebar__link--active { background: var(--c-nav-active); color: var(--c-nav-text-strong); font-weight: 550; } .sidebar__link--active::before { height: 17px; } .sidebar__link--active:hover { background: var(--c-nav-active); color: var(--c-nav-text-strong); } /* 18px（CR-20260816-07 §39，原 17px）。图标仍小于 15px 字号的行盒（24px）， 因此**不增加任何行高**——这一格是纯粹的视觉收益，不花高度预算。 */ .sidebar__icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.72; display: block; } .sidebar__link:hover .sidebar__icon { opacity: 0.92; } .sidebar__link--active .sidebar__icon { opacity: 1; color: var(--c-nav-accent); } .sidebar__badge { margin-left: auto; background: var(--c-danger); color: var(--c-text-inverse); font-size: 11px; font-weight: 600; padding: 0 6px; border-radius: 9px; min-width: 18px; text-align: center; line-height: 17px; } /* 页脚：紧凑、低视觉权重、永不参与滚动（CR-20260816-06 / §11）。 `flex-shrink: 0` 保证导航再长也压不扁它——它是那条「全站时间戳按哪个时区读」 的参考信息，压成半行就没有意义了。 */ .sidebar__footer { flex-shrink: 0; padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--c-nav-border); font-size: var(--fs-xs); color: var(--c-nav-text-muted); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); } /* 版权页脚（CR-20260816-07 §38）。低视觉权重：单行、居中、弱化色。 * * 上下内边距从 8px 收到 4px——省下的 8px 直接用于导航字号（§39）。 * 这不是为了「更紧凑」，而是因为版权行不值得占用导航的高度。 * * ⚠️ 必须写在 `.sidebar__footer` **之后**：两者特指度相同， * 写在前面会被基类的 `padding` 简写整个盖掉，改了等于没改。 */ .sidebar__footer--copyright { padding-top: var(--sp-1); padding-bottom: var(--sp-1); justify-content: center; } /* ── 高视口更舒展，低视口一个字节不变（CR-20260817-02 §50–§54）───────────── * * ## 为什么必须是视口高度条件，而不是把间距整体调大 * * 上面两条注释已经记录过两次实测结论：1366×768 下 `.sidebar__nav` 的余量 * **不足 1px**，CR-20260816-07 §39 想给分组加 1px 都被量出来会触发内部滚动。 * 所以「用户觉得留白多」和「768 装不下」这两件事都是真的——它们说的是 * **不同的视口**。任何全局加高都会用后者的代价换前者的收益。 * * ## 预算是算出来的（2026-08-17 浏览器实测） * * nav 内容实际占用 = 667.97px（三档视口下都一样，与视口无关） * nav clientHeight = 视口高 − 80px（品牌区 52 + 页脚约 28） * * 视口 768 → nav 688 → 余量 20.03px ← 硬门禁所在，这里不加任何东西 * 视口 900 → nav 820 → 余量 152.03px * 视口 1080 → nav 1000 → 余量 332.03px * * 一个 `min-height: H` 断点的最坏情况是视口正好等于 H，因此可支配预算是 * `(H − 80) − 667.97`： * * H = 860 → 可支配 112.03px，本轮只花 60px（留 52px 余量） * H = 1000 → 可支配 252.03px，本轮只花 144px（留 108px 余量） * * 刻意只花掉一半多：预算是按**当前** 15 个导航项算的，将来加一个模块入口 * （一项约 35px）不该立刻把某一档打穿。 * * ## 为什么不用 justify-content: space-between * * §52 点名禁止。它会把五个分组按剩余空间**机械平分**，1080 下分组之间会 * 出现 60px 以上的空档——那不是舒展，那是散架。这里加的是每一项自己的 * 内边距，因此密度是均匀变化的。 * * `min-width: 901px` 与既有的 900px 折叠断点对齐：900 以下侧栏收成图标条、 * 分组标题整体隐藏，内容高度完全是另一回事，不该套用这里的预算。 * * ⚠️ **必须写在全部 `.sidebar__*` 基类之后**，与紧邻上方 `.sidebar__footer--copyright` * 的告警是同一件事。本轮第一次写完放在了 `.sidebar__link` **之前**，同特指度下 * 基类的 `padding` 简写胜出——1440×900 的实测数字与改动前**逐像素相同**， * 而 CSS 里明明白白写着新值。媒体查询不会让规则赢，顺序才会。 */ @media (min-height: 860px) and (min-width: 901px) { /* 15 项 × 上下各 +2px = +60px */ .sidebar__link { padding: 7px var(--sp-3); } } @media (min-height: 1000px) and (min-width: 901px) { /* 15 × 8 = 120，4 个分组 × 4 = 16（首个分组由 :first-child 覆盖），nav 自身 +8 → 144px */ .sidebar__nav { padding: var(--sp-3) var(--sp-3); } .sidebar__link { padding: 9px var(--sp-3); } .sidebar__section { padding: var(--sp-4) var(--sp-3) var(--sp-1); } .sidebar__section:first-child { padding-top: var(--sp-1); } } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { height: var(--topbar-h); background: var(--c-surface); border-bottom: 1px solid var(--c-border); display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-5) 0 var(--sp-6); position: sticky; top: 0; z-index: 30; flex-shrink: 0; } /* 顶栏标题是**当前位置**，不是页面标题——页面标题由 `.page-header h1` 承担， 两处用同样的分量会让人以为是同一行内容重复了一遍。这里弱化成一句定位文字。 */ .topbar__title { font-size: var(--fs-sm); font-weight: 550; color: var(--c-text-secondary); } .topbar__spacer { flex: 1; } .topbar__divider { width: 1px; height: 20px; background: var(--c-border); flex-shrink: 0; } /* 只对读屏器可见的标签。输入框已有 placeholder，但 placeholder 不是 label。 */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* 编号直达（CR-20260813-01，本轮重做外观）。 * * 此前是一个孤零零的裸输入框浮在顶栏中间——既不像搜索，也不属于任何结构。 * 现在是一个完整的搜索控件：沉底面 + 前置放大镜图标 + 聚焦时升为白底描边。 * 行为一个字没改，仍然只做"一个输入框 + 一次 302"。 */ .topbar__jump { display: flex; align-items: center; } .topbar__jump-field { position: relative; display: flex; align-items: center; } .topbar__jump-icon { position: absolute; left: 9px; width: 15px; height: 15px; color: var(--c-text-muted); pointer-events: none; } /* ⚠️ 选择器必须是 `.topbar .topbar__jump-input`（0,2,0），不能只写类名。 * 表单系统里有一条 `input[type="search"], ...` 的通用规则，特异性 (0,1,1) * 且位置更靠后——单写 `.topbar__jump-input`（0,1,0）会被它的 * `min-height: var(--control-h)` = 42px 压掉，改高度看起来"没生效"。 * * 本仓库这已经是第三次栽在同一件事上（`.table th` 压 `.table__num`、 * `--control-h` 被定义两次）。改控件尺寸前先算一遍特异性，或直接量计算值。 */ .topbar .topbar__jump-input { /* 22rem 而不是 15rem（CR-20260815-19）：它从顶栏右角的「编号直达」变成了 左侧的全站搜索入口，宽度要撑得住「主题、发件人或文件名」这类真实查询词。 */ width: 22rem; max-width: 38vw; /* 28px 而不是 32px（CR-20260815-12 / 用户裁定「高度太高了」）： 顶栏是一条 56px 的窄条，里面的控件越接近内容高度越像"栏里的东西"， 越接近表单控件高度就越像"一个表单掉进了顶栏"。 */ min-height: 28px; padding: 0 .6rem 0 30px; border: 1px solid transparent; border-radius: var(--radius); background: var(--c-surface-sunken); color: var(--c-text); font-size: var(--fs-sm); transition: background var(--transition), border-color var(--transition), box-shadow var(--transition); } .topbar .topbar__jump-input::placeholder { color: var(--c-text-muted); } .topbar .topbar__jump-input:hover { background: var(--c-hover); } .topbar .topbar__jump-input:focus { background: var(--c-surface); border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.13); outline: none; } @media (max-width: 900px) { .topbar__jump { display: none; } } /* 滚动条（CR-20260815-12，CR-20260815-14 修正生效条件）。 * * ## 上一版为什么没生效 * 写成全局 `* { scrollbar-width: thin }` + `::-webkit-scrollbar{...}`， * 以为两套并存、各引擎各取所需。**恰恰相反**：Chromium 从 121 起规定， * 元素一旦设了标准属性 `scrollbar-width`，该元素的 `::-webkit-scrollbar*` * 规则**全部失效**。于是那条 `*` 把自己的伪元素样式关掉了， * 看到的是 Chrome 内置的 thin 滚动条——用户说「还是原生的」，是对的。 * * 修法：用 `@supports not selector(::-webkit-scrollbar)` 把标准属性**只**给 * 不支持伪元素的引擎（Firefox）。Chromium / Safari 那边一个 `scrollbar-width` * 都不设，伪元素因此正常生效。 * * ## 深色容器要单独给颜色 * 侧栏是深色面。浅灰滑块在浅色页面上刚好，放到深色侧栏上会太跳； * 所以侧栏用一档更暗、带透明度的白，随背景融合。 * * ## 仍然不做 display: none * 藏掉滚动条会让「这里还能往下滚」失去唯一提示，长表格与代码块尤其致命。 * 做的是变细、去掉两端箭头按钮、配色跟随容器。 */ @supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: var(--c-border-strong) transparent; } .sidebar, .sidebar * { scrollbar-color: rgba(255, 255, 255, 0.28) transparent; } } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: var(--c-border-strong); border-radius: 999px; /* 用透明边框把滑块"收窄"成 6px，同时保留 10px 的可抓取宽度—— 直接把 width 设成 6px 会让它变得很难用鼠标抓住。 */ border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background-color: var(--c-text-muted); } /* 两端的箭头按钮是原生外观里最"系统"的一块，去掉。 `width/height: 0` 与 `display: none` 一起写：某些 Chromium 版本对后者 仍会保留按钮占位，前者才真正把它压没。 */ ::-webkit-scrollbar-button { display: none; width: 0; height: 0; } ::-webkit-scrollbar-corner { background: transparent; } /* 深色侧栏：同一套形状，换一档颜色。 */ .sidebar::-webkit-scrollbar-thumb, .sidebar *::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.28); } .sidebar::-webkit-scrollbar-thumb:hover, .sidebar *::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.45); } /* 右上角消息提醒（CR-20260816-01 / ADR-142）。 * * 与右下角的任务坞是**一对**：坞回答「有什么在跑」，提醒回答「刚刚跑完了」。 * 两者位置刻意分开——同在右下角会让「常驻状态」和「一次性通知」抢同一块地方。 * * `z-index` 高于进度框（320）与顶栏：它是最上层的一次性消息。 * 但**低于**模态对话框的遮罩不适用——这里没有模态需要盖住它。 */ .toast-stack { position: fixed; top: calc(var(--topbar-h) + var(--sp-3)); right: var(--sp-5); z-index: 400; display: flex; flex-direction: column; gap: var(--sp-2); width: min(360px, calc(100vw - 2 * var(--sp-5))); pointer-events: none; } .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); border: 1px solid var(--c-border); background: var(--c-surface); box-shadow: var(--shadow-lg); animation: toast-in .2s ease-out; } .toast--clickable { cursor: pointer; } .toast--clickable:hover { border-color: var(--c-primary); } .toast--info { border-left: 3px solid var(--c-primary); } .toast--success { border-left: 3px solid var(--c-success); } .toast--danger { border-left: 3px solid var(--c-danger); } .toast__body { flex: 1 1 auto; min-width: 0; } .toast__title { font-weight: 600; font-size: var(--fs-sm); color: var(--c-text); } .toast__text { margin-top: 2px; font-size: var(--fs-xs); color: var(--c-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .toast__close { flex: 0 0 auto; border: 0; background: none; cursor: pointer; color: var(--c-text-muted); font-size: 18px; line-height: 1; padding: 0 2px; } .toast__close:hover { color: var(--c-text); } @keyframes toast-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .toast { animation: none; } } /* 页面切换的过渡（CR-20260815-14 / 用户裁定「跳转太直接」）。 * * 顶部一条 2px 的进度线 + 正文淡入。两者合起来回答一个问题： * 「我点了，系统收到了吗」——服务端渲染的站点在旧页面与新页面之间有一段 * 完全没有反馈的空窗，快时像卡了一下，慢时用户会以为没点上、再点一次。 * * 进度条用 `transform: scaleX()` 而不是改 `width`：前者只触发合成， * 不会在导航正忙的时候再逼浏览器做一轮布局。 * * `z-index` 要高过顶栏与任务坞——它是"整页正在换"的指示，不属于任何一层内容。 */ .nav-progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 900; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--c-primary), var(--c-primary-hover)); opacity: 0; pointer-events: none; transition: transform .18s ease-out, opacity .18s ease-out; } .nav-progress.is-active { opacity: 1; } /* 正文淡入。只动 `.content`，不动侧栏与顶栏——那两块在页面之间基本不变， 让它们跟着闪一下反而像整站重载。位移只有 3px：是"落位"，不是"飞入"。 */ /* 正文淡入 250ms（CR-20260815-20 再调；此前 220ms、更早 120ms）： 120ms 快到只留下一次"闪"的印象，眼睛没跟上就结束了，反而比没有动效更晃。 220ms 是"看得出来在落位"的下限，仍然远低于会让人等待的量级。 位移 4px：够表达方向，不至于像元素飞进来。 */ /* ⚠️ `backwards` 而**不是** `both`。这不是风格选择，是一个真实缺陷的修复。 * * `both` 会把 `to` 关键帧的值在动画结束后继续应用，于是 `.content` 上永远留着一个 * `transform: matrix(1,0,0,1,0,0)`——单位矩阵，视觉上等于没有，但它让 `.content` * 成为**固定定位的包含块**。结果：拟题页那个 `position: fixed; inset: 0` 的中央 * 处理框不再相对视口定位，而是相对正文——实测框的位置是 (0, 952)、尺寸 1440×2366， * 整个跑到折叠线以下，遮罩也只盖住正文而盖不住右栏（用户报的「不居中、右边是白的」）。 * * `backwards` 只在动画**开始前**应用 `from`，结束后属性回到元素自身的值（`none`）， * 包含块随之消失。淡入效果一模一样。 * * 教训：给一个大容器加 `transform` 动画之前，先想清楚它里面有没有 `position: fixed`。 */ .content { animation: page-enter .25s cubic-bezier(.22, .61, .36, 1) backwards; } @keyframes page-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* 减弱动效：淡入与进度条的补间全部关掉。 进度条本身**仍然显示**——它传递的是状态（正在加载），不是装饰； 把它一并去掉等于把这个偏好的用户退回到没有反馈的旧状态。 */ @media (prefers-reduced-motion: reduce) { .content { animation: none; } .nav-progress { transition: none; } } /* 用户区：头像 + 名字 + 角色是**一个**可点击面，退出是它旁边一个独立的图标按钮。 此前三者是三个并排的元素，中间还夹着一个蓝色徽标，读起来像三个控件。 */ .topbar__user { display: flex; align-items: center; gap: var(--sp-2); } .topbar__account { display: flex; align-items: center; gap: var(--sp-2); padding: 3px var(--sp-2) 3px 3px; border-radius: 999px; color: var(--c-text); font-size: var(--fs-sm); transition: background var(--transition); } .topbar__account:hover { background: var(--c-hover); text-decoration: none; color: var(--c-text); } .topbar__account-name { font-weight: 550; white-space: nowrap; } .topbar__account-role { font-size: var(--fs-xs); color: var(--c-text-muted); white-space: nowrap; } @media (max-width: 640px) { .topbar__account-name, .topbar__account-role { display: none; } } .avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--c-primary-soft); color: var(--c-primary); display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 600; border: 1px solid var(--c-primary-border); flex-shrink: 0; } .content { padding: var(--sp-6) var(--sp-6) var(--sp-10); max-width: var(--content-max); width: 100%; flex: 1; } /* --- 3a. 页头 ---------------------------------------------------------- */ /* 每个页面的第一屏都从这里开始，所以它的结构就是全站的结构感。 * * 分四层，顺序固定：面包屑 → 标题行（标题 + 编号 + 状态）→ 一行说明 → * 视图切换。动作区在右侧，层级由 §4 的按钮规则决定。 * 底部一条通栏细线：把"页面身份"和"页面内容"明确分开——没有它， * 标题只是碰巧排在最上面的一段粗体字。 */ .page-header { display: flex; /* 有标识块时整行居中（标识块 38px 高于文字块的第一行）， 没有标识块时保持顶对齐——那是记录页与表单页的形态。 */ align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--c-border); flex-wrap: wrap; } /* 少数页面（登录后的空壳页、无标题的嵌入页）不需要那条线 */ .page-header--plain { border-bottom: 0; padding-bottom: 0; } /* `flex: 1 1 420px` 而不是让文本块自然撑满：说明文字长一点时， `page-header__actions` 会被挤到第二行、左对齐单独占一行，看起来像掉出来的 （投稿看板就是这样）。给文本块一个可收缩的基准宽度，动作区就始终在右上角。 */ /* 页头标识块（CR-20260815-16 / 用户裁定「其他标题都很简陋」）。 * * AI 拟题页早就有一个「图标 + 标题 + 一句说明」的页头（`.tool-header`）， * 而其余页面只有一行加粗字。同一个系统里两种页头形态，前者看起来像产品、 * 后者看起来像半成品。这里把那套视觉语言收成一个可复用的标识块。 * * ## 只给**分区落地页**，不给记录页与表单页 * 落地页（客户、稿件、邮件、后台任务……）回答「我在系统的哪一块」， * 图标是这块的身份，与侧栏那一项一一对应。 * 记录页的标题是**这条记录的名字**（某位客户、某封邮件）， * 在它旁边放一个分区图标会和记录本身抢位置——那里要的是编号与状态，不是分区标识。 * * ## 比 `.tool-header` 轻 * 不带卡片底与渐变：列表页的页头上方就是顶栏、下方紧接筛选栏， * 再加一层卡片会让第一屏出现三条横向分隔。这里只保留图标块本身。 */ .page-header__mark { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--radius); background: var(--c-primary-soft); color: var(--c-primary); border: 1px solid var(--c-primary-border); } .page-header__mark .icon { width: 20px; height: 20px; } /* 带标识块的页头：标识与文字块一起垂直居中，动作区已由 `align-self: center` 处理。 */ .page-header:has(.page-header__mark) { align-items: center; } .page-header__text { min-width: 0; flex: 1 1 420px; } /* 页头标题的行框高度。 * * ⚠️ 这里曾经**同时**定义 `--control-h: 34.5px`（CR-20260814-13）， * 但表单区还有第二个 `:root` 把它重定义成 42px（见下方「表单系统」一节）。 * 同名 token 定义两次，后者一直在覆盖前者——那句「今天一个像素都不变」 * 描述的值**从来没有生效过**。全站控件实际一直是 42px。 * * 已把定义收归到唯一一处（表单系统那个 `:root`），这里只留标题行高。 * 发现方式：量到 `.btn--sm` 的 `min-height` 计算值是 34px 而不是新写的 26px， * 顺着找到了第二个定义。改 token 前先 grep 一遍它被定义了几次。 */ :root { --page-title-line: 1.85rem; } .page-header h1 { font-size: 1.375rem; letter-spacing: -0.012em; line-height: var(--page-title-line); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; min-width: 0; } .page-header h1 > .badge { font-size: var(--fs-xs); } /* 标题旁的内部编号：等宽、弱化，但和标题同一行——它是这条记录的身份证。 */ .page-header__code { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500; color: var(--c-text-muted); letter-spacing: 0; } .page-header__desc { color: var(--c-text-secondary); font-size: var(--fs-sm); margin-top: var(--sp-2); } /* 标题下的一行事实（编号 · 单位 · 状态），区别于 `__desc` 的一句说明。 */ .page-header__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-secondary); } .page-header__meta .badge { flex-shrink: 0; } /* max-width:100% 让按钮多时（如拟题规则页 6 个入口）在窄屏内换行， 而不是靠 flex-shrink:0 撑出页面级横向滚动（CR-20260722-01 E2E 发现）。 */ /* 动作区与**标题那一行**居中对齐，而不是与整个文本块（标题 + 说明 + 元信息 + 视图切换） * 顶端对齐。`.page-header` 是 `align-items: flex-start`，于是 34.5px 高的按钮与 * 29.7px 高的标题行同顶起排，中心差 **2.41px**——刚好是那种「说不出哪里不对， * 但看着不正」的量（实测见 `scripts/ui_geometry_audit.py`）。 * 给动作区一个等于标题行高的最小高度并在其中居中，两者的视觉中线就重合了。 */ .page-header__actions { display: flex; align-items: center; gap: var(--sp-2); /* 按钮与**整个文字块**（标题 + 下面那行编号/日期/说明）垂直居中， * 不是与标题那一行居中，也不是与标题顶端齐平（CR-20260815-07 / 用户裁定，两轮）。 * * 走过的两版都被验收否掉，原因值得留着： * 1. 与标题**行框**居中 → 按钮上沿越过页面第一条视觉边界约 2.4px， * 最上面那条线因此不平； * 2. 与标题行框**顶端齐平** → 文字块有第二行时，按钮整体偏高、 * 像挂在文字块的上半截。 * 现在按 flex 行的交叉轴居中：文字块多高，按钮就落在它的正中间， * 一行标题时退化成「与标题居中」，与旧行为一致。 * * `align-self` 覆盖 `.page-header` 的 `align-items: flex-start`——后者是给 * 文字块用的（它必须顶格），这里只改按钮自己。 */ align-self: center; flex-shrink: 0; flex-wrap: wrap; max-width: 100%; } /* 视图切换链接（CR-20260813-02 / §7.1）。 * * 页头动作区此前把两类完全不同的东西混成一排等宽按钮：**会改数据的动作** * （立即同步、测试连接、重新发现文件夹）和**只是换一页看**（同步记录、 * 同步错误、全部邮件、看板视图）。邮箱详情页因此顶着七个同样分量的按钮， * 谁是主操作看不出来。 * * 规则：动作区里最多一个 `.btn--primary`；纯导航条目改用这一行安静的链接， * 排在标题下方而不是按钮区里。 */ .page-header__views { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1) var(--sp-1); margin-top: var(--sp-3); font-size: var(--fs-sm); } /* 纯导航条目：安静的胶囊，悬停才显形。做成胶囊而不是裸链接，是为了 让它明确区别于正文里的蓝色内联链接——那是"跳到某条记录"， 这是"换一个视图看同一批数据"。 */ .page-header__views a { display: inline-flex; align-items: center; gap: 5px; padding: 3px var(--sp-3); border-radius: 999px; color: var(--c-text-secondary); transition: background var(--transition), color var(--transition); } .page-header__views a:hover { color: var(--c-text); background: var(--c-surface-sunken); text-decoration: none; } .page-header__views .icon { width: 14px; height: 14px; opacity: .75; } /* ⚠️ **页头动作区里的跨页导航现在用 `.btn`**（CR-20260815-05）。 * * 演进过程留在这里，因为它解释了上面那条规则的边界： * 1. 最初这些链接浮在标题与正文之间（`.page-header__views`，胶囊样式）—— * 验收判为「很丑也不专业」； * 2. 搬进动作区、保持安静文字链接（`--inline` 修饰类，中点分隔）—— * 验收判为「太简陋」。旁边就是一个实心主按钮，落差太大，像还没做完。 * 3. 现在：直接挂 `.btn`，成为动作区的次级按钮。 * * 这**不违反**上面那条「把导航做成按钮 = 七个同分量按钮」的告诫：那条防的是 * **同分量**——当年七个全是实心按钮，谁是主操作看不出来。次级按钮（描边白底） * 加唯一一个 `.btn--primary`（实心蓝）本身就是层级。 * * 规则因此收敛成一句：**动作区里最多一个 `.btn--primary`**，其余一律次级。 * `.page-header__views`（标题下的胶囊行）保留给**详情页面包屑之外**的场景， * 当前所有列表页都已不用它。 */ .breadcrumb { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-muted); margin-bottom: var(--sp-2); } .breadcrumb a { color: var(--c-text-secondary); } .breadcrumb a:hover { color: var(--c-text); } .breadcrumb__sep { color: var(--c-border-strong); } /* --- 3b. 页签 ---------------------------------------------------------- */ /* 同一实体的多个编辑面（当前：用户的「基本信息 / 功能权限」）。 用链接而不是 JS 切换：每个面是独立 URL，可以直接收藏、分享与后退。 */ .tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--c-border); margin-bottom: var(--sp-5); } .tabs__item { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-base); font-weight: 500; color: var(--c-text-secondary); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .12s ease, border-color .12s ease; } .tabs__item:hover { color: var(--c-text); } .tabs__item--active { color: var(--c-primary); border-bottom-color: var(--c-primary); } /* --- 4. 卡片 ----------------------------------------------------------- */ /* 卡片头的分隔线本轮改成**条件性**的（CR-20260814-01 / §4）。 * * "白框 + 标题 + 一条横线 + 内容"是上一轮全站最像半成品的形状：一屏里 * 五张卡片各画一条横线，页面被切成一堆等分的白格子，而那些线一条也没有 * 在分隔真正不同的东西。 * * 规则改成：**只有当卡片体是齐边内容（表格、列表、行式表单）时才画线**， * 因为那时线是表格的上边界，有结构意义；卡片体是普通内容时不画线，标题 * 与内容靠间距成组，读起来是一块，而不是两块被线粘在一起。 */ .card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); } .card + .card { margin-top: var(--sp-5); } .card__header { display: flex; align-items: center; justify-content: space-between; column-gap: var(--sp-3); row-gap: var(--sp-1); padding: var(--sp-4) var(--sp-5) var(--sp-3); flex-wrap: wrap; } .card__header:has(+ .card__body--flush), .card__header:has(+ .table-wrap), .card__header:has(+ .row-form__head), .card__header:has(+ .row-form-group) { padding-bottom: var(--sp-4); border-bottom: 1px solid var(--c-border); } /* 标题与紧随其后的普通内容之间不要两份内边距叠加 */ .card__header + .card__body:not(.card__body--flush) { padding-top: var(--sp-1); } .card__title { font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.005em; display: flex; align-items: center; gap: var(--sp-2); min-width: 0; } /* 卡片标题右侧的计数，如「稿件 3」。比括号写法更好扫，也不会被误当成正文。 */ .card__count { font-size: var(--fs-xs); font-weight: 600; color: var(--c-text-secondary); background: var(--c-surface-sunken); border-radius: 999px; padding: 0 7px; line-height: 18px; font-variant-numeric: tabular-nums; } /* 卡片头右侧的一组动作。单个按钮直接放在 header 里即可；两个以上用它， 否则 `space-between` 会把它们分散到两端。 */ .card__actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } /* 卡片副标题一律**在标题下方另起一行**，不再被 `space-between` 推到卡片右端 （CR-20260813-02）。此前 22 个模板把 `.card__subtitle` 写成 `.card__title` 的 兄弟，于是「共 3 条」贴在最右、「按署名顺序……」这类整句说明也贴在最右， 与右侧的操作按钮抢同一个位置——同一个类在不同卡片里读起来是两种东西。 `flex-basis:100%` + `order:9` 让它无条件落到第二行并左对齐， 模板一个字都不用改，标题与操作按钮仍在第一行。 */ .card__subtitle { font-size: var(--fs-sm); color: var(--c-text-muted); font-weight: 400; flex: 1 1 100%; order: 9; min-width: 0; } /* 「标题下说明 + 表格」结构（CR-20260722-06 §十）：作为 .card 直接子元素的说明文字 （非 .card__header 内的副标题）曾贴卡片最左边（0 内边距），与下方紧凑表格首列不对齐。 统一给它复用紧凑表格单元格的水平内边距 var(--sp-3)，使左边起点与「稿件」列及稿件标题一致； 下方留 var(--sp-3) 与表头的垂直间距。仪表盘与全系统同构卡片一并生效。 */ .card > .card__subtitle { padding: 0 var(--sp-3) var(--sp-3); } .card__body { padding: var(--sp-5); } .card__body--flush { padding: 0; } .card__footer { padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--c-border); background: var(--c-surface-alt); border-radius: 0 0 var(--radius-lg) var(--radius-lg); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } /* --- 5. 统计卡 --------------------------------------------------------- */ /* 统计卡网格。 * * 上一版桌面端**固定 4 列**，因为当时八张卡一次铺开、4×2 正好两行。 * 本轮把指标卡按语气分成了两组（需要处理 / 业务规模），组内数量随权限 * 变化（管理员 5 张、员工 4 张），固定列数立刻退化成「4 + 1 个孤儿」。 * * 回到 `auto-fit`，但下限提到 212px：1440 下最多排 5 列， * 而 `auto-fit` 会把空轨道折叠掉——4 张就是 4 等列、5 张就是 5 等列， * 两种权限下都不会出现落单的那一张。 */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(212px, 100%), 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); } /* 指标卡（本轮重做外观）。 * * 此前是"一个标签 + 一个大数字"，八张一模一样地铺在仪表盘顶部： * 「客户 8」和「失败任务 4」占同样的分量，而这两件事的紧迫程度差着数量级。 * * 现在每张卡由三部分构成：**语气图标托**（中性/待办/告警三档）、标签、数值。 * 语气**不靠给数字染色**（那会变成一面彩色报警墙），而是靠图标托的底色—— * 一个 34px 的小方块，足够一眼分辨，又不会盖过内容。 * 数值仍然是卡片里最大的元素；`--warning` / `--danger` 只在**计数非零**时 * 由模板加到数值上，用于把"有 4 件事要处理"和"一件都没有"区分开。 * * 右上角的小箭头是**可点击性**的唯一提示：并非每张指标卡都是链接。 */ .stat { position: relative; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--sp-4); box-shadow: var(--shadow-xs); transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); display: block; } a.stat:hover { text-decoration: none; border-color: var(--c-border-strong); box-shadow: var(--shadow-sm); } a.stat:hover .stat__go { opacity: 1; color: var(--c-primary); transform: translateX(1px); } /* 常驻但很轻。做成"悬停才出现"曾经是候选方案，但那样静止状态下 完全看不出这张卡能点——指标卡里有一部分确实只是数字，不是链接。 */ .stat__go { position: absolute; top: var(--sp-4); right: var(--sp-4); width: 15px; height: 15px; color: var(--c-border-strong); opacity: .9; transition: opacity var(--transition), transform var(--transition), color var(--transition); } a.stat:focus-visible .stat__go { opacity: 1; color: var(--c-primary); } .stat__head { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; } .stat__tile { width: var(--tile); height: var(--tile); flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; background: var(--c-surface-sunken); color: var(--c-text-secondary); border: 1px solid var(--c-border); } .stat__tile .icon { width: 17px; height: 17px; } .stat--attention .stat__tile { background: var(--c-warning-soft); color: var(--c-warning); border-color: var(--c-warning-border); } .stat--critical .stat__tile { background: var(--c-danger-soft); color: var(--c-danger); border-color: var(--c-danger-border); } .stat--positive .stat__tile { background: var(--c-success-soft); color: var(--c-success); border-color: var(--c-success-border); } .stat--primary .stat__tile { background: var(--c-primary-soft); color: var(--c-primary); border-color: var(--c-primary-border); } .stat__label { font-size: var(--fs-sm); color: var(--c-text-secondary); display: flex; align-items: center; gap: var(--sp-2); min-width: 0; } .stat__value { font-size: 1.625rem; font-weight: 650; line-height: 1.15; margin-top: var(--sp-3); color: var(--c-text); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } /* 指标卡的三段文字共用**一个**左边界（CR-20260814-13）。 * * 此前标签被图标托推到 `--tile + --sp-3` 处，而数值与副文案回到卡片内边距—— * 一张卡里因此有两个左边界，读起来像台阶。实测偏差 **46px**（= 34 + 12）， * 1440/1280/375 三档、全部 5 张卡一致（`scripts/ui_geometry_audit.py`）。 * 用户看到的「数字没有相对图标对齐、有点歪」就是它。 * * 用同级选择器而不是 `:has()`：语义正好是「上面有那一行头部时，下面的文字跟着缩进」， * 而且没有头部（不带图标托）的指标卡自动不受影响，不需要另加修饰类。 */ .stat__head ~ .stat__value, .stat__head ~ .stat__meta { margin-inline-start: calc(var(--tile) + var(--sp-3)); } /* 数值后的单位（CNY、封、条）：与数字同一行但明显弱化， 避免「0.2988 CNY」读起来像一个 8 字符的数字。 */ .stat__unit { font-size: var(--fs-sm); font-weight: 500; color: var(--c-text-muted); margin-left: 4px; } /* 长数字兜底：统计卡的数值区绝不允许把卡片撑破。 */ .stat__value { overflow-wrap: anywhere; } .stat__value--danger { color: var(--c-danger); } .stat__value--warning { color: var(--c-warning); } .stat__value--success { color: var(--c-success); } .stat__meta { font-size: var(--fs-xs); color: var(--c-text-muted); margin-top: var(--sp-2); line-height: 1.5; } /* 内容区里的分组标签（「需要处理」/「业务规模」）。 比 h2 轻得多：它不是一个章节的标题，只是给下面这组卡片一个名字。 */ .section-label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; color: var(--c-text-muted); margin: 0 0 var(--sp-3); } .section-label + .stat-grid { margin-bottom: var(--sp-5); } /* --- 5a2. 量级带 ------------------------------------------------------ */ /* 背景量级（客户 / 稿件 / 进行中任务）。一条白底细带，内部用竖线分段， 每段是一个真链接。它的存在感必须明显低于指标卡——同一屏里， "有 4 个失败任务"和"一共有 8 个客户"不是一个量级的信息。 */ .tally { display: flex; flex-wrap: wrap; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); margin-bottom: var(--sp-5); overflow: hidden; } .tally__item { display: flex; align-items: center; gap: var(--sp-2); flex: 1 1 0; /* 三段均分整条，右侧不留一片没人认领的白 */ padding: var(--sp-3) var(--sp-5); color: var(--c-text-secondary); font-size: var(--fs-sm); min-width: 0; transition: background var(--transition); } .tally__item + .tally__item { border-left: 1px solid var(--c-border); } .tally__item:hover { background: var(--c-hover); text-decoration: none; color: var(--c-text); } .tally__icon { width: 15px; height: 15px; color: var(--c-text-muted); } .tally__label { min-width: 0; } .tally__value { font-size: var(--fs-md); font-weight: 650; color: var(--c-text); font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .tally__item { flex: 1 1 100%; } .tally__item + .tally__item { border-left: 0; border-top: 1px solid var(--c-border); } } /* --- 5a. 分布条 ------------------------------------------------------- */ /* 只有一种颜色、只有 3px 高：它要回答的是"哪一档更多"， 不是"每一档分别是什么状态"——状态语义已经由标签文字承担。 给七个状态各配一种颜色会把这张卡变成一面色卡（§10 禁止的方向）。 */ .dist { list-style: none; margin: 0; padding: 0; } .dist__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--sp-3); padding: var(--sp-2) 0; } .dist__item + .dist__item { border-top: 1px solid var(--c-border); } .dist__label { font-size: var(--fs-sm); color: var(--c-text-secondary); min-width: 0; } .dist__value { font-size: var(--fs-base); font-weight: 600; font-variant-numeric: tabular-nums; } .dist__track { grid-column: 1 / -1; height: 3px; margin-top: 5px; border-radius: 2px; background: var(--c-surface-sunken); overflow: hidden; } .dist__fill { display: block; height: 100%; background: var(--c-primary); opacity: .55; border-radius: 2px; } /* 分布下面的**集中趋势**一行（返修轮次的中位数，CR-20260815-03）。 * 与上面的桶不是同一种量：桶是分布，中位数是一个概括值。因此隔一道稍重的线 * 并去掉分布条——混在桶里它会被读成「第五个桶」。 * 复用 dist 的标签/数值排版，让它仍属于同一张卡的阅读体系。 */ .dist__aside { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--sp-3); margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 2px solid var(--c-border); } /* --- 5b. 操作卡（CR-20260814-01 / §5）--------------------------------- */ /* 本轮点名要消除的那个形状： * * 快捷入口 * ───────── * 选刊助手 * AI 拟题 * 邮箱同步状态 * * 三条浏览器默认蓝色链接叠在一张白卡里。它的问题不是"不好看"， * 是**没有把自己表达成一个可操作的东西**：没有图标、没有说明、 * 没有悬停面、命中区域只有那几个字宽，键盘焦点也只是一条下划线。 * * 操作卡把整块面变成一个 ``：图标托 + 标题 + 一行说明 + 右侧箭头。 * 整块可点、整块有悬停态、整块有焦点环。里面**不再嵌任何第二个交互元素** * （§13 的嵌套交互约束），说明文字只是文字。 */ .action-grid { display: grid; gap: var(--sp-2); } .action-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); } .action-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); } .action-card { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); color: var(--c-text); min-width: 0; transition: border-color var(--transition), background var(--transition), box-shadow var(--transition); } .action-card:hover { text-decoration: none; color: var(--c-text); border-color: var(--c-border-strong); background: var(--c-surface-alt); box-shadow: var(--shadow-xs); } .action-card:hover .action-card__tile { background: var(--c-primary-soft); color: var(--c-primary); border-color: var(--c-primary-border); } .action-card:hover .action-card__chevron { color: var(--c-primary); transform: translateX(2px); } .action-card:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; } .action-card__tile { width: var(--tile); height: var(--tile); flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; background: var(--c-surface-sunken); color: var(--c-text-secondary); border: 1px solid var(--c-border); transition: background var(--transition), color var(--transition), border-color var(--transition); } .action-card__tile .icon { width: 17px; height: 17px; } /* 标题与说明各占一行。用 flex 列而不是让两个 自然内联—— 内联时它们会排成「选刊助手 按稿件方向筛选候选期刊」一整行， 说明文字反而抢了标题的位置。 */ .action-card__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .action-card__title { font-size: var(--fs-base); font-weight: 550; line-height: 1.4; } .action-card__desc { font-size: var(--fs-xs); color: var(--c-text-muted); line-height: 1.5; margin-top: 1px; } .action-card__chevron { width: 16px; height: 16px; flex-shrink: 0; color: var(--c-border-strong); transition: color var(--transition), transform var(--transition); } /* 禁用态（有入口但当前用户不该用）不在这里做：没权限就不渲染， 界面上不留一个点不动的死链接。 */ /* --- 6. 表格 ----------------------------------------------------------- */ /* PaperOps 是高信息密度的业务软件，表格必须留着，不能把每行改成大卡片。 * 本轮做的是让它**看起来是被设计过的表格**而不是一张裸 ： * · 表头弱化（更小、更淡、字距略开），让数据行成为视觉主体； * · 单元格上下内边距略收，行高更稳； * · 主对象列（`.table__primary`）是唯一加粗的东西，其余是次要信息； * · 行悬停用极浅的中性面，不用蓝色——蓝色留给"可点击"，不表示"鼠标在这"。 */ /* 常见服务商推荐配置（CR-20260816-07 §35–§36）。 * * 硬约束：五项必须一次看全，卡片里**不得**出现任何内部滚动条。 * 因此这里刻意不用 `.table-wrap`（它带 `overflow-x:auto`）， * 也不设任何 `max-height`——卡片自然长高即可。 * 长主机名靠 `overflow-wrap` 换行，而不是把内容推出去产生横向滚动。 */ .provider-presets { list-style: none; margin: 0; padding: 0; } .provider-presets__item { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-border-subtle, var(--c-border)); min-width: 0; } .provider-presets__item:last-child { border-bottom: 0; } .provider-presets__name { flex: 0 0 auto; font-weight: 550; font-size: var(--fs-sm); } .provider-presets__conn { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; /* 长 host 换行，不横向溢出。 */ overflow-wrap: anywhere; word-break: break-word; text-align: right; } .provider-presets__apply { flex: 0 0 auto; white-space: nowrap; } .table-wrap { overflow-x: auto; } .table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); } .table th { text-align: left; padding: var(--sp-2) var(--sp-4); background: var(--c-surface-alt); border-bottom: 1px solid var(--c-border); font-weight: 550; font-size: var(--fs-xs); letter-spacing: 0.03em; color: var(--c-text-muted); white-space: nowrap; position: sticky; top: 0; z-index: 1; } .table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-border); /* 所有单元格**垂直居中**（CR-20260815-10 / 用户裁定「所有列的内容都应该垂直居中」）。 * * 此前是 `top`，理由是「两行的单元格要和同排其它列的第一行对齐」。 * 那个理由在表格普遍两三行高的时候成立；本轮把各列压成一行之后， * `top` 只剩下一个效果：偶尔出现的那个两行单元格，把同排所有内容 * 都吊在行的上半截。行内容居中之后，行高不管是 47 还是 110，看起来都是齐的。 */ vertical-align: middle; } /* 只装一个徽标的单元格**垂直居中**（CR-20260815-07 / 用户裁定）。 * * 表格整体是 `vertical-align: top`，这对「标题 + 摘要」这种两行内容是对的： * 它们要跟同一行其它列的第一行对齐。但一个孤零零的徽标顶格贴在两行高的 * 行里，看起来像是被挂在上边缘。徽标是这一格的**全部**内容， * 它的对齐基准应该是这一行，不是这一行的第一行文字。 * * 用 `:has()` 而不是给每张表的 `。 * 实测（1440 与 375 都一样）：clientWidth 44 / scrollWidth 60 —— 左右各 16px * 内边距 + 16px 勾选框 + 折叠后的空白文本节点，超出了这一列的 44px。 * 于是 `text-overflow: ellipsis` 生效，Chrome 给**被裁掉的行内内容**画了一个 * 省略号——用户看到的就是勾选框旁边那个莫名其妙的「...」。 * （同列的 ``。 * `overflow: hidden` 加在 `td` 上，被裁掉的却是里面那个 `div`—— * `text-overflow` 只对**自己发生溢出的那个块**生效，于是文字被齐刷刷切断， * 一个省略号都没有，看起来像数据丢了半截。 * * 因此内层的文字容器要一起带上。`white-space` 不在这里重设：它从 `td` 继承， * `.table__wrap` 一改，内外一起跟着改，不会出现「格子允许换行、里层还锁着一行」。 */ .table td > .table__primary, .table td > .table__sub, .table td > div, .table td > a { overflow: hidden; text-overflow: ellipsis; } .table td.table__wrap > .table__primary, .table td.table__wrap > .table__sub, .table td.table__wrap > div, .table td.table__wrap > a { overflow: visible; text-overflow: clip; } /* 固定布局里**清掉列的 min-width**（CR-20260816-03 / 用户裁定）。 * * `table-layout: fixed` 只保证按百分比分配**富余**——列上的 `min-width` * 仍然是硬下限，`table__col-code` 9.5em + `col-time` 7em + `col-name` 5em×2…… * 九列加起来超过容器，表格就顶着下限撑宽，最右边的「操作」列被推出可视区。 * 这正是用户截图里那一条：右侧半列被切掉，且切口上没有省略号。 * * 百分比预算已经替这些列各留了位置，下限在这里没有存在的必要。 */ .table--fixed th, .table--fixed td { min-width: 0; } /* 装着表单控件的单元格**不裁切**（CR-20260816-03）。 * * `overflow: hidden` 会连聚焦描边一起切掉——描边画在控件盒子外面， * 单元格一裁，键盘用户就看不出焦点在哪。作者表与权限表都是这种表。 * 这些格子里本来也没有会溢出的长文本，裁切对它们没有意义。 */ .table td:has(input, select, textarea, .form-select) { overflow: visible; } /* 只装徽标或按钮的单元格**不画省略号**（CR-20260816-03）。 * * 省略号的意思是「这里还有文字没显示出来」。一个徽标或一个按钮溢出一两个像素时 * 画出来的「…」不表达任何信息——它后面没有被截断的文字，只有控件的内边距。 * 实测长成「标记为已处理 …」，读起来像按钮名字还没写完。 * * 这些列的正解是**给够宽度**（上面各表的预算已按按钮实宽给）， * 这一条只负责兜住亚像素级的舍入误差。 * * 选择器只认**操作列与直接装着表单的格子**。第一版写成 `:has(> .badge, …)`， * 结果把「刊名 + SCI 徽标」「同步状态 + 失败原因」这种**既有徽标又有长文本**的 * 格子一并豁免了——那些格子的文字是真的被截断的，省略号必须留着。 */ .table td.table__actions, .table td.table__col-badge, .table td:has(> form) { text-overflow: clip; } /* 只装徽标的列（CR-20260816-03 / 用户裁定「有附件标签后为什么还要省略号」）。 * * 徽标是一个**整块**，它没有「后面还有几个字没显示出来」这回事—— * 溢出一两个像素时画出来的省略号纯属噪声，实测长成「有附件 …」。 * * 三件事一起做，缺一件都还会漏出来： * 1. 不画省略号（上面那条选择器）； * 2. 内边距从 16px 收到 8px——一个 3 字徽标实测 54px，两侧 16px 的内边距 * 等于要求这一列多给 32px，差不多是徽标本身的六成； * 3. 各表的列宽预算按**徽标实宽**给，不按字数猜。 * * 判据是「这一格里只有徽标、没有自己的文字」。既有徽标又有长文本的格子 * （刊名 + SCI、同步状态 + 失败原因）**不属于**这一类——那里的文字是真会被 * 截断的，省略号必须留着。第一版写成 `:has(> .badge)` 就是栽在这一点上。 */ .table th.table__col-badge, .table td.table__col-badge { text-align: center; padding-left: var(--sp-2); padding-right: var(--sp-2); } /* 名称类列**不折行**（CR-20260816-03 / 用户裁定，第 N 次提到同一类问题）。 * * 这一列装的是人名、账号、状态词——「管理员」被折成「管理」+「员」 * 是这轮验收截图里最刺眼的一处。短词折行没有任何收益：它不省空间 * （行高翻倍抵消了宽度节省），只让人多读一次。 * * 放不下时收省略号而不是折行，与标题类列同一条规则；完整值进 `title=`。 */ .table__col-name { min-width: 5em; } /* 客户名、负责人、发起人 */ .table th.table__col-name, .table td.table__col-name, .table__code, .table__num { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .table__col-code { min-width: 9.5em; white-space: nowrap; } /* C000001-M01-S01 与外部投稿编号 */ .table__col-status { min-width: 5em; white-space: nowrap; } /* 状态徽标 */ .table__col-time { min-width: 7em; white-space: nowrap; } /* Y-m-d H:i 与相对时长 */ /* ⛔ 试过让标题列 `width: 100%` 吸走全部富余，好让其余列各自贴合内容、 * 列距只剩内边距（CR-20260815-08）。**已回退**——它把不均匀集中到了一处： * 内容间距极差从 103px 涨到 364px（标题列很宽、内容很短，那一格空出一大片）。 * * 表格是 `width: 100%`，富余总得落到某处；落在哪儿，哪儿的间距就变大。 * 把富余**摊给所有列**（只写 `min-width`、宽度交给 auto 布局）反而让最大间距最小， * 是这几种做法里最均匀的。真正等距要求表宽等于内容宽，那样卡片右侧会空一条。 */ .table__col-title { min-width: 9em; } /* 稿件标题、邮件主题、期刊名 */ /* 表格**最后一列**贴合内容（CR-20260815-11 / 用户裁定「不得留过多留白空隙」）。 * * auto 布局把富余按内容需求摊给所有列，末列因此也分到一份——但它右边没有 * 下一列来「用掉」这份宽度，那份富余就变成表格右缘一条空白（客户页实测： * 「客户关系状态」列 166px，里面的徽标只有约 60px）。中间列的富余看不出来， * 末列的富余是直接看得见的一条白。 * * 只排除标题类列：末列如果是标题（少数详情页内嵌小表是这样），它本来就该吃宽度。 * 名称类列（负责人 / 发起人）曾一并排除，结果稿件、邮箱账户、后台任务三张表的 * 右内缩是 34–44px 而别的表是 16px。它们的 `min-width: 5em` 已经兜住下限， * 不需要再额外留一份富余。 * 用 `th` 上的类判断即可——同列的 `td` 由表格布局算法跟随。 */ /* ⚠️ 不适用于 `table--fixed`：那些表的列宽是逐列量过、加起来正好 100% 的预算， * 这条 (0,3,2) 的规则会把末列压回 1%，预算就不成立了（本轮实测：投稿任务的 * 「操作」列被压到 13px，按钮溢出 110px）。固定布局表自己说了算。 */ .table:not(.table--fixed) thead th:last-child:not(.table__col-title) { width: 1%; } /* 主要用于「操作」列：内容宽度即列宽，不参与剩余宽度分配。 */ .table__col-shrink { width: 1%; white-space: nowrap; } /* 内容很短的列**居中**（CR-20260815-12 / 用户裁定）。 * * 判据是「这一列装的是不是一小块东西」——徽标、计数、两三个字的分类词。 * 这类内容左对齐时，列宽一旦大于内容（表头比内容长时必然如此）， * 内容就贴在左边、右边空一条，一列列排下来像被推歪了。居中让它待在列的正中。 * * 长文本列**不适用**：标题、单位、邮件主题居中会让每一行的起始位置都不同， * 眼睛沿列往下扫时找不到一条对齐线，比留白难读得多。 * * ⚠️ 必须**同时**加在 ``**（CR-20260816-06 / §26 §27）。 * * 因此这里必须写 `td`，不能写 `th`——上面那些 `th:nth-child()` 规则在这张表上 * 一条都匹配不上，`table-layout: fixed` 于是把两列等分成 50/50： * 一个只装「成功 / 失败」短徽标的列白拿一半宽度，任务名被挤到提前截断， * 行右侧却是大片空白。 * * 现在文本列 `width: auto` 吃掉剩余空间（固定布局里这就是「minmax(0,1fr)」 * 的等价写法），状态列按徽标实际需要定宽。状态列仍是 `text-right`， * 定宽保证它逐行对齐，不会因为「已完成 / 排队中」字数不同而左右跳动。 */ .table--fixed-tasks td:nth-child(1) { width: auto; } .table--fixed-tasks td:nth-child(2) { width: 5.5rem; } /* 省略号要落在**真正溢出的那个盒子**上。这一格是 * ``， * 两个 div 是 `` 的子元素、不是 `
加类：全站十几张表都是这个形态， * 逐个加类必然漏。`:has()` 在本项目的目标浏览器上均已可用； * 万一不支持，退化成 `vertical-align: top`，即今天之前的样子——不会坏。 */ .table tbody tr:last-child td { border-bottom: 0; } .table tbody tr:hover { background: var(--c-hover); } /* 紧凑表只压**上下**，左右与普通表保持一致（CR-20260815-12 / 用户裁定 「最左侧和最右侧全部统一间距」）。此前左右也用 `--sp-3`，于是审计日志那张表 的首末列比别的表窄 4px——同一个系统里两种边距。 */ .table--compact th, .table--compact td { padding: var(--sp-2) var(--sp-4); } /* 七八列的业务列表给一个宽度下限（CR-20260814-01）。 * 1024 下不设下限时，浏览器会把每一列压到 min-content：稿件标题折成五行、 * 期刊折成三行，一屏八行没有两行等高——「有横向滚动」在这里反而是对的， * 因为 `.table-wrap` 已经把滚动关在自己这一块里，页面级仍然不滚。 */ .table--roomy { min-width: 860px; } /* 六列的版本（CR-20260814-06）。860px 是按投稿列表那种八九列定的，用在 期刊详情的「投稿记录」上会超出主栏约 46px——于是新加的「全程」列在 1440 上 一进来就被 `.table-wrap` 剪掉，要横向滚一下才看得到。720px 同样挡得住 375 下的 min-content 挤压，又能在带右栏的 1440 主栏里完整放下。 */ .table--roomy-sm { min-width: 720px; } /* 数字列右对齐（CR-20260815-06 修表头）。 * * ⚠️ **必须写成 `th.` / `td.` 限定符**。`.table th { text-align: left }` 的特异性是 * (0,1,1)，光写 `.table__num`（0,1,0）压不过它——于是 `` * 照旧左对齐，而单元格右对齐：表头在左、数字在右，眼睛要横向找才能把标题和 * 数字对上。全站 22 处数字列都是这个形状，验收时被点名。 * * 同一个坑本仓库已经踩过一次，`th.user-actions-cell` 那两行注释记的就是它。 * * **居中而不是右对齐**（用户裁定）。排版上右对齐更常见——它让个位数与两位数的 * 末位落在同一条竖线上，扫一列时能直接比大小。但本系统的计数列都是 1–2 位数 * （稿件数、投稿次数、候选数），量级差别一眼就看得出，不需要靠末位对齐； * 而右对齐会把数字推到列的右边缘、离表头更远。居中在这个数据规模下更整齐。 */ th.table__num, td.table__num { text-align: center; } /* 列宽收到内容宽度：计数列的内容是 1–2 位数，给它 `table__col-name` 那种 宽度会在数字和相邻列之间留下一大片空白（验收截图圈出的正是这个）。 `width: 1%` + `nowrap` 是表格布局里「按内容收窄」的标准写法。 */ /* ⛔ 这里曾是 `width: 1%`（CR-20260815-06），已删除（CR-20260815-08 / 用户裁定）。 * 计数列因此被压到内容宽度，富余全部流向相邻的文本列——客户页的「稿件」 * 数字被挤到很右边，与「研究方向」之间空出一大片，列间距忽宽忽窄。 * 让它和别的列一样参与宽度分配，数字在列内居中，列距就均匀了。 */ .table__num { font-variant-numeric: tabular-nums; white-space: nowrap; } .table__nowrap { white-space: nowrap; } /* 保留换行的自由文本（投稿要求摘要等）：录入时的分行是内容的一部分， 折成一整段会把「1. …2. …」这类清单挤成一行。 */ .text-pre-wrap { white-space: pre-wrap; } .table__primary { font-weight: 550; color: var(--c-text); } /* 内部编号列：等宽、弱化、不换行。它是标识符，不是内容。 */ .table__code { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-text-secondary); white-space: nowrap; } /* 次要文本列（客户、期刊、日期）统一弱化，避免整张表所有列同一个视觉权重。 */ .table__meta { font-size: var(--fs-sm); color: var(--c-text-secondary); } /* 列宽下限（CR-20260813-02）。 * * `table-layout: auto` 会把剩余宽度优先给内容最长的列，短列被压到 * min-content——中文在任意两字之间都可以断行，于是「演示客户·李明」 * 会断成「演示客 / 户·李明」，「员工一号」断成「员工一 / 号」。 * 这在排版上合法，但把一个专有名词拆成两行看起来就是没做完。 * * 解决办法不是禁止换行（那会把长客户名顶出表格），而是给这几类列一个 * **下限宽度**：够放下常见长度的名字，超长仍然正常换行。 * 下限用 em，跟随字号，不写死像素。 * * 这些类加在 上即可——同列的 由表格布局算法跟随。 */ /* ⚠️ 试过用百分比宽度做全站列宽再平衡（CR-20260815-07），**已回退**，别再试第二遍。 * * 做法是给固定形状的列 `width: 1%`、给标题列 `width: 22%~26%`。两个发现： * 1. auto 布局里 `width: 1%` 不是「按内容收缩」，是「占表宽 1%」——富余仍按 * 指定宽度成比例分配，「投稿编号」照样拿到 137px，和内部编号一模一样； * 2. 一旦给标题列指定百分比，同一张表里没写百分比的列（客户、发件人） * 会被压到 `min-width` 以下（实测客户列 74px→60px，人名折成两行）， * 结果是行更高、更难看。 * 真正有效的是**按内容选对列类**——见「投稿编号」改用 `table__col-shrink`。 * 只留 `min-width` 让 auto 布局自己算，是目前最稳的形态。 */ /* 表格单元格**默认不折行**（CR-20260816-03 / 用户裁定，同一类问题第四次提出）。 * * 前几轮是逐列加 `nowrap`：`table__col-center` 一批、`table__col-name` 一批…… * 结果必然是「有些地方做了有些地方没做」——每加一列就得记得再标一次。 * 与下拉搜索框那次是同一个教训：**判据要写进规则，不能靠逐处标注**。 * * 规则反过来定：单元格默认一行，放不下收省略号；**确实需要多行的**用 * `.table__wrap` 显式声明（目前只有邮件列表的「主题 / 摘要」与稿件的 * 「当前投稿」——它们一格里本来就装着两三条独立信息）。 * * 块级子元素（`.table__sub` 之类）不受影响：`nowrap` 管的是一行内的文字折行， * 两个 `
` 仍然各占一行。 */ .table th, .table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .table th.table__wrap, .table td.table__wrap { white-space: normal; overflow: visible; text-overflow: clip; } /* ⛔ 截断只对**文字**成立（CR-20260816-06 / §21–§24）。 * * 上面那条 `.table th, .table td` 是个**很宽的选择器**：它把 * `white-space:nowrap; overflow:hidden; text-overflow:ellipsis` 加到**每一个** * 单元格上，包括「里面只有一个勾选框、一个字都没有」的那种。 * * 邮件列表的全选表头就是这样一格：`
` 因为下面的规则拿到 `overflow: visible`，所以只有表头出现， * 这与用户截图里「只有最上面那一格有」完全吻合。） * * 判据回到 §23：省略号只能落在**真正的文本容器**上。只装控件的格子既没有文字 * 可省略，也不该因为差几个像素就把控件本身裁掉——那不是截断，是把控件弄坏。 * * 用 `:has()` 而不是给模板逐个加 class：这样**所有**表格（现在的和以后的） * 都自动受保护，不需要谁记得去标注。本文件已经在用 `:has()` * （`select:has(option[value=""]:checked)`），不是新引入的依赖。 */ .table th:has(> input[type="checkbox"]), .table td:has(> input[type="checkbox"]), .table th:has(> input[type="radio"]), .table td:has(> input[type="radio"]) { overflow: visible; text-overflow: clip; white-space: nowrap; /* 顺带把这一列真正放得下勾选框。 * * 原来的 44px 列宽里有 16+16 的左右内边距，内容区只剩 **12px**， * 而勾选框是 16px —— 也就是说这一格从一开始就装不下它自己的控件， * 这才是 scrollWidth(60) > clientWidth(44) 的来源。 * 把内边距收到 --sp-3（12px）后内容区有 20px，勾选框有余量， * 列的视觉宽度仍是 44px，表头与数据行的对齐一个像素没动。 */ width: 2.75rem; padding-left: var(--sp-3); padding-right: var(--sp-3); } /* 省略号必须落在**真正溢出的那个盒子**上（CR-20260816-03 / 用户裁定）。 * * 邮件列表的主题那一格是 `
…
` 与 `` 上。CSS 没有「列」选择器， * 只加一边会得到「表头居中、内容左对齐」这种更难看的结果。 * 加不上类的场合（徽标单元格）由下面那条 `:has()` 兜底， * 但它兜不到表头——所以能加类的地方一律加类。 */ .table th.table__col-center, .table td.table__col-center { text-align: center; /* 居中列按定义装的都是短内容，一律不换行。 居中之后列宽会收得更紧（`width: 1%` 的末列尤其）， 「未指派」这种三字词会被折成两行——用户验收点名。 */ white-space: nowrap; } /* ⛔ 这里曾有一条 `:has(> .badge:only-child)` 的兜底规则，**已删除**。 * 它只能命中 ``，`` 跟不过来——结构走查立刻报出 4 个页面 * 「表头左对齐、单元格居中」。差一半的对齐比不对齐更显眼。 * 结论：这件事没有纯 CSS 的做法，必须在模板里成对加类，`density_check.py` * 的表头/单元格对齐一致性检查就是守这一条的。 */ /* 固定列宽（CR-20260815-22 / 用户裁定「在确保整个视图能完整显示的前提下， * 尽可能塞下所有文字，实在塞不下才省略号」）。 * * ## 为什么必须是 `table-layout: fixed` * auto 布局下 `white-space: nowrap` 的单元格会把列撑到**全文宽度**： * 投稿任务表实测 1633px 塞在 1166px 容器里，横向溢出 467px。 * 溢出各由一列造成——「目标期刊」需要 447px、期刊库的「期刊」需要 638px， * 都是被一两个超长刊名拉出来的。 * * 试过在单元格上加 `max-width`（22% 与 0 都试了）：**两种都无效**。 * CSS 2.1 规定表格单元格的 width 类属性只是建议值，`max-width` 在 auto 布局里 * 被直接忽略（实测加了之后 1633px 一个像素没变）。 * `table-layout: fixed` 是唯一能让列真正收缩的机制。 * * ## 预算怎么定的 * 逐列量过「内容实际需要多宽」（scripts 见验证记录），再按需求分配， * 合计正好 100%。给得够的列**一个字都不会省**；只有被超长值撑爆的那一列 * 会收省略号——这正是「尽可能塞下，实在塞不下才省略」。 * * ## 为什么按表写死而不是给通用类 * 每张表的列数与内容分布都不同，一套通用百分比必然在别的表上出错—— * 本轮先试过通用值，结果稿件页与期刊库反而各溢出 56–77px。 * 固定布局的宽度预算**是每张表自己的事**，写在一起才看得出加起来是不是 100%。 */ .table--fixed { table-layout: fixed; } /* 投稿任务：9 列。溢出源是「目标期刊」（内容需 33%，给 20% 后收省略号）。 */ /* 合计 100%。定宽列（编号、状态、时间、操作）按实测**恰好够用**给， 富余全部留给三个省略号列——它们才是「尽可能塞下文字」的受益方。 */ .table--fixed-submissions th:nth-child(1) { width: 13%; } /* 任务编号：C000025-M05-S01，15 个等宽字符 */ .table--fixed-submissions th:nth-child(2) { width: 13%; } /* 稿件（省略号列） */ .table--fixed-submissions th:nth-child(3) { width: 9%; } /* 客户（省略号列） */ .table--fixed-submissions th:nth-child(4) { width: 11%; } /* 目标期刊（省略号列） */ .table--fixed-submissions th:nth-child(5) { width: 11.5%; } /* 状态：5 字徽标实测 78px */ .table--fixed-submissions th:nth-child(6) { width: 10.5%; } /* 投稿编号：DJAO-D-26-00311 */ .table--fixed-submissions th:nth-child(7) { width: 11%; } /* 负责人：「演示员工（只读）」 */ .table--fixed-submissions th:nth-child(8) { width: 10%; } /* 当前状态持续：「129 天 20 小时」 */ .table--fixed-submissions th:nth-child(9) { width: 11%; } /* 操作：按钮实测 111px */ /* 邮件列表：9 列。**定长列给 px，可伸缩列给百分比**（CR-20260816-03）。 * * 纯百分比预算在这张表上不成立：实测九列的需求合计 1520px，而 1280 视口下 * 只有 1006px。差额必须从某处让出来——问题是百分比**同时**压缩了 * 「能让」的列和「不能让」的列：收件时间被截成「2026-07-20 02…」， * 分钟数没了；而这是个定长字段，截断它是在丢信息，不是在省地方。 * * 因此按列的性质分两类： * - **定长**（勾选框、时间戳、两个徽标、按钮）：给 px，宽度就是实测需求； * - **可伸缩**（主题、发件人、来源邮箱）：给百分比，放不下收省略号。 * * 好处是宽屏下的富余**全部流向可伸缩列**：1680 视口下主题从 189px 涨到 389px， * 而收件时间始终是它需要的 142px——纯百分比方案会把富余平摊给时间列， * 让它拿到 204px 去显示一个只要 142px 的值。 */ /* 拟题记录（CR-20260817-02）。改动前实测：表格 3806px / 容器 1092px， * 「原始输入」独占 3161px——它的副行是研究对象，没有宽度约束就一路撑开， * 整张表必须横向拖动才看得全。 * * 定宽列按实测**恰好够用**给，富余全部留给「原始输入」这一个省略号列—— * 它才是「尽可能塞下文字」的受益方。省略号机制本身已经在 * `.table td > .table__primary / .table__sub` 上（CR-20260816-03）， * 这里补的是它唯一缺的那一半：**一个不会无限长大的宽度**。 * * ⚠️ 两套规则，因为列数随角色变化：Token 与轮次只对管理员渲染（ADR-057）。 * 共用一套 `nth-child` 会让员工侧的「发起人」拿到管理员侧「轮次」的宽度。 */ /* 列宽是**量出来的**，不是估的。第一版用 em 给，结果每一列都比内容窄 * （等级要 109px 只给了 78、发起人要 136px 只给了 78、创建时间要 142px 只给了 114）， * 于是表头自己被截成「候…」「轮…」「已完成 …」。下面的像素值取自 * 逐列 `scrollWidth` 实测（1440 视口，含表头与全部数据行的最大值）再留 4–6px 余量。 * * 只有「原始输入」是省略号列：它吃掉全部富余，其余列一律**完整显示**。 */ /* 管理员：8 列。定宽合计 694px，1280 视口下仍给「原始输入」留约 312px。 */ .table--fixed-topics-admin th:nth-child(1) { width: auto; } /* 原始输入（唯一的省略号列） */ .table--fixed-topics-admin th:nth-child(2) { width: 112px; } /* 等级：「科技核心」徽标实测 109 */ .table--fixed-topics-admin th:nth-child(3) { width: 100px; } /* 状态：「已完成」徽标实测 97 */ .table--fixed-topics-admin th:nth-child(4) { width: 60px; } /* 候选：表头「候选」实测 57 */ .table--fixed-topics-admin th:nth-child(5) { width: 76px; } /* Token：表头实测 72 */ .table--fixed-topics-admin th:nth-child(6) { width: 60px; } /* 轮次：表头实测 57 */ .table--fixed-topics-admin th:nth-child(7) { width: 140px; } /* 发起人：实测 136 */ .table--fixed-topics-admin th:nth-child(8) { width: 146px; } /* 创建时间：Y-m-d H:i 实测 142 */ /* 员工：6 列（无 Token / 轮次）。定宽合计 558px。 */ .table--fixed-topics th:nth-child(1) { width: auto; } .table--fixed-topics th:nth-child(2) { width: 112px; } .table--fixed-topics th:nth-child(3) { width: 100px; } .table--fixed-topics th:nth-child(4) { width: 60px; } .table--fixed-topics th:nth-child(5) { width: 140px; } .table--fixed-topics th:nth-child(6) { width: 146px; } /* 省略号**只给第一列**。其余列已按实测宽度给足，不该出现截断—— * 把 nowrap 加到整表会让徽标列与计数列也变成「已完成 …」那种样子， * 而那正是用户指出来的问题。 */ .table--fixed-topics td:first-child .table__sub, .table--fixed-topics-admin td:first-child .table__sub, .table--fixed-topics td:first-child .table__primary, .table--fixed-topics-admin td:first-child .table__primary { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 列宽按 `data-col` 指定，**不按 nth-child**（CR-20260819-08，同 * `.table--fixed-review` 已定的模式，CR-20260816-07 §42）。 * * 勾选列（select）与操作列（actions）都是按 `module_perms.mail.write` 条件 * 渲染的。用 `th:nth-child(N)` 定宽时，没有写权限的人看到的每一列都会往左 * 错一位：主题/摘要拿到本该属于勾选框的 44px 宽度，最左侧于是出现一条又窄 * 又空的列——用户报的「最左侧明显空白列」就是这个，只是这次出现在「邮件 * 列表」而不是「待办邮件」。按名字定宽之后，少一列不会让其余各列错位。 */ .table--fixed-maillist th[data-col="select"] { width: 44px; } /* 勾选框 */ .table--fixed-maillist th[data-col="subject"] { width: 50%; } /* 主题 / 摘要（可伸缩） */ .table--fixed-maillist th[data-col="sender"] { width: 26%; } /* 发件人（可伸缩） */ .table--fixed-maillist th[data-col="source"] { width: 24%; } /* 来源邮箱 / 原文件夹（可伸缩） */ .table--fixed-maillist th[data-col="time"] { width: 142px; } /* 收件时间：Y-m-d H:i 实测 */ .table--fixed-maillist th[data-col="attachment"] { width: 86px; } /* 附件：3 字徽标 54 + 内边距 */ .table--fixed-maillist th[data-col="status"] { width: 86px; } /* 处理状态：同上 */ .table--fixed-maillist th[data-col="submission"] { width: 122px; } /* 匹配的投稿任务：5 字徽标 78 + 内边距 */ .table--fixed-maillist th[data-col="actions"] { width: 150px; } /* 操作：按钮实测 130 + 内边距 */ /* 后台任务：7 列。溢出源是「任务」那一列的长名字。 */ .table--fixed-tasks th:nth-child(1) { width: 30%; } /* 任务 */ .table--fixed-tasks th:nth-child(2) { width: 11%; } /* 队列 */ .table--fixed-tasks th:nth-child(3) { width: 13%; } /* 状态 */ .table--fixed-tasks th:nth-child(4) { width: 9%; } /* 耗时 */ .table--fixed-tasks th:nth-child(5) { width: 11%; } /* 执行次数 */ .table--fixed-tasks th:nth-child(6) { width: 15%; } /* 创建时间 */ .table--fixed-tasks th:nth-child(7) { width: 11%; } /* 发起人 */ /* 稿件列表：7 列。 */ .table--fixed-manuscripts th:nth-child(1) { width: 11%; } /* 编号 */ .table--fixed-manuscripts th:nth-child(2) { width: 27%; } /* 标题 */ .table--fixed-manuscripts th:nth-child(3) { width: 14%; } /* 客户 */ .table--fixed-manuscripts th:nth-child(4) { width: 11%; } /* 业务状态 */ .table--fixed-manuscripts th:nth-child(5) { width: 16%; } /* 当前投稿 */ .table--fixed-manuscripts th:nth-child(6) { width: 9%; } /* 投稿次数 */ .table--fixed-manuscripts th:nth-child(7) { width: 12%; } /* 负责人 */ /* 稿件详情页的「投稿任务」卡：6 列，容器只有半幅宽。 */ .table--fixed-mssubs th:nth-child(1) { width: 19%; } /* 任务编号 */ .table--fixed-mssubs th:nth-child(2) { width: 27%; } /* 期刊 */ .table--fixed-mssubs th:nth-child(3) { width: 16%; } /* 投稿编号 */ .table--fixed-mssubs th:nth-child(4) { width: 13%; } /* 投稿日期 */ .table--fixed-mssubs th:nth-child(5) { width: 14%; } /* 状态 */ .table--fixed-mssubs th:nth-child(6) { width: 11%; } /* 负责人 */ /* 稿件详情页的「作者」表：5 列。 */ .table--fixed-authors th:nth-child(1) { width: 9%; } /* 顺序 */ .table--fixed-authors th:nth-child(2) { width: 20%; } /* 姓名 */ .table--fixed-authors th:nth-child(3) { width: 33%; } /* 单位 */ .table--fixed-authors th:nth-child(4) { width: 16%; } /* 署名角色 */ .table--fixed-authors th:nth-child(5) { width: 22%; } /* 备注 */ /* 待确认邮件：7 列。 */ /* 待确认队列：列宽按**列名**指定，不按位置（CR-20260816-07 §42）。 * * 勾选列只对有批量确认权限的人渲染。用 `nth-child` 定宽时，没有该权限的人 * 看到的每一列都往左错一位——「邮件」拿到本该属于勾选框的 4%， * 最左侧于是出现一条又窄又空的列。那不是多了一列，是所有列都错位了。 * * 用 `data-col` 之后，少一列不影响其余各列。剩余 4% 由表格按比例分摊。 */ .table--fixed-review th[data-col="select"] { width: 4%; } .table--fixed-review th[data-col="mail"] { width: 26%; } .table--fixed-review th[data-col="object"] { width: 20%; } .table--fixed-review th[data-col="status"] { width: 12%; } .table--fixed-review th[data-col="confidence"] { width: 9%; } .table--fixed-review th[data-col="basis"] { width: 17%; } .table--fixed-review th[data-col="time"] { width: 12%; } /* 邮箱账户：8 列。 */ .table--fixed-mailboxes th:nth-child(1) { width: 15%; } /* 名称 */ .table--fixed-mailboxes th:nth-child(2) { width: 17%; } /* 邮箱地址 */ .table--fixed-mailboxes th:nth-child(3) { width: 10%; } /* 服务商 */ .table--fixed-mailboxes th:nth-child(4) { width: 14%; } /* 同步状态：徽标 + 失败原因副行 */ .table--fixed-mailboxes th:nth-child(5) { width: 11%; } /* 同步文件夹 */ .table--fixed-mailboxes th:nth-child(6) { width: 14%; } /* 最近成功同步 */ .table--fixed-mailboxes th:nth-child(7) { width: 9%; } /* 累计邮件 */ .table--fixed-mailboxes th:nth-child(8) { width: 10%; } /* 负责人 */ /* 审计日志：7 列。 */ .table--fixed-audit th:nth-child(1) { width: 14%; } /* 时间 */ .table--fixed-audit th:nth-child(2) { width: 12%; } /* 操作者 */ .table--fixed-audit th:nth-child(3) { width: 15%; } /* 动作 */ .table--fixed-audit th:nth-child(4) { width: 29%; } /* 摘要 */ .table--fixed-audit th:nth-child(5) { width: 14%; } /* 实体 */ .table--fixed-audit th:nth-child(6) { width: 8%; } /* 级别 */ .table--fixed-audit th:nth-child(7) { width: 8%; } /* 结果 */ /* 仪表盘的三张小表：各 4 列，容器只有三分之一屏宽。 */ .table--fixed-mini th:nth-child(1) { width: 40%; } .table--fixed-mini th:nth-child(2) { width: 22%; } .table--fixed-mini th:nth-child(3) { width: 20%; } .table--fixed-mini th:nth-child(4) { width: 18%; } /* 仪表盘「最近后台任务」：两列，且**没有 `
…
…
` 的直接子元素，所以上面那条 * `.table td > div` 够不着它们——不补这条，文字只会被硬切，一个省略号都没有。 * 判据仍是像素：放得下就整条显示，`scrollWidth > clientWidth` 时才出现省略号。 */ .table--fixed-tasks td > a > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 邮件「已自动应用」：5 列。 */ /* 无法匹配队列：6 列（CR-20260816-07 §40，与另外两个标签页统一为定宽表）。 */ .table--fixed-mailunmatched th[data-col="mail"] { width: 32%; } .table--fixed-mailunmatched th[data-col="mailbox"] { width: 18%; } .table--fixed-mailunmatched th[data-col="reason"] { width: 18%; } .table--fixed-mailunmatched th[data-col="received"] { width: 14%; } .table--fixed-mailunmatched th[data-col="waited"] { width: 9%; } .table--fixed-mailunmatched th[data-col="state"] { width: 9%; } .table--fixed-mailauto th:nth-child(1) { width: 30%; } /* 主题 */ .table--fixed-mailauto th:nth-child(2) { width: 18%; } /* 发件人 */ .table--fixed-mailauto th:nth-child(3) { width: 17%; } /* 来源邮箱 */ .table--fixed-mailauto th:nth-child(4) { width: 15%; } /* 收件时间 */ .table--fixed-mailauto th:nth-child(5) { width: 20%; } /* 匹配的投稿任务 */ /* 期刊库：9 列。溢出源是「期刊」（内容需 52%，给 30% 后收省略号）。 */ .table--fixed-journals th:nth-child(1) { width: 29%; } /* 期刊（省略号列） */ .table--fixed-journals th:nth-child(2) { width: 9%; } /* ISSN */ .table--fixed-journals th:nth-child(3) { width: 14%; } /* 出版社（省略号列） */ .table--fixed-journals th:nth-child(4) { width: 15%; } /* 投稿系统 */ .table--fixed-journals th:nth-child(5), .table--fixed-journals th:nth-child(6), .table--fixed-journals th:nth-child(7), .table--fixed-journals th:nth-child(8) { width: 5%; } /* 四个计数列 */ .table--fixed-journals th:nth-child(9) { width: 13%; } /* 最近投稿：Y-m-d 需 91px 富余 */ /* 单元格**强制一行 + 省略号**（CR-20260815-07 / 用户裁定「都需要改成一行的高度」）。 * * 为什么不是调列宽：投稿任务表有 9 列，1440px 下每列约 130px。 * 「含高比例新能源电网的示例调度策略」这类标题需要 ~240px， * 无论怎么分配都会折行——列宽能解决的是「本来放得下却折了」， * 解决不了「本来就放不下」。行高要恒定，就只能截断。 * * 完整内容进 `title=`，鼠标悬停可读；点进详情页永远是全文。 * `min-width: 0` 是必需的：表格单元格的默认 min-width 是 auto， * 不清零的话 `text-overflow` 不会触发，单元格会把整张表撑宽。 */ .table__ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ⚠️ 两条都别再试（各踩过一次）： * 1. **不要加 `max-width: 0`**。它在 auto 布局里把整列压到 min-width—— * 实测投稿任务表的「客户」只剩「演示...」四个字符，比折行还难用。 * 2. **不要在模板里用 `truncatechars` 兜底**。那是按**字符数**截，不看实际 * 放不放得下：期刊库列表右边明明空着一大片，「Cambridge Uni...」却已经 * 截断了（用户验收点名）。 * * 正确的形态是**只靠这条 CSS**：表格是 `width: 100%`，各列按内容分配； * 内容总宽超过表宽时浏览器才压缩列，这些格子于是收省略号。 * 也就是说——**放得下就全显示，放不下才省略**，判据是像素不是字数。 * 完整值仍在 `title=` 里，点进详情页永远是全文。 */ /* 列表主对象的真链接（CR-20260813-01）。 在此之前，客户/稿件/投稿/邮箱/拟题记录等列表的行只有 `tr[data-href]` + JS 点击： 键盘用户进不了任何详情页，鼠标用户也无法中键或 Ctrl+点击开新标签页， 浏览器状态栏更不会显示目标地址。现在每一行的主对象都是一个真正的 ， 整行点击退回为**渐进增强**（`paperops.js` 的 row-click 会跳过 a/button/input 等， 所以操作列里的按钮不会误触发导航）。 视觉保持原样：继承单元格颜色、不加下划线，只在悬停/聚焦时给出反馈。 */ .row-link { color: inherit; text-decoration: none; } .row-link:hover { text-decoration: underline; } .row-link:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: 2px; } .table__sub { font-size: var(--fs-xs); color: var(--c-text-muted); margin-top: 2px; } /* 操作列同理：不加 `th.` 限定符，表头会留在左边而按钮靠右（同上一段的原因）。 */ /* 「操作」列**居中**（CR-20260816-03 / 用户裁定）。 * * 此前是右对齐——那是为**贴着表格右边缘的窄列**定的：列宽 1%， * 按钮紧靠右边框，右对齐正好。现在各表都走固定列宽预算， * 「操作」是一列有固定份额的普通列，右对齐会把按钮甩到列的边上， * 表头与按钮各偏一边（用户截图里就是这样）。 * * 顺带把用户管理页那条 `.user-actions-cell` 的特例并了回来： * 它当初正是为了在这一列做居中而单开的局部类。 */ th.table__actions, td.table__actions { text-align: center; } .table__actions { white-space: nowrap; } /* 操作列的左右内边距收窄：这一格里只有按钮，按钮自己带内边距， * 单元格再补一份就等于让按钮凭空多占 28px——在 1280 宽下正是这 28px * 把「标记为已处理」挤断的。 */ .table td.table__actions { padding-left: var(--sp-2); padding-right: var(--sp-2); } /* 用户管理「操作」列严格居中（CR-20260722-06 §十一）：单元 text-align:center 使表头 与内容居中；按钮组 width:100% 铺满单元后再用 Flex 居中，保证单/双按钮的中心都与 列中心对齐（偏差 ≤8px）。局部语义类，不动共享的 .table__actions（右对齐）。 */ /* 用 th./td. 限定符把特异性提到 (0,1,1)，压过 `.table th{text-align:left}`，使表头也居中。 */ th.user-actions-cell, td.user-actions-cell { text-align: center; } .user-actions-group { width: 100%; display: flex; justify-content: center; align-items: center; gap: var(--sp-2); /* `flex-wrap: wrap` 改成 `nowrap`（CR-20260815-08 / 用户裁定 * 「最后一栏那个按钮不要占两行」）：两个 `btn--sm` 换行会让整行高一倍， * 而这一列的内容是固定的两个短按钮，本来就不需要换行能力。 * 列宽由 `table__col-shrink` 那类规则保证够放——放不下时宁可整表横向滚动， * 也不要让**每一行**都为最宽的那一行付出双倍高度。 */ flex-wrap: nowrap; white-space: nowrap; } /* 详情页的「标签 : 值」清单——全站每个详情页的主要信息载体。 * * 列宽此前是 `max-content 1fr`，两处都有问题： * · `max-content` 无上限，一个长标签（如「四档规则数（PKU/CSTPCD/SCI/EI）」） * 会把标签列撑到容器的一大半，值列只剩百来像素； * · `1fr` 展开是 `minmax(auto, 1fr)`，那个 auto 下限等于内容的 min-content， * 于是一串 64 位 SHA 会把整个网格顶得比容器还宽——中文核心资产页在 375 * 下 scrollWidth 415 > 375 就是这么来的（本轮实测）。 * * `fit-content(34%)` 给标签列一个上限：短标签照常收缩，长标签最多占 34%。 * 值列用 `minmax(0, 1fr)` 明确允许收缩到内容宽度以下，配合 dd 的换行规则， * 长哈希在列内折行而不是撑破页面。 */ /* --- 6b. 分组行与批量操作条（CR-20260813-02 / ADR-095）----------------- */ /* 待确认队列里「同投稿 + 同结论」的一组邮件，用一条浅色分隔行标出边界。 不是又一种卡片，也不做折叠——这一页的重点是逐条核对， 折叠会让人在没看内容的情况下整组确认。 */ .group-row td { background: var(--c-surface-sunken); padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--c-border); } .table tbody tr.group-row:hover td { background: var(--c-surface-sunken); } .group-row__body { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } /* 表格里的勾选框：整格可点，命中区域不止 16px 见方。 */ .row-check { display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 2px; } .row-check input[type="checkbox"] { width: 16px; height: 16px; min-height: 0; padding: 0; margin: 0; accent-color: var(--c-primary); cursor: pointer; } /* 批量操作条。贴在视口底部而不是页面底部：长队列翻到一半时它仍在手边。 没有勾选任何一项时整条隐藏（`.hidden`），不留一条「已选 0 项」的空条。 */ .bulk-bar { position: sticky; bottom: var(--sp-4); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-5); background: var(--c-surface); border: 1px solid var(--c-border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); z-index: 20; } .bulk-bar__count { font-size: var(--fs-base); font-weight: 550; } .bulk-bar__hint { min-width: 0; } @media (max-width: 640px) { .bulk-bar { flex-direction: column; align-items: stretch; } .bulk-bar .btn { width: 100%; } } .definition-list { display: grid; grid-template-columns: fit-content(34%) minmax(0, 1fr); gap: var(--sp-3) var(--sp-5); } .definition-list dt { color: var(--c-text-muted); font-size: var(--fs-sm); } .definition-list dd { margin: 0; min-width: 0; word-break: break-word; overflow-wrap: anywhere; } /* 详情页右栏的信息清单：行与行之间一条极浅的分隔，逐行扫的时候 眼睛有落点。不加边框、不做成表格——它是元信息，不是数据。 */ /* 列间距改用 dt 的右内边距，而不是 grid 的 column-gap： 分隔线画在 dt 与 dd 各自的上边框上，中间一留 gap，线就断成两截， 看起来像没画完。间距换成内边距之后两段边框首尾相接，是一条连续的线。 （`gap: 0` 也不行——那会让标签和值贴成「研究方向材料科学」。） */ .definition-list--rows { row-gap: 0; column-gap: 0; } .definition-list--rows > dt, .definition-list--rows > dd { padding: 7px 0; border-top: 1px solid var(--c-border); } .definition-list--rows > dt { padding-right: var(--sp-5); } .definition-list--rows > dt:first-of-type, .definition-list--rows > dt:first-of-type + dd { border-top: 0; padding-top: 0; } .definition-list--rows > dd:last-child { padding-bottom: 0; } /* --- 6c. 详情页分区（CR-20260814-01 / §6）----------------------------- */ /* 「不要把所有东西都做成卡片」的落地形态。 * * 详情页此前是一列白卡片，每张卡片都有边框、圆角、阴影、标题和横线—— * 一屏五个同样的白框套在同一个白框感的页面里，section 之间的层级为零。 * * `.detail-section` 是**平的**：一个小标题 + 内容，靠一条上边线与间距 * 与前一段分开。真正需要边界的内容（表格、可编辑区、高危区）才继续用卡片。 */ .detail-section + .detail-section { margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--c-border); } .detail-section__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); } .detail-section__title { font-size: var(--fs-base); font-weight: 600; display: flex; align-items: center; gap: var(--sp-2); min-width: 0; } .detail-section__desc { font-size: var(--fs-xs); color: var(--c-text-muted); flex: 1 1 100%; margin-top: -2px; } /* 窄屏折成单列：两列在 ~280px 的内容区里谁都放不下。 标签变小号弱化文字压在值上方，读起来仍是「标签 → 值」。 */ @media (max-width: 640px) { .definition-list { grid-template-columns: minmax(0, 1fr); gap: 0; } .definition-list dt { font-size: var(--fs-xs); color: var(--c-text-muted); margin-top: var(--sp-3); } .definition-list dt:first-child { margin-top: 0; } .definition-list dd { margin-top: 2px; } } /* --- 7. 徽章与状态 ----------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 20px; font-size: var(--fs-xs); font-weight: 550; line-height: 18px; white-space: nowrap; border: 1px solid transparent; } .badge--neutral { background: var(--c-neutral-soft); color: var(--c-text-secondary); border-color: var(--c-neutral-border); } .badge--primary { background: var(--c-primary-soft); color: var(--c-primary); border-color: var(--c-primary-border); } .badge--success { background: var(--c-success-soft); color: var(--c-success); border-color: var(--c-success-border); } .badge--warning { background: var(--c-warning-soft); color: var(--c-warning); border-color: var(--c-warning-border); } .badge--danger { background: var(--c-danger-soft); color: var(--c-danger); border-color: var(--c-danger-border); } .badge--info { background: var(--c-info-soft); color: var(--c-info); border-color: var(--c-info-border); } /* 小号徽章，与 .btn--sm 同一档字号。表格与详情页里徽章挨着正文时用， 默认尺寸会把行高顶高一截。 */ .badge--sm { padding: 0 6px; font-size: 11px; line-height: 16px; } .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .dot--success { background: var(--c-success); } .dot--warning { background: var(--c-warning); } .dot--danger { background: var(--c-danger); } .dot--neutral { background: var(--c-text-muted); } .dot--primary { background: var(--c-primary); } /* `status_badge_class` 会返回 info（已投稿、修回已提交、执行中……）， 而这里此前没有对应的圆点，于是客户详情的「已接单」独独没有点。 */ .dot--info { background: var(--c-info); } /* --- 8. 按钮 ----------------------------------------------------------- */ /* 五档，用途不重叠（§4）： * .btn--primary 这一页的目的，每页至多一个 * .btn 会改数据的次要动作 * .btn--quiet 行内、卡片头、表格里的低权重动作（无边框，悬停才显形） * .btn--danger-soft 高危 * .btn--danger 已经过确认、这一下就是最终执行 * * 描边比上一版浅一档（`--c-border` 而不是 `--c-border-strong`）： * 一排次要按钮不该像一排边框。悬停时才把描边加深，这是"这个能点"的反馈。 */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; /* 高度钉在 token 上（CR-20260814-13）。今天与内边距+行高算出来的值相等， 所以视觉上一个像素都不变；意义在于让「控件多高」成为一个可被其它组件 引用的显式取值——页头动作区的居中偏移就是靠它算出来的。 */ min-height: var(--control-h); padding: 0.36rem 0.8rem; border-radius: var(--radius); border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); font-family: inherit; font-size: var(--fs-base); font-weight: 500; line-height: 1.5; cursor: pointer; transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), color var(--transition); white-space: nowrap; text-decoration: none; box-shadow: var(--shadow-xs); } .btn:hover { background: var(--c-hover); border-color: var(--c-border-strong); text-decoration: none; color: var(--c-text); } .btn:active { transform: translateY(0.5px); } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; box-shadow: none; } /* 按钮里的图标跟随字号缩放，并且**光学**上比文字略小一点点， 否则 16px 的描边图标配 14px 的中文会显得图标在往外顶。 */ .btn .icon { width: 15px; height: 15px; flex-shrink: 0; opacity: .85; } .btn--sm .icon { width: 14px; height: 14px; } .btn--primary { background: var(--c-primary); border-color: var(--c-primary); color: #fff; box-shadow: 0 1px 2px rgba(37, 99, 235, 0.24); } .btn--primary:hover { background: var(--c-primary-hover); border-color: var(--c-primary-hover); color: #fff; } .btn--primary .icon { opacity: 1; } .btn--danger { background: var(--c-danger); border-color: var(--c-danger); color: #fff; } .btn--danger:hover { background: #991b1b; border-color: #991b1b; color: #fff; } /* 低权重动作。表格行里一排"编辑 / 更新状态 / 重新尝试"用它—— 八行八个描边按钮会让整列看起来像一条控件带，而那一列并不是页面的重点。 */ .btn--quiet { background: transparent; border-color: transparent; box-shadow: none; color: var(--c-text-secondary); font-weight: 500; } .btn--quiet:hover { background: var(--c-surface-sunken); border-color: var(--c-border); color: var(--c-text); } .btn--quiet .icon { opacity: .7; } .btn--quiet:hover .icon { opacity: .95; } /* 纯图标按钮：必须自带 aria-label 或 .sr-only 文字，图标不承担语义。 */ .btn--icon { padding: 0.3rem; } .btn--icon .icon { width: 16px; height: 16px; } /* 高危动作的默认形态（CR-20260813-02 / §7.10）。 实心红是**页面上最响的一个元素**——把它放进详情页右栏，等于让「删除客户」 比「保存」还醒目。这里用红字 + 红边 + 白底：语义仍然是红色，但视觉层级 落在 primary 之下。实心 `.btn--danger` 保留给「已经输入确认串、这一下就是 最终执行」的场合。 */ .btn--danger-soft { background: var(--c-surface); border-color: var(--c-danger-border); color: var(--c-danger); } .btn--danger-soft:hover { background: var(--c-danger-soft); border-color: var(--c-danger); color: var(--c-danger); } /* 幽灵按钮（CR-20260814-02 §五）：完全透明 + 无边框的关闭态，与旁边的 纯文本无法区分——「清除筛选」在投稿列表上就是一段看不出能点的文字。 现在关闭态带一条极淡的边框：仍然比 `.btn--quiet` 轻，但**看得出是个按钮**。 */ .btn--ghost { background: transparent; border-color: var(--c-border); box-shadow: none; color: var(--c-text-secondary); } .btn--ghost:hover { background: var(--c-surface-sunken); border-color: var(--c-border-strong); color: var(--c-text); } .btn--sm { min-height: var(--btn-h-sm); padding: 0.18rem 0.55rem; font-size: var(--fs-sm); gap: 5px; } .btn--lg { padding: 0.5rem 1.2rem; font-size: var(--fs-md); } .btn--block { width: 100%; } .btn-group { display: inline-flex; gap: var(--sp-2); flex-wrap: wrap; } /* --- 8b. 分段控件（CR-20260814-01 / §8）------------------------------- */ /* 同一批数据的几个互斥视图（置信度 全部/较高/较低、范围 进行中/未开始/全部）。 * 此前每个页面各写各的：有的是三个并排的 `.btn`，有的是一个下拉框， * 有的是三条蓝字——同一种语义在三个页面长成三个样子。 * * 统一成一条分段控件：一个沉底槽，选中项是槽里抬起的那一格。 * 每一格都是真 ``（各自是独立 URL，可收藏可后退），不是 JS 切页。 */ .segmented { display: inline-flex; align-items: center; padding: 2px; gap: 2px; background: var(--c-surface-sunken); border: 1px solid var(--c-border); border-radius: var(--radius); flex-wrap: wrap; } .segmented__item { display: inline-flex; align-items: center; justify-content: center; gap: 5px; /* 这个类同时挂在 `` 和 `