:root { --border: #e2e5ea; --border-strong: #cbd2dc; /* 题卡专属边框色（浏览页题目卡片 + 右栏调用区题卡共用一套，保证两边一致）： 比 --border 深一档、比 --border-strong 浅一档 —— 看得清但不刺眼。 **--border 本身不动**：面板分隔线、文件树搜索框、标签栏都靠它，改了会全站一起变。 */ --card-border: #d0d7e1; --card-border-hover: #b6bfcd; --bg: #f5f6f8; --panel: #ffffff; /* 「非激活面」底色（2026-10-08）：已关闭 / 失效 / 归档类容器专用。 比白卡（--panel #fff）明确暗一档 → 一眼"沉下去"；也比页面底（--bg #f5f6f8）深且偏冷 （三通道 rgb(238,241,246)，蓝最高 = 冷灰，不是暖灰）。 值取站内多处沿袭的 #eef1f6（.ds-tabs / 面包屑 hover / 表单控件底色），不是新造色。 */ --inactive-bg: #eef1f6; --text: #1f2430; --muted: #6b7280; --accent: #2f6fed; --accent-soft: #eaf1ff; --a-color: #1a7f37; --b-color: #b26a00; --c-color: #b3261e; --j-color: #6f42c1; /* 「作者」这一支的紫：跟灰（其它次要信息）、蓝（能点的按钮 / 选中的行）都分得开， 审核页扫描"这条是谁交的"时一眼能挑出来。审核列表 / 详情头 / 我的草稿共用这一支。 */ --author-color: #6f42c1; /* Cmd+点击跳转的「高亮」色：**源码页那行的底色**与**排版预览里那些黄框** 必须看起来是同一个颜色（用户要求），所以两边只认这几个变量、别的地方不许再写死。 色相与浓度分开：色相不透明，浓度放在外层 —— 这样"同一个框被引擎重复报很多次" 叠在一起也只是同色叠同色，颜色不会被乘深（见 .rpreview-pdfflash 注释）。 `#feedc1` 是浅黄：用户挑的那张参考图里高亮处的实测像素就是 rgb(254,237,193)。 */ --sync-flash: #feedc1; --sync-flash-alpha: 1; --sync-flash-edge: #e9c46a; /* 代码编辑器（CodeMirror 5）三件套 —— 照 TeXstudio 的观感：Consolas 16px / 行高 18.5px。 只被这四处引用：源码页（.handout-editor-host）、题目内容/TikZ/答案 6 个框（.code-edit）、 补全弹窗（.CodeMirror-hints）、源码页 Cmd-F 的查找框输入（.cm-dialog-input）。 改这三行 = 全站代码框一起变（其余等宽用法 —— 题号 ID / 电话号 / 工作区路径 —— 不引用它）。 ⚠️ 字体栈：Consolas 排第一、现有那套兜底。macOS **不自带** Consolas（本机这份是 Office 装的：/Library/Fonts/consola.ttf），没装的机器自动落到 SF Mono / Menlo，不会掉字。 ⚠️ 行高**必须写死 px**（不能 normal / 117%）：站内代码是中英混排，Consolas 没有中文字形 → 中文回退到苹方，而行盒高度按"这一行里最高的那个字体"算 —— 实测 Chrome 下纯英文行 18.5px、 含中文行 22.5px（一行高一行低）；写死 18.5px 则两边都是 18.5px。 18.5px ≈ 1.16em，正是 TeXstudio「行距 100%」那一档（= 字体的自然行距，实测 18.75px）。 ⚠️ 最后动过的一次（2026-10-15）：西文换成 **"CodeConsolas"**（Consolas 缩 91%）—— 见下面那两条 @font-face。2026-10-16 又补了 **"CodeMenlo"**（Menlo 缩 83.1%）， 两族的**字宽完全相同**（都是 8.005px/字）：Safari 拿不到 Consolas 时靠它兜住， Chrome 照旧用真 Consolas。 */ --code-font: "CodeConsolas", "CodeMenlo", "CodeCJK", Consolas, ui-monospace, SFMono-Regular, Menlo, monospace; --code-size: 16px; --code-line: 18.5px; /* 代码框语法配色 —— 抄 TeXstudio 4.4.1 的出厂配色（色号取自本机 ~/.config/texstudio/texstudio.ini 的 [formats] 段，2026-10-15 对齐）。 只被两个代码编辑器引用：题目内容/TikZ/答案（.code-edit）与源码页（.handout-editor-host）。 */ --code-fg-command: #800000; /* keyword —— 普通命令 \storebackup \item \Qnum */ --code-fg-env: #000080; /* environment —— 环境名 myenumerate */ --code-fg-math: #008000; /* numbers —— 数学里的字母与数字（TeXstudio 里同色）*/ --code-fg-math-delim: #509600; /* math-delimiter —— 数学定界符 $ */ --code-fg-comment: #808080; /* comment —— 注释 */ --code-fg-bracket: #1f2430; /* 括号：TeXstudio 不染色 → 跟正文同色 */ /* extra-keyword —— `\begin`/`\end`：TeXstudio 独一档（亮蓝 **+ 加粗**）。 基底把 `\begin` 和 `\item` 归成同一个 tag，只能靠 stex-tiku 那层 mode 单独打类。 */ --code-fg-extracmd: #0095ff; /* 命令参数里的数字（`{13}` 的 13、`[2015]` 的 2015）：TeXstudio **不染色** → 跟正文同色。 基底把"环境名"和"参数数字"都吐成 atom，靠 stex-tiku 把环境名单独摘出去（见 --code-fg-env）。 */ --code-fg-arg: #1f2430; /* math-keyword —— **数学模式内**的命令（`\triangle`、`\frac`…）：TeXstudio 独一档的橄榄色。 判据实测：它那屏里 `$\frac{x^{2}}{6}$` 的 `\frac` 也是橄榄色 → 是"在 $…$ 里"，不是固定命令表。 */ --code-fg-mathcmd: #808000; /* align-ampersand —— 表格/对齐环境的 `&`：TeXstudio 是亮蓝 + 加粗（ini 里的 #0055ff）。 */ --code-fg-amp: #0055ff; /* math-text —— 数学里 `\text{…}` 盒子中的内容（含中文）与那对 `{}`。 ⚠️ 值取**实测**而不是 ini：用户同屏截图里 TeXstudio 把它渲染成和数学内容一样的绿 （不是 ini 的 math-text #202000）。顺带解决：基底把数学里的中文标成 cm-error（红字）。 */ --code-fg-mathtext: #008000; /* TikZ（tikzpicture 环境内）两档 —— 2026-10-16 拿用户两张真机截图**逐段量像素**定的： 命令名（`\tkzDrawSegments`…）走 picture-keyword，它的参数（`{…}`/`[…]`/`(…)` 里）走 picture。 */ --code-fg-tikzcmd: #c06000; /* picture-keyword */ --code-fg-tikzarg: #804000; /* picture */ /* 章节标题（`\chapter{…}` 里那串字）：TeXstudio 的 structure = 黑 + 加粗（用户截图确认）*/ --code-fg-structtitle: #000000; } /* 代码框的西文字体：把宿主字体外面包一层，用 `size-adjust` 只缩**西文**（中文不受影响）。 目标字宽 = **8.005px/字**，来自 TeXstudio 那屏的实测：同一串 `\begin{myenumerate}` （19 字符）它 306 设备像素、我们原来 336 → 比值 0.911。 · CodeConsolas：Consolas（16px 步进 8.797）× 91% = 8.005 —— **Chrome / Windows 走这条** · CodeMenlo ：Menlo （16px 步进 9.633）× 83.1% = 8.005 —— **Safari 走这条** · CodeCJK ：苹方 （16px 步进 16）× 93.75% = 15 —— **中文单独缩到 15px** （2026-10-16 用户要求"中文 15px、西文按当前的不动"：所以西文那两条**一个字节没改**， 中文另开一族按 93.75% 缩。中日韩字形只在这族里有 → 只影响中文，西文不受影响。） ⚠️ 为什么要两条：**macOS 上的 Safari 根本不认我们那份 Consolas** —— 2026-10-16 用真机 （Safari 26.6.2，`screencapture` 量像素）实测：连 `font-family: Consolas` 它都落到 Menlo （9.598px/字），`local("Consolas")` 更不会命中 → 上一轮只写 Consolas 时 Safari 等于没缩。 而 `local("Menlo")` + `size-adjust` 在 Safari 上实测完全正常（Menlo×50% = 4.817 分毫不差）。 所以给 Safari 单独铺一条"同一字宽"的路：**宽度一致，字形是 Menlo 的**（不是 Consolas 的）。 （想让 Safari 也用真 Consolas：把 consola.ttf 用「字体册」正式安装一次即可，那条规则就生效。） ⚠️ Consolas / Menlo 里都没有中文字形 → 中文走后面的回退字体（苹方），**仍是 16px、一个字不缩**。 这正是要的效果 —— TeXstudio 那边也是"西文小、中文大"的混搭。 ⚠️ `size-adjust` 要较新的内核（Chrome 92+ / Safari 17+）；更老的内核会忽略它 → 退化成"不缩"。 */ @font-face { font-family: "CodeConsolas"; src: local("Consolas"); size-adjust: 91%; } @font-face { font-family: "CodeMenlo"; src: local("Menlo"); size-adjust: 83.1%; } /* 加粗档（只有 `\begin`/`\end` 这一档用）：给两族各补一个**真粗体面**。 ⚠️ 不补的话：WebKit 会对单面 @font-face 做**合成粗体**，字宽被撑大 5% （2026-10-16 实测：19 字符那串 328.211 → 344.794），把之前对齐的字宽毁掉。 补上真 Menlo Bold 后宽度与常规完全一致（对照实验：纯 Menlo 400/700 都是 394.945）。 Chrome 这边本机没装 Consolas Bold（只有 consola.ttf）→ 走合成粗体，但实测**宽度不变** （400/500/600/700 全是 328.219），所以两边都不会让行变宽。 */ @font-face { font-family: "CodeConsolas"; src: local("Consolas Bold"), local("Consolas-Bold"); size-adjust: 91%; font-weight: 700; } @font-face { font-family: "CodeMenlo"; src: local("Menlo Bold"), local("Menlo-Bold"); size-adjust: 83.1%; font-weight: 700; } /* 中文（回退字体）：15px —— 把苹方单独包一族、按 93.75% 缩（16 × 0.9375 = 15）。 为什么单开一族：上面两条管西文，这条只管中日韩；`--code-size` 仍是 16px， 西文的 91% / 83.1% 一个字节都没动（用户 2026-10-16："西文先按当前的不动"）。 ⚠️ 苹方没命中（老系统/别的平台）时这一族不可用 → 中文退回浏览器最后的 CJK 字体、 按 16px 渲染（= 改之前的样子），不会坏。 */ @font-face { font-family: "CodeCJK"; src: local("PingFang SC"), local("PingFangSC-Regular"), local("Hiragino Sans GB"); size-adjust: 93.75%; } /* ⚠️ 中文也要一档**真粗体面**（用户 2026-10-16："标题里的中文 TeXstudio 更明显"）： 只声明 400 面时，Chrome **不会**给这一族合成粗体（西文那两族有真 700 面所以正常）， 于是 `font-weight: 700` 的中文看着没变粗。这里指到 PingFang 的 Semibold； 找不到就退回 400 面（浏览器可能合成），不会掉字。 */ @font-face { font-family: "CodeCJK"; src: local("PingFangSC-Semibold"), local("PingFang SC Semibold"), local("PingFang SC"), local("PingFangSC-Regular"); size-adjust: 93.75%; font-weight: 700; } * { box-sizing: border-box; } body { margin: 0; height: 100%; /* 整页固定：系统大页面不许上下滚，滚动一律发生在内部（左/中/右三栏各自的滚动区）。 原来这里是 height:100% 都没有、.layout 又写死 calc(100vh - 45px)，而顶部工具栏 实际高 49px —— 49 + (100vh-45) = 100vh + 4px，外层就多出 4px 可滚 （实测 html.scrollHeight 1004 / clientHeight 1000）。 */ overflow: hidden; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; font-size: 14px; line-height: 1.7; } html { height: 100%; overflow: hidden; } #app { height: 100%; display: flex; flex-direction: column; overflow: hidden; } .topbar { display: flex; align-items: baseline; gap: 12px; padding: 10px 16px; background: var(--panel); /* 顶栏与内容区的分界线：比普通面板线深一档。Safari 某些缩放/Retina 组合下 #e2e5ea 的 1px 线会被抹得几乎看不见（MacBook 实测），这里用 --border-strong 保证两台机器、普通窗口和网页 App 都能看到同一条线。 */ border-bottom: 1px solid var(--border-strong); } /* 网页 App 顶栏统一（2026-10-19）：Safari「添加到程序坞」和 Chrome「安装为应用」 都直接使用浏览器自己的窗口标题栏。网页不再自绘 28px 标题栏，也不再额外加 padding —— 之前按 Safari 26 的“无标题栏”行为补的那一条，在 Safari 27 上会和 系统标题栏叠成两条，所以整段撤掉，统一走 Chrome 那套基准布局。 */ /* 标题**不折行**：它是定长的一段字（"数学题库工作台"），弹性的那部分是右边的 hint / 搜索框。不加 nowrap 的话，顶栏一拥挤就会把标题折成两行，很难看， 而且"标题定长 → 左边按钮的 x 不随动态数字变"这条既有前提也就失效了。 */ /* 双击这个标题 = 回工作台（审核页 / 后台管理区都适用）：所以别让双击选中文字 —— 选中一片高亮再"顺手返回"看着像误操作。 */ .topbar h1 { margin: 0; font-size: 16px; font-weight: 600; white-space: nowrap; flex: none; user-select: none; -webkit-user-select: none; } /* 顶栏窄了（非全屏 / 窗口拉小）时这行统计**不许竖排**：中文随处可断，不给 nowrap 的话会被压成一列单字（实测 1200 宽就是那样）。放不下就出省略号， 整条被挤走比"一个一个字往下掉"体面得多。min-width:0 是关键 —— flex 子项默认不肯缩到内容宽度以下。 */ .topbar .hint { color: var(--muted); font-size: 12px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 「今日新增 N」用与批量页「已入库：」同一支绿（--a-color）： 那两个数是一回事（今天入库了几道），颜色一致读起来才对得上。 */ .topbar .hint .today-new { color: var(--a-color); font-weight: 600; } /* 顶栏靠右的留白：**有「找题」模块时**由它独占（.app-switch 的 margin-left:auto）， 那样「找题模块 + 搜索框」整组贴右、两者之间保持顶栏统一间距（12px）。 没有那一块（账号级能力为假）时，这份职责交给搜索框（见 .search-box.push-right）。 */ /* 搜索框宽度抽成变量：下面的「已选范围」框要跟它同宽，改一处两边一起走 */ .search-box { display: flex; align-items: center; gap: 6px; --search-w: 320px; } .search-box.push-right { margin-left: auto; } .search-box input { width: var(--search-w); padding: 5px 10px; border: 1px solid var(--border-strong); border-radius: 16px; font-size: 13px; outline: none; } .search-box input:focus { border-color: var(--accent); } /* 自定义清空按钮：绝对定位在输入框内部，不参与布局，输入框宽度恒定 */ .search-input { position: relative; display: inline-flex; } /* 左边 58px：让出框内那个「全库 / 局部」胶囊的位置 + 一个数字的余量 （外框宽高不变；去掉 chip 的三角后 chip 变窄了 7px，这里跟着收 8px， 让输入文字离 chip 近一点、又不贴上去） */ .search-input input { padding-left: 58px; padding-right: 28px; } /* 清空按钮：两根细线拼 ✕，用 translate(-50%,-50%) 做几何居中， 外观对齐输入框自带的原生清除按钮（无背景、无边框） */ /* 选择器带 .search-input，优先级高于上面通用的 .search-box button， 确保 padding / border / background 被真正清掉 */ .search-input .search-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; padding: 0; border: none; background: none; box-shadow: none; cursor: pointer; } .search-input .search-clear::before, .search-input .search-clear::after { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 1.4px; background: #8a9199; border-radius: 1px; } .search-input .search-clear::before { transform: translate(-50%, -50%) rotate(45deg); } .search-input .search-clear::after { transform: translate(-50%, -50%) rotate(-45deg); } .search-input .search-clear:hover::before, .search-input .search-clear:hover::after { background: #4a5464; } /* 隐藏浏览器自带的 ×，避免出现两个清除按钮 */ .search-input input::-webkit-search-cancel-button { display: none; } .search-box button { padding: 4px 10px; border: 1px solid var(--border-strong); border-radius: 14px; background: #fff; color: var(--muted); cursor: pointer; font-size: 12px; } .search-box button:hover { background: #f2f5fa; color: var(--text); } /* 搜索按钮沿用主色，与「保存」同色系 */ .search-box button.primary { background: var(--accent); border-color: var(--accent); color: #fff; } .search-box button.primary:hover { background: #2560d4; color: #fff; } /* 关键词为空时搜索按钮禁用：灰底、不再有悬停手势 */ /* 2026-10-08：**全站"搜索"类按钮的禁用态统一走这一条** —— 用户要求长得一样 （淡蓝底 + 白字 + 半透明），所以是"同一处声明、多个选择器共用"，不是抄几份数值过去： · 顶栏「搜索」(.search-box button.primary) · 工作空间 → 其他工作区 的「接收」(.subtab-search .subtab-receive) · 真题卷集 → 试卷库 / 待审区 的两颗「搜索」(.ds-search-go) **每个都要带 `:disabled:hover`**（2026-10-08 修"禁用态悬停变白底黑字"）： 通用按钮库里本来就有 `.admin-refresh:disabled:hover{background:#fff;color:#2c3444}`（:4613） 这种"禁用悬停"规则，与这里**同为 (0,3,0)**、谁写在后面谁赢 —— 光写 `:disabled` 会在鼠标一悬停时被它盖成白底黑字。加上 `:disabled:hover`（各 +1 伪类）就稳压一头， 顺带把 cursor 也钉成 not-allowed（不被 `.admin-refresh:disabled{cursor:default}` 抢走）。 ⚠️ 真题卷集那颗要带够 .ds-btn.ds-btn-blue 两段前缀：后面的 `.ds-btn.ds-btn-blue:disabled`（:6173，灰底灰字）同优先级、写在后面，不加会被它盖掉。 */ .search-box button.primary:disabled, .search-box button.primary:disabled:hover, .subtab-search .subtab-receive:disabled, .subtab-search .subtab-receive:disabled:hover, .ds-btn.ds-btn-blue.ds-search-go:disabled:hover, .ds-btn.ds-btn-blue.ds-search-go:disabled { background: #c8d2e4; border-color: #c8d2e4; color: #fff; opacity: 0.6; cursor: not-allowed; } /* ---- 搜索范围选择器（全库 / 局部）------------------------------------ 硬约束：搜索框外框的宽高一个像素都不许变。所以选择器做成「输入框内部左侧的 绝对定位胶囊」，输入框只让出 padding-left（全局 box-sizing: border-box， 改 padding 不动外框尺寸）；浮层也是绝对定位，不参与布局。 另外：这里的每条选择器都带 .search-box 前缀，优先级高于上面通用的 .search-box input / .search-box button —— 否则浮层里的 radio 会被撑成 320px 宽。 同一个坑 .search-input .search-clear 那套已经踩过一次，照它的写法办。 */ /* 撑满输入框高度 + flex 居中：chip 与输入框**几何中心完全重合** （上一版用 top:50% + translateY(-50%)，因为外层行盒比输入框高，实测偏了 1.85px） */ .search-box .scope-wrap { position: absolute; left: 5px; top: 0; bottom: 0; display: flex; align-items: center; z-index: 6; } .search-box .scope-chip { display: inline-flex; align-items: center; gap: 2px; /* 上限比让出的 58px 更小：文字区不会撞上 chip（当前文案「全库/局部」实测 35px） */ max-width: 50px; height: 19px; padding: 0 6px; border: none; border-radius: 10px; /* 「全库」态：加深一档的灰（原来是 #eef1f6，和面板底色几乎分不出来） */ background: #e4e9f0; color: #4a5464; font-size: 11.5px; font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap; overflow: hidden; } .search-box .scope-chip:hover { background: #d8dee8; } /* 局部（有选中节点）= 主色；局部但一个节点都没选 = 提示色，提醒先点左树 */ .search-box .scope-chip.local { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .search-box .scope-chip.local:hover { background: #dde8ff; } .search-box .scope-chip.empty { background: #fdf1e6; color: #a15a12; font-weight: 600; } .search-box .scope-chip.empty:hover { background: #f9e6d5; } /* ---- 已选范围框：横排换行、与搜索框同宽 ------------------------------- 显示时机（三条都由 .scope-wrap 上的 hover + 一个 3 秒定时器驱动）： 1) 选成多选后自动出现，约 3 秒后自己消失（不打扰） 2) 鼠标悬停到「局部」chip 上（不用点）→ 随时再看 3) 鼠标移进框里 → 不消失；移出 chip 和框 → 消失 宽度 = var(--search-w)，与输入框同宽（同一个变量，天然一致）。 */ .search-box .scope-range { position: absolute; left: -5px; top: calc(100% + 8px); width: var(--search-w); padding: 8px 8px 9px; background: #fff; border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: 0 8px 20px rgba(31, 36, 48, 0.14); text-align: left; cursor: default; } /* hover 连贯用的"透明桥"：正好填满 chip 下沿到框上沿之间那 8px， 它是 .scope-wrap 的子元素 —— 鼠标从 chip 往下走时始终没离开这个子树， 所以不会中途触发 mouseleave 把框关掉。 */ .search-box .scope-range-bridge { position: absolute; left: -5px; top: 100%; width: var(--search-w); height: 8px; } .search-box .scope-range-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 11.5px; margin-bottom: 6px; } .search-box .scope-range .scope-clear { border: none; background: none; box-shadow: none; padding: 1px 5px; border-radius: 5px; color: var(--accent); font-size: 11.5px; line-height: 1.4; cursor: pointer; flex: none; } .search-box .scope-range .scope-clear:hover { background: var(--accent-soft); } .search-box .scope-range .scope-clear:disabled { color: #b7bdc7; cursor: not-allowed; } .search-box .scope-range .scope-clear:disabled:hover { background: none; } /* 局部但还没点过左树：范围框里只显示这行提示 */ .search-box .scope-range-hint { color: #a15a12; font-size: 11.5px; line-height: 1.5; } .search-box .scope-chips { display: flex; flex-wrap: wrap; gap: 4px; } .search-box .scope-pill { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; padding: 2px 4px 2px 7px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 11.5px; } .search-box .scope-pill-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-box .scope-pill button { border: none; background: none; box-shadow: none; padding: 0 2px; color: inherit; font-size: 12px; line-height: 1; cursor: pointer; opacity: 0.7; } .search-box .scope-pill button:hover { opacity: 1; } .layout { display: grid; /* 四列：左树 --tree-w｜中栏（下限 --mid-min）｜分隔条 --splitter-w｜右栏。 宽度全抽成变量，是为了"收起右栏"那条规则只改列数、不改数字—— 否则 260/223 这些数要在 .right-hidden 和媒体查询里各抄一份。 --right-w 只在用户拖过分隔条之后才有值（内联样式写在 .layout 上，见 colSplitStyle）， 没拖过时走下面的 4:3 默认比例。 右栏曾经写死 612px：那是给定值（简版调用第一行"日期/班级/来源/解析/风格"五块 要 577px 内容宽 = 栏宽 ≥599px，实测 590 折行、600 起才一行）。现在默认改成 4:3 比例（用户要求），宽屏下右栏会比 612 更宽、更不会折行；窄屏下中栏先触到 --mid-min、右栏再触到 --right-min，那时确实会折行，这是比例的固有代价。 */ --tree-w: 260px; --mid-min: 380px; --splitter-w: 6px; /* 右栏下限：与拖动时分隔条那条限制（JS 的 COL_RIGHT_MIN）同一个数， 免得"默认比例"和"手动拖"两套规矩各说各话。 */ --right-min: 280px; /* 中栏 : 右栏 = **4 : 3**（左树宽度不变）。没拖过分隔条时（--right-w 未设） 两栏按 4fr / 3fr 分掉左树之外的剩余宽度；一旦用户拖过，--right-w 变成固定 px，这一项就退化成 minmax(280px, 612px) —— 也就是"用户说了算"，拖动照旧有效。 */ grid-template-columns: var(--tree-w) minmax(var(--mid-min), 4fr) var(--splitter-w) minmax(var(--right-min), var(--right-w, 3fr)); gap: 10px; padding: 10px; /* 高度交给 flex：顶栏多高就自动扣多少（不再写死 45 这个魔数）。 #app 是 height:100% 的 flex 列，.layout flex:1 吃掉剩余高度 —— 两者相加恒等于视口高， 所以外层永远没有可滚高度（原来写死 45px 时顶栏实际 49px，多出 4px）。 */ flex: 1 1 auto; min-height: 0; align-items: stretch; overflow-x: auto; } /* 右栏收起：分隔条和输出区一起退场，中栏吃掉腾出来的空间。 用 display:none 而不是把列宽写成 0——面板的 min-content 会把 0 宽的列重新撑开， 进而在 .layout 上压出一条横向滚动条。DOM 保留（不销毁），所以编辑器实例、 已打开的文件和未保存内容都不受影响。 */ .layout.right-hidden { grid-template-columns: var(--tree-w) minmax(var(--mid-min), 1fr); } .layout.right-hidden .col-splitter, .layout.right-hidden .handout-panel { display: none; } /* 左树收起（**只有真题卷集页面会加上这个类**，见 toggleDsTree）：与右栏那条同一个套路 —— DOM 保留、用 display:none 退场，列模板整条换掉（写 0 宽会在左边缘留下 gap 的空档）。 */ .layout.ds-tree-hidden { grid-template-columns: minmax(var(--mid-min), 4fr) var(--splitter-w) minmax(var(--right-min), var(--right-w, 3fr)); } .layout.ds-tree-hidden.right-hidden { grid-template-columns: minmax(var(--mid-min), 1fr); } .layout.ds-tree-hidden .tree-panel { display: none; } /* 窗口偏窄时收窄左右两栏，尽量避免横向滚动 */ @media (max-width: 1400px) { .layout { --tree-w: 223px; --mid-min: 360px; /* 窄屏这一条只缩左树与中栏下限，**右栏不再跟着缩**（612 与宽屏一致）： 简版调用第一行五个控件需要 577px 内容宽（= 599px 栏宽），实测 569px 那档 会折成两行 —— 而"五个控件一行"是硬要求，跟窗口宽窄无关。 代价：横向滚动条的出现阈值从 1208px 推到 1251px（223+360+6+612+50）， 实测 1400px 视口下中栏仍有 509px，远高于 360px 下限。 */ grid-template-columns: var(--tree-w) minmax(var(--mid-min), 4fr) var(--splitter-w) minmax(var(--right-min), var(--right-w, 3fr)); } } .panel { display: flex; flex-direction: column; min-height: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } /* 三区：左标题 / 中标签 / 右开关。 用 grid 而不是 flex——flex 下中间那块会被左右两块的宽度推偏，标签就不在几何中心了。 */ .panel-head { display: grid; /* 右格用 max-content 下限：工具栏（多选提示 + 显示答案）不该被挤到换行； 左格标题本来就有省略号，缺宽度时先让它让位。1100px 以下由下面的媒体查询改成两行。 */ grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr); align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); background: #fbfcfd; font-weight: 600; font-size: 13px; } .panel-head .muted { font-weight: 400; color: var(--muted); font-size: 12px; } /* 左栏「目录树」标题格与**中栏标题格**等高（高度由 JS 量好写进 --panel-head-h）： - 宽屏下中栏标题 = 44px（一行文字 + 27px 的分段控件），左栏只有一行文字（39.1px）→ 差 4.9px； - 窗口变窄时中栏那几个 tab 会自己折行，标题格跟着长高（实测 1300px → 61px、1200px → 95px）， 固定 44px 就再也对不上了。 所以这里不写死高度，直接跟中栏同步（见 syncPanelHeadHeight）。 */ .tree-panel > .panel-head { min-height: var(--panel-head-h, 44px); } /* 「目录树编辑模式」那颗齿轮（2026-10-10 第①轮）：外观直接照真题卷集那颗 .ds-gear （同一档尺寸 / 同一套 hover 与反色态），只是挂在这一行的**右端**。 */ /* 第④轮：这一行多了「新建大类」，它和齿轮一起包进 .tree-head-actions（一个 flex）， 于是**无论编辑模式开不开**，齿轮永远是这一行的最后一项、贴着内容盒右缘 —— 不再出现"空出来的第三列 + gap 把齿轮顶左 10px"那种只有非编辑模式才有的错位。 右内边距对齐 .tree-search 的 10px（那边是 `padding: 8px 10px`）， 这样齿轮的右边框正好压在下搜索框的右边框上（实测两边都是 259px）。 */ .tree-panel > .panel-head.tree-head { grid-template-columns: minmax(0, 1fr) auto; padding-right: 10px; } .tree-head .tree-head-actions { display: flex; align-items: center; gap: 8px; min-width: 0; } .tree-head .tree-head-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 加粗到 600：与 app 里"有分量的字"（真题卷集那三颗按钮 / 用户管理表头）同一档 */ .tree-head .tree-new-stage { white-space: nowrap; font-weight: 600; } /* 改名结果的那一行提示：常驻在树下面（不是浮层）—— 它同时兼作"现在处于编辑模式"的 可见反馈，浮 3 秒就收掉的话用户回头根本看不到改没改成。 */ .tree-notice { margin: 6px 10px 0; } /* 中栏、右栏标题格也跟同一条顶线（谁最高，--panel-head-h 就取谁；见 syncPanelHeadHeight）。 `.layout > section.panel` 就是中栏那一个（左树、右栏都是