/* ========================================================================== todo-v1 —— 「个人待办」页覆盖层 （模块一「我的项目待办」迁移自大屏右侧 + 模块二「个人待办事项」） 为什么单独一个文件：主 CSS 的文件名带内容哈希，改动即需换名 + 改引用； 本页排版是独立关注点，按 nav-v1-* / holidays-v1-* 同样的 「版本前缀 + 内容哈希」规则独立发版。它在 index.html 中排在主 CSS 之后， 同优先级下后加载者胜出，因此不必动主 CSS 的哈希与引用链。 对齐需求： 1) 每行只显示一件事，标题超出隐藏不换行（ellipsis），不产生横向滚动； 2) 行高适中（38px 基线）；模块一把迁移前的「标题行 + 截止行」压成一行； 3) 响应式布局：手机端两模块上下堆叠（默认，移动优先），电脑端横向并排 （见文件末尾 @media (min-width: 1280px) 段）；两模块各自可收起展开 （结构由组件控制，这里只做排版）。 实测基线：html 基字号 14px，故本文件一律用 px 写死，避免 rem 联动。 ========================================================================== */ .ns-todo-page { max-width: 100%; overflow-x: hidden; } /* ---------- 通用：列表骨架 ---------- */ .ns-todo-page .ns-ptd-list { list-style: none; margin: 0; padding: 0; max-width: 100%; } .ns-todo-page .ns-ptd-list > li { max-width: 100%; overflow: hidden; } .ns-todo-page .ns-ptd-list > li > * { min-width: 0; } /* ---------- 模块一：我的项目待办 ---------- 迁移前每行是「标题一行 + 截止/逾期/商机名一行」；这里改为单行： 标题可伸缩并截断，说明性徽标一律不收缩、不换行。 注意 :not([data-warning-todo])：系统自动生成的「提醒类」条目自带三行文案 （标题 / 说明 / 徽标），单独用下面一组规则压成一行，避免误伤。 */ .ns-todo-page .ns-proj-list > li:not([data-warning-todo]) { display: flex; align-items: center; min-height: 38px; } .ns-todo-page .ns-proj-list > li > button:first-child { margin-top: 0; } .ns-todo-page .ns-ptd-main { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; } .ns-todo-page .ns-ptd-main > div:first-child:not(.ns-ptd-edit) { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: normal; } .ns-todo-page .ns-ptd-main > div:last-child:not(.ns-ptd-edit) { display: flex; flex: 0 0 auto; flex-wrap: nowrap; align-items: center; margin-top: 0; white-space: nowrap; overflow: hidden; } .ns-todo-page .ns-ptd-main > .ns-ptd-edit { flex: 1 1 auto; min-width: 0; display: block; white-space: normal; } /* 提醒类条目（li[data-warning-todo]，结构固定为「标题 / 说明 / 徽标」三块）： 同样压成一行。:nth-child(2) 仅在存在说明时有意义，故把 :last-child 写在后面， 两者特异性相同（0,4,3）时由书写顺序决定胜负。 */ .ns-todo-page .ns-proj-list > li[data-warning-todo] { display: flex; align-items: center; min-height: 38px; } .ns-todo-page .ns-proj-list > li[data-warning-todo] > div { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; } .ns-todo-page .ns-proj-list > li[data-warning-todo] > div > div { margin-top: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ns-todo-page .ns-proj-list > li[data-warning-todo] > div > div:nth-child(1) { flex: 0 1 auto; } .ns-todo-page .ns-proj-list > li[data-warning-todo] > div > div:nth-child(2) { flex: 0 1 auto; font-size: 11px; color: #9ca3af; } .ns-todo-page .ns-proj-list > li[data-warning-todo] > div > div:last-child { display: flex; flex: 0 0 auto; flex-wrap: nowrap; align-items: center; margin-top: 0; } /* ---------- 模块二：个人待办事项（天然单行） ---------- */ .ns-todo-page .ns-ptd-row { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 4px; min-width: 0; max-width: 100%; overflow: hidden; } .ns-todo-page .ns-ptd-line { display: flex; flex: 1 1 auto; align-items: center; gap: 6px; min-width: 0; overflow: hidden; } .ns-todo-page .ns-ptd-txt { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ns-todo-page .ns-ptd-txt-done { color: #9ca3af; text-decoration: line-through; } .ns-todo-page .ns-ptd-meta { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px; color: #9ca3af; } .ns-todo-page .ns-ptd-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; white-space: nowrap; } .ns-todo-page .ns-ptd-detail { border-top: 1px solid rgb(238 241 246); margin: 0 -12px; padding: 10px 12px 4px; background: #f8fafc; } .ns-todo-page .ns-ptd-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 100%; } /* 产物 CSS 里 .input 是 width:100%（Tailwind 原生），放进 flex 行会让每个控件各占一行、 把表单顶成三行。这里把宽度交回 flex 决定；模块一的行内编辑需要内容框独占一行，单独放回来。 */ .ns-todo-page .input { width: auto; } .ns-todo-page .ns-ptd-edit > .input { width: 100%; } .ns-todo-page .ns-ptd-form .input { max-width: 100%; } /* ---------- 模块外壳（整体可收起 / 展开） ---------- */ .ns-todo-page .ns-ptd-sec { max-width: 100%; overflow: hidden; } .ns-todo-page .ns-ptd-head { display: flex; width: 100%; align-items: center; gap: 8px; text-align: left; } .ns-todo-page .ns-ptd-body { padding: 0 12px 12px; min-width: 0; max-width: 100%; } @media (min-width: 768px) { .ns-todo-page .ns-ptd-body { padding: 0 16px 16px; } } /* ---------- 窄屏：优先保住「一行一件事」，绝不出现横向滚动 ---------- */ @media (max-width: 767px) { .ns-todo-page .ns-ptd-meta { font-size: 11px; gap: 4px; } .ns-todo-page .ns-ptd-main > div:last-child > button { max-width: 5.5rem; } .ns-todo-page .ns-ptd-body { padding: 0 10px 10px; } .ns-todo-page .ns-ptd-detail { margin: 0 -10px; padding: 10px 10px 4px; } /* 2026.10.09.9：两档 chip 进驻卡头后，窄屏把副标题让出去，否则标题会被挤成两三个字。 */ .ns-todo-page .ns-ptd-tip { display: none; } } /* ---------- 响应式布局：电脑端两模块横向并排 ---------- 默认（无媒体查询）= 手机端 / 平板纵向堆叠，即上面的写法，移动优先。 结构前提：本页根元素是
，两个子元素依次为 模块一 、模块二 ，因此把根元素改成 grid 即可并排，无需改动 DOM 与组件。 两个易错点： (a) space-y-4 给「非首个子元素」加 margin-top: 1rem（= 14px，因为 html 基字号 14px）。 改 grid 后块间距统一由 gap 接管，必须把该 margin 归零，否则第二列的顶部会凭空 低 14px、与第一列错位。归零规则特异性取 (0,3,0)，与产物里 .space-y-4 > :not([hidden]) ~ :not([hidden]) 相同 —— 本文件排在主 CSS 之后， 同特异性由书写顺序决定，故可靠胜出。 (b) align-items: start 不可省：grid 默认 stretch 会把较矮的模块二拉伸到与模块一 等高，右侧出现一大块空白卡片。start 让两者各自按内容高度收缩、顶端对齐。 断点取 1280px（= 产物 Tailwind 的 xl），依据是实测「模块一行内标题的可用宽度」 （模块一每行是「勾选框 + 标题 + 截止/徽标/商机名/编辑」单行布局，后段不收缩， 所以列越窄，标题被吃掉得越狠）： 视口 单列宽 标题最小宽 / 平均宽 1024 377px 4px / 48px ← 挤成两三个字，不可读 1152 441px 44px / 97px ← 仍偏窄 1280 505px 108px / 161px ← 可读（约 13~19 个汉字） 1440 585px 188px / 241px 1680 692px 295px / 348px 内容区宽度 = min(视口 − 212px 侧栏 − 32px 内边距, 1400px 上限)，故 1280px 以下做两列 必然把标题挤没；低于 1280px 一律保持上下堆叠（整行铺满，标题最舒展）。 1280px 这条线覆盖所有常见桌面分辨率（1366 / 1440 / 1600 / 1920 均并排）。 只加「布局容器」规则，不改动任何既有排版规则（行高 / 单行截断 / 无横向滚动等）， 既有行为由 ptodo_layout_verify.mjs 的回归段逐条比对。 */ @media (min-width: 1280px) { .ns-todo-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 16px; } .ns-todo-page.ns-todo-page > .ns-ptd-sec { margin-top: 0; } } /* ---------- 方案 A（2026.10.08.5）：行内压缩 + 行首「负责人」列 ---------- 目标：每行一眼看到归属。做法 = 回收行内冗余（日期窄屏用 MM-DD、日期恰为今天时 隐去与之重复的「今天到期」徽标），腾出的空间大于新增列占用的空间，故加列之后 标题反而更宽、行高不变（实测：1440 标题中位 233→279px、390 由 47→104px）。 负责人列必须插在 .ns-ptd-main **之外**（li 的直接子元素、勾选框之后）： 若插成 .ns-ptd-main 的第一个子元素，本文件第 34/38 行的 :first-child/:last-child 位置选择器会同时静默失配 —— 标题丢掉 nowrap/ellipsis/flex，控制台零报错。 */ .ns-todo-page .ns-ptd-who { flex: 0 0 auto; max-width: 3.6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: 1.45; color: #6b7280; } /* 预警派生行没有「待办负责人」（后端恒为 null），回落显示「商机负责人」并弱化， 与真实待办那一列在视觉上可区分。 */ .ns-todo-page .ns-ptd-who-opp { color: #9ca3af; } /* 日期两段式：宽屏显示全名，窄屏切 MM-DD（title 里始终保留全名）。 断点取 1024px：>=1024 时侧栏常驻、内容区反而更窄，故这条路走全名； <1024（含手机与平板）走短式，实测各档标题最小宽均 >= 90px。 */ .ns-todo-page .ns-d-short { display: none; } @media (max-width: 1023.98px) { .ns-todo-page .ns-d-full { display: none; } .ns-todo-page .ns-d-short { display: inline; } }