/* 周报页专属样式（v1.9 M2）。颜色一律走 app.css 的 CSS 变量， 仅规则芯片按设计稿使用固定明暗双色（不随主题变量）。 */ .weekly-page { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; } :root { --wk-up: #16a34a; --wk-panel-w: 280px; } :root[data-theme="dark"] { --wk-up: #4ade80; } /* ---------- 顶栏 ---------- */ /* padding-right 给右上角那**两颗**固定浮标让位 —— 帮助按钮（.hlp-fab，help.js 注入）与 主题切换按钮（.thm-fab，theme.js 注入），否则它们会压住本页顶栏右侧的 `.wk-user`。 ⚠️ 2026-08-31 由 58 加宽到 100（主题按钮从顶栏搬出去做成第二颗浮标）； 算法见 app.css 的 `.top-bar, .reader-bar` 上方注释。 */ .wk-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 100px 10px 18px; border-bottom: 1px solid var(--border); background: var(--panel); flex-shrink: 0; } .wk-logo { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px; } .wk-logo img { width: 22px; height: 22px; } .wk-logo span { color: var(--accent); } .wk-header-right { display: flex; align-items: center; gap: 10px; } .wk-user { font-size: 13px; color: var(--muted); } .wk-hint { padding: 40px; text-align: center; color: var(--muted); } .wk-hint a { color: var(--accent); margin-left: 8px; } /* ---------- 布局：主内容 + 右侧批注栏 ---------- */ .weekly-layout { flex: 1; display: flex; min-height: 0; position: relative; } .weekly-main { flex: 1; min-width: 0; overflow-y: auto; padding: 18px 22px 60px; } /* ---------- 周次选择器 ---------- */ .week-selector { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .week-selector select { padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); max-width: 240px; } .week-prev, .week-next { padding: 5px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); font-size: 16px; line-height: 1.2; } .week-prev:disabled, .week-next:disabled { opacity: .35; cursor: default; } .week-prev:not(:disabled):hover, .week-next:not(:disabled):hover { background: var(--hover); } .week-range { font-size: 13px; color: var(--muted); } .push-time { font-size: 12px; color: var(--muted); } /* A4：周级批注入口挪到选择器行右端，窄屏 flex-wrap 时自然换行 */ .week-note-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; } /* ---------- KPI 总览行 ---------- */ .kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; } .kpi-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 13px 16px 10px; box-shadow: 0 2px 8px var(--shadow); } .kpi-label { font-size: 12px; color: var(--muted); margin-bottom: 4px; } .kpi-value-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .kpi-value { font-size: 21px; font-weight: 700; } .kpi-wow { font-size: 12px; font-weight: 600; } .kpi-wow.up { color: var(--wk-up); } .kpi-wow.down { color: var(--danger); } .kpi-wow.flat { color: var(--muted); } .kpi-spark { margin-top: 6px; } .kpi-spark svg { display: block; width: 100%; height: 28px; } /* ---------- 趋势模块 ---------- */ .trend-module { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 20px; } .trend-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .seg-tabs { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .seg-tabs button { padding: 5px 13px; font-size: 13px; color: var(--muted); border-right: 1px solid var(--border); } .seg-tabs button:last-child { border-right: none; } .seg-tabs button:hover { background: var(--hover); } .seg-tabs button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .seg-tabs button:disabled { opacity: .4; cursor: default; } .seg-tabs button:disabled:hover { background: transparent; } /* 批 D：多指标模式下 metric-tabs 变多选。勾选位常驻（仅隐藏可见性）， 否则每次勾/取消按钮宽度都会跳一下，整条切换条跟着抖 */ .metric-tabs.multi button::before { content: "✓"; margin-right: 4px; visibility: hidden; } .metric-tabs.multi button.on::before { visibility: visible; } .multi-hint { font-size: 11.5px; line-height: 1.5; color: var(--muted); margin: -2px 0 8px; } #single-group-select { padding: 5px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); font-size: 13px; } .trend-views { display: block; } .trend-views.both { display: flex; gap: 14px; } .trend-views.both > * { flex: 1; min-width: 0; } #trend-chart { width: 100%; height: 330px; } #trend-small { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; } #trend-small .small-cell { height: 200px; } /* 表格视图：斑马纹 + 表头吸顶 + 横滚渐变遮罩 */ .table-scroll { position: relative; overflow-x: auto; max-height: 420px; overflow-y: auto; } .table-scroll.fade-right::after { content: ""; position: sticky; left: 100%; top: 0; display: block; width: 0; } .table-scroll { background: linear-gradient(to left, var(--table-scroll-fade), transparent 26px) right / 26px 100% no-repeat local; } .wk-table { border-collapse: collapse; width: 100%; font-size: 13px; white-space: nowrap; } .wk-table th, .wk-table td { border: 1px solid var(--table-border); padding: 7px 11px; text-align: right; } .wk-table th:first-child, .wk-table td:first-child { text-align: left; } .wk-table thead th { position: sticky; top: 0; background: var(--table-head-bg); z-index: 2; } /* A1：表格列序为新→旧，而图表仍为旧→新；「并列」模式同屏时靠此标注消歧 */ .th-note { display: block; font-size: 10px; font-weight: 400; color: var(--muted); } .wk-table tbody tr:nth-child(even) { background: var(--table-stripe); } .wk-table tbody tr:hover { background: var(--table-hover-bg); } /* ---------- 预警产品表 ---------- */ .alerts-section { margin-bottom: 20px; } .alerts-section h2 { font-size: 16px; margin-bottom: 10px; } .alerts-stat { font-size: 13px; color: var(--muted); font-weight: 400; margin-left: 6px; } .alerts-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } #group-filter { padding: 5px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); font-size: 13px; } .rule-chips { display: flex; gap: 6px; flex-wrap: wrap; } /* 规则芯片：8 条固定明暗双色（设计稿指定，不随主题变量） */ .rule-chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; cursor: pointer; border: 1px solid transparent; color: #1f2937; user-select: none; } :root[data-theme="dark"] .rule-chip { color: #e5e7eb; } .rule-chip.on { border-color: var(--accent); font-weight: 600; } .rule-chip .chip-n { opacity: .75; margin-left: 3px; } .chip-r1 { background: #FFE0E0; } :root[data-theme="dark"] .chip-r1 { background: #5A1E1E; } .chip-r2 { background: #FFF0CC; } :root[data-theme="dark"] .chip-r2 { background: #5A4A00; } .chip-r3 { background: #E8F4FD; } :root[data-theme="dark"] .chip-r3 { background: #1A3A5C; } .chip-r4 { background: #FFF3E0; } :root[data-theme="dark"] .chip-r4 { background: #5C3800; } .chip-r5 { background: #F3E5F5; } :root[data-theme="dark"] .chip-r5 { background: #3A0060; } .chip-r6 { background: #E8F5E9; } :root[data-theme="dark"] .chip-r6 { background: #1B4A1E; } .chip-r7 { background: #FFFDE7; } :root[data-theme="dark"] .chip-r7 { background: #5C5000; } .chip-r8 { background: #FCE4EC; } :root[data-theme="dark"] .chip-r8 { background: #5A1A28; } /* 超龄库存（M4 需求 13）：id=90，不是上游预警规则而是前端合成的筛选维度 —— 「命中规则 · N」的 N 不含它。 注意 .rule-chip 的底色是 `1px solid transparent`，只写 border-style 边框是隐形的， 必须一并给 border-color；而 .on 的高亮定义在本条之前，需再补一条更高特异性的 选中态，否则点亮后边框颜色被这里盖掉、看不出选中。 2026-08-17（Aaron）：原本是**透明底**，靠"没有底色"与那 8 枚实心色块区分。改成 与它们一样有底色，取上面 8 色都没用到的青色系；**虚线边框保留**（Aaron 明确要留） —— 底色负责"看得见"，虚线继续负责"它不是上游规则"这层信息，两者不冲突。 ⚠️ 取值先写的 `#E0F7FA`，**十六进制确实不与任何一枚重复，但浏览器实走一看就露馅**： 它与 .chip-r3 滞销的 `#E8F4FD` 只差 (-8,+3,-3)，肉眼根本分不出两枚芯片。 改用饱和度更高的 `#B2EBF2`（与 r3 差 -54,-9,-11）才真正拉开。 ⇒ 「不重复」要按**看得出区别**判，不是按值不相等判；这种事只有截图能发现。 */ .chip-r90 { background: #B2EBF2; border-color: var(--border); border-style: dashed; opacity: .85; } :root[data-theme="dark"] .chip-r90 { background: #0E4A50; } .rule-chip.chip-r90.on { border-color: var(--accent); opacity: 1; } /* M4 需求 5（批 B）：列宽要能拖，就必须 fixed 布局 —— auto 布局下浏览器按内容重算 列宽，拖窄的列会被内容顶回原样，表现为"拖了没反应"。fixed 的代价是每列都得有明确 宽度，已在 ALERT_COLUMNS 的 `w` 里给全，经 注入。 `width: auto + min-width: 100%` 而不是 .wk-table 的 `width: 100%`：后者会让 fixed 按容器宽度**等比缩放**各列，拖出来的绝对 px 就对不上了；前者让表格总宽 = 各列之和， 超出容器时由 .table-scroll 横滚（下面这三条旧的 min-width 因此都不再需要 —— fixed 布局下 td 上的 min-width 根本不参与列宽计算，留着只会误导后人）。 */ /* 总宽由 JS 写成 inline style（= 各列之和），这里不写 width： `width:auto` 下 fixed 表格的宽度仍受容器约束，实测 1798px 的列定义被压成 1474px； 也刻意不写 `min-width:100%` —— 藏掉多列使总宽小于容器时，多出来的宽度会被 fixed 按比例摊回各列，拖拽的像素差就不跟手了。宁可右侧留白。 */ .alerts-table { table-layout: fixed; } /* ⑮ 纵向居中：拖窄某列 → 内容换行 → 单元格变高，vertical-align:top 会让同一行里 短内容全贴顶、看着像掉了半格。横向对齐见下面 al-* 那一节。 */ .alerts-table td { vertical-align: middle; overflow: hidden; text-overflow: ellipsis; } .alerts-table .prod-name { font-weight: 600; white-space: normal; } /* 产品名最多两行（需求 6「行高自适应」的另一半）：这一列是全表最高的单元格， 一个 80 字的标题能把整行顶到 5 行高。裁行必须裹在内层 div 上 —— line-clamp 加在 td 会把下面的 ASIN 链接和复制按钮一起裁掉。全名进 title 不丢信息。 */ .alerts-table .pname { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .alerts-table .asin-links { font-size: 12px; } .alerts-table .asin-links a { color: var(--accent); text-decoration: none; } .alerts-table .asin-links a:hover { text-decoration: underline; } .alerts-table .asin-alt { color: var(--muted); margin-left: 5px; } /* 复制 ASIN（v1.8.57 起取代原「搜索」链接）：与 .asin-alt 同一视觉重量， 但是按钮不是链接——点了不跳走，只把 ASIN 送进剪贴板 */ .btn-copy-asin { margin-left: 6px; font-size: 11px; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 0 6px; line-height: 17px; white-space: nowrap; } .btn-copy-asin:hover { color: var(--accent); border-color: var(--accent); } /* 状态 8 项已各有独立列（2026-08-03），产品名下的括号串与 .alert-status 随之取消 */ /* 宽度改由 colgroup 决定（见上），这里只管内部排布 */ .alerts-table .cell-chips { display: flex; gap: 4px; flex-wrap: wrap; white-space: normal; } .trend-spark { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--muted); } .trend-spark svg { display: block; } /* ---------- ⑮ 单元格对齐：预警表 + ASIN 历史表（13 周趋势表不在内）---------- ⚠️ **不要改 .wk-table 那两条基础规则**（本文件 86-87 行：其余右、首列左）—— 三张表共用它，动了 13 周趋势表会跟着变。这里全部写在两张表各自的作用域里。 ⚠️ **也不能再依赖 :first-child**：⑭① 之后列可以拖走，「首列」不再恒等于产品列。 改为每个 td/th 都由 JS 显式挂一个 al-* 类（weekly.js alignCls / weekly-history.js hsAlignCls），漏挂只会落到默认右对齐，不会因为恰好排在首位就变左。 选择器带 `.wk-table` 前缀是为了**稳赢基础规则而不靠源码先后**： `.wk-table td:first-child` 是 (0,2,1)，`.wk-table.alerts-table td.al-c` 是 (0,3,1)。 口径（Aaron 2026-08-12 裁决）：数字列右对齐 —— $747 与 $9,219 的个位成列才能一眼 比量级，居中就得逐个读数；产品名与命中规则左对齐 —— 多行 ragged 文本居中后两边 都不齐，最伤可读性；短字段与表头居中。 */ .wk-table.alerts-table th.al-l, .wk-table.alerts-table td.al-l, .wk-table.hs-table th.al-l, .wk-table.hs-table td.al-l { text-align: left; } .wk-table.alerts-table th.al-c, .wk-table.alerts-table td.al-c, .wk-table.hs-table th.al-c, .wk-table.hs-table td.al-c { text-align: center; } .wk-table.alerts-table th.al-r, .wk-table.alerts-table td.al-r, .wk-table.hs-table th.al-r, .wk-table.hs-table td.al-r { text-align: right; } /* 四处吃不到 text-align 的地方 —— 「看着是一行 CSS」的真实成本都在这儿： ① .cell-chips 是 flex 容器，flex 容器不理 text-align，得显式 justify-content （现值恰好等于默认的 flex-start，写出来是为了日后有人改了对齐能一眼看到这条）*/ .alerts-table td.al-l .cell-chips { justify-content: flex-start; } .alerts-table td.al-c .cell-chips { justify-content: center; } /* ② .trend-spark 是 flex-direction:column，横向要靠 align-items。 作用域限死在预警表内 —— 详情页也用 .trend-spark，那里是左排的一列，不能跟着居中 */ .alerts-table td.al-c .trend-spark { align-items: center; } /* ③ 评分列的副行 .asin-alt 带 margin-left:5px（右对齐时无所谓），居中列必须清掉， 否则整行恒偏右 2.5px，且随字号变化飘 */ .alerts-table td.al-c .asin-alt { margin-left: 0; } /* ④ 跟着各列类型走已由上面三条 al-* 覆盖（th 里的 .col-resizer 是 absolute，不受影响）。 自动排除、无需处理：.group-section-row / .group-note-area 的 text-align:left !important 会挡住居中 —— 那两处是段落文本，本来就不该居中。 */ /* ---------- 列交互：排序 / 拖宽 / 显隐菜单（M4 需求 5、6，批 B） ---------- */ /* th 本就是 position: sticky，可直接作为 resizer 的定位上下文。 td 有 overflow:hidden 而 th 没有：把手要露在列边界上，裁了就抓不住。 */ .alerts-table th { position: relative; } .alerts-table th.sortable { cursor: pointer; user-select: none; } .alerts-table th.sortable:hover { color: var(--accent); } .th-sort { font-size: 9px; margin-left: 3px; opacity: .4; } .alerts-table th.sorted { color: var(--accent); } .alerts-table th.sorted .th-sort { opacity: 1; } /* 把手完全落在本列内（不是骑在列边界上）：thead th 都是 position:sticky + z-index:2， 同层级下 DOM 靠后的 th 会盖住前一列溢出的部分 —— 溢出 4px 的把手右半边点不到， 点上去反而触发了相邻列的排序。 */ .col-resizer { position: absolute; top: 0; right: 0; width: 8px; height: 100%; cursor: col-resize; z-index: 3; } .col-resizer:hover { background: var(--accent); opacity: .3; } /* 拖动中锁住整页的光标与选中：否则划过表格会把单元格文字一路选蓝 */ body.col-resizing, body.col-resizing * { cursor: col-resize !important; user-select: none !important; } .wk-menu-wrap { position: relative; } .wk-btn-menu { padding: 5px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); font-size: 13px; cursor: pointer; white-space: nowrap; } .wk-btn-menu:hover { border-color: var(--accent); color: var(--accent); } /* ⚠️ z-index 必须高于批注栏的 40 与它的把手 41（低于 .modal-mask 50 / 浮窗 60）。 原值 30 时历史页的「⚙ 列」菜单**整块压在 #annotation-panel 底下、右半边点不动** —— 浏览器实走里 elementsFromPoint 才看得出来（顶上那层是 .panel-timeline）， 逻辑断言与截图都发现不了。与批 B「热区被相邻元素遮挡」是同一类。 */ .wk-drop-menu { position: absolute; top: calc(100% + 5px); left: 0; z-index: 42; min-width: 200px; max-height: 340px; overflow-y: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 7px; box-shadow: 0 6px 20px rgba(0, 0, 0, .16); } .col-menu-head { font-size: 12px; color: var(--muted); padding: 2px 6px 6px; } .col-menu-item { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 7px; font-size: 13px; cursor: pointer; } .col-menu-item:hover { background: var(--hover); } .col-menu-item.fixed { opacity: .55; cursor: default; } .col-menu-item .asin-alt { margin-left: auto; font-size: 11px; } /* 菜单内列表拖拽排序（⑭①③）。列排序刻意不做在表头上 —— 那儿已经有「点=排序」和 「拖 resizer=调宽」两种手势，第三种必然打架（批 B 的把手遮挡事故就是这么来的）。 ⚠️ 行是
不是