/* 创建类页面：左栏 / 内容栏分离，各自独立滚动（电商专区那套） ============================================================ 🔴 用户要求：「电商专区，控制面板栏和内容栏是分开的。 图片创作、音乐、视频、图片编辑等所有区域都是一起的，需要分开， 做成电商专区的样式，互不牵扯。」 ★ 根因（我读过现有 CSS 后确认的）： body[data-page="image"] .tool-card { min-height: calc(100vh - 210px); } ↑ 只是"至少一屏高"，内容多了卡片就跟着长高 ⇒ 整页滚动 ⇒ 左栏被内容栏带着一起走（"牵扯在一起"）。 ★ 电商专区为什么是分开的（见 ecommerce.html 的注释）： 1) .page-content { overflow: hidden } 页面本身不滚 2) main { height:100%; flex column } 撑满可用高度 3) 分栏容器 { flex:1; min-height:0 } 吃掉剩余高度 4) 左栏 { height:100%; flex column } 整栏不滚，内部再分段滚 5) 右栏 { height:100%; overflow-y:auto } 自己滚，和左栏无关 ⇒ 关键是【把整条高度链锁死】，页面不滚，滚动条只在两栏内部。 ⚠️ 只在 >=1281px 生效（和电商专区同一个断点）： 窄屏上左右并排本来就挤，还是上下堆叠 + 整页滚动更合理。 ⚠️ 全部用 body[data-page=...] 限定，只影响这几个页，不碰别处。 ⚠️ 覆盖范围【不是 5 个页结构相同】—— 我第一版注释就是这么写的，是错的： · index / music / video / edit → .tool-card > .tool-panel > .studio-side|.studio-stage ✓ 同一套 · text.html → 完全另一套（glass-effect > grid > 输入栏 + #tx-stage） 所以 text.html 单独一段规则（见文件末尾）。 ⚠️ 教训：写"它们结构一样"之前要【真的逐个查过】， 我这次是靠 grep 数了 class 出现次数才发现的。 （用户实测反馈见文件底部【v2.645 追加】那一段） ============================================================ */ @media (min-width: 1281px) { /* 0) ★★ 把整条高度链的【第一环】定住 —— 这是我 v2.640 漏掉的 ------------------------------------------------------------------ 🔴 为什么上一版没生效（用户实测："你没分开，两边上下滚动互相牵扯"）： .app-shell { min-height: 100vh; align-items: flex-start; } ↑ 这一条让 .main-area 不再被拉伸 ⇒ 它的高度变成"内容高度" .page-content { flex: 1; min-width: 0; } ← 没有 height main { height: 100%; } ↑ 父元素没有【确定高度】⇒ 这个 100% 解析不出来 ⇒ 退化成 auto ⇒ 整条高度链断在第一环，卡片照旧随内容长高，页面整体滚动。 ★ 修法：不去逐层补 height（那样要求每一层都恰好对，很脆）， 直接把 .main-area 约束到【视口高度】—— 它本来就是"侧栏固定、只有内容区滚"的布局， 约束住之后 topbar + page-content 自动分配剩余高度。 ⚠️ 用 100dvh 而不是 100vh： 手机浏览器地址栏收放时 100vh 会变，会出现"底部被切掉一截"。 dvh 是动态视口高度，跟着变。不支持 dvh 的老浏览器会忽略这一行， 所以前面留一行 100vh 兜底。 ⚠️ overflow: hidden 是【必须】的： 没有它的话 .main-area 虽然定高了，里面的内容照样能把它撑出滚动条， 整页还是会滚（等于白做）。 */ body[data-page="image"] .main-area, body[data-page="music"] .main-area, body[data-page="video"] .main-area, body[data-page="edit"] .main-area, body[data-page="shop"] .main-area, body[data-page="voice"] .main-area { height: 100vh; height: 100dvh; overflow: hidden; } /* ★★★ v2.849：text 页【退出】工作台那套高度锁（用户报"内容显示不完"） ---------------------------------------------------------------------------- 🔴 用户实测：「没有下拉滚动条，内容显示不完」 （内容约 1000px、视口 884px ⇒ 底部的内容风格 / AI 小贴士 / 仿写结果全被切掉） ★ 全站桌面版的滚动设计（style.css L2492 那个 @media 块）： .app-shell / .main-area height:100vh + overflow:hidden ← 整页不滚 .page-content overflow-y: auto ← 【由它自己滚】 ⇒ 也就是说：**这个站每个页面都是"页面不滚、内容区内部滚"**，首页也一样。 ★ 根因：本文件给 7 个页面（图片/音乐/视频/文字/图片编辑/电商/配音） 额外加了一层 `.page-content { overflow: hidden }` —— 那是给 【工作台形态】用的（左右两栏各自内部滚，所以外层要锁死）。 ⚠️ 但 text.html 已按新设计（文案仿写助手）重写：左栏表单 + 右栏引导栏 + 结果区在下方 —— 内容本来就会比一屏高，需要【内容区自己滚】。 外层锁死 + 内层没人接管 ⇒ 谁都不滚 ⇒ 底部内容永久看不到。 ★ 修法：把 text 从那条 `overflow:hidden` 名单里移除， 让它回到**全站默认行为**（.page-content 自己滚）。 · 其余 6 个页面的名字一个字没动 ⇒ 布局完全不受影响 · text 回到和首页一致的滚动方式 ⚠️⚠️ 我在这件事上先走错过一次，记下来免得后人重犯： 一开始我以为"整页不能滚"是问题，就去把 .page-content 改成 overflow:visible、 指望文档级滚动接管。结果**正好相反** —— .app-shell 那层 overflow:hidden 会把溢出吸收掉，文档高永远等于视口高， 于是滚动条彻底消失、内容反而被切得更狠。 ⇒ 这个站的滚动条【本来就不在文档上】，在 .page-content 里。 要改滚动行为，改的是 .page-content，不是文档。 */ body[data-page="text"] .main-area { height: auto !important; overflow: visible !important; } body[data-page="text"] .page-content { /* ⚠️ 显式写成 auto（继承全站默认），而不是 visible —— visible 会让溢出"漏"到已经锁死的 .app-shell 上，等于把滚动条弄丢。 */ overflow-y: auto !important; overflow-x: hidden !important; } /* ★★★ v2.849：把"工作台"留在 text 页上的残留约束【全部盖掉】 ---------------------------------------------------------------------------- 🔴 排查过程写清楚，免得后人重走（我在这上面花了不少时间）： 症状：表单那张 section 的 height 只有 155px、overflow-y=hidden、 scrollHeight=1097 ⇒ 表单被压成一条，其余内容看不见。 依次查过（都没找到）： · 手工数花括号 / 注释 → 配平 · 翻遍所有 css 按选择器推 → 没有任何规则"该"命中它 · 遍历 document.styleSheets 并用 el.matches() 试 → "没有规则命中" · 问元素自己的内联 style → 只有 border-radius 最后定位：**就是本文件末尾那段 `:has(#tx-stage)` 里的三条规则**。 ⚠️ 为什么 `#tx-stage` 明明不存在、规则却像命中了一样： 我是【渲染中途】量的 `querySelectorAll('#tx-stage').length`（得 0）， 而这种"元素数 0"的测量【时机不可靠】—— 量早了什么都看不到。 ★ 教训：判据/诊断里"数量为 0"的结论，必须确认测量时机对。 ★ 结论：不再依赖 `:has()` 成立与否，**直接把这几条盖掉**。 用"同父级 + 更高权重"（`main.page-wide > section` 比 `> section` 多一个类名），而不是再加一个 !important —— 这条链上已经有两个 !important 在打架，再加只会让以后更难改。 */ body[data-page="text"] main.page-wide > section { flex: 0 0 auto !important; /* 不参与伸缩 ⇒ 按内容自然高 */ height: auto !important; min-height: 0 !important; overflow: visible !important; /* 不再切内容 */ display: block !important; /* 退回普通块级（原来被设成 flex column） */ } /* ⚠️ 只救外层不够：同段规则也把内部那层网格设成了 `flex:1 1 auto; min-height:0` —— 卡片不扁了、里面两栏仍会被压。 */ body[data-page="text"] main.page-wide > section > .grid { flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; align-items: start !important; } /* 1) 页面本身不滚 —— 否则左栏没有参照物，怎么摆都会被带走 */ body[data-page="image"] .page-content, body[data-page="music"] .page-content, body[data-page="video"] .page-content, body[data-page="edit"] .page-content, body[data-page="shop"] .page-content, body[data-page="voice"] .page-content { overflow: hidden; /* ⚠️ 有了上面 0) 的视口高度，这里 flex:1 就能真的分到剩余高度 */ min-height: 0; } /* ★ v2.849：text 页已从上面那份名单里移出（改由上面那段显式解锁）。 ⚠️ 这里【不要】再加 text —— 加了就等于又把它锁死（会把滚动条弄丢）。 */ /* 2) main 撑满可用高度，纵向 flex ★★ v2.645：顺便把左右边距对齐【电商专区】—— .zone-wrap（电商专区的 main）用的是 padding: 0.9rem clamp(0.375rem, 0.75vw, 1rem) 2rem 这里照抄同一组值（下限 0.9rem，不是 1rem）。 🔴 用户实测反馈过两次"还是不够宽"： 第一次是容器 max-width（v2.637 修了）， 第二次是卡片自己的 padding（上面第 3 条修了）， 这次是把下限从 1rem 收到 0.9rem —— 和电商专区【一字不差】。 ⚠️ 必须带 !important：layout-unify.css 用了 !important 设 1rem 下限， 不带的话压不住（这是实测的顺序/优先级问题）。 */ body[data-page="image"] .page-content > main, body[data-page="music"] .page-content > main, body[data-page="video"] .page-content > main, body[data-page="text"] .page-content > main, body[data-page="edit"] .page-content > main, body[data-page="shop"] .page-content > main, body[data-page="voice"] .page-content > main { flex: 1 1 auto; height: 100%; min-height: 0; display: flex; flex-direction: column; padding-bottom: 0; padding-left: clamp(0.375rem, 0.75vw, 1rem) !important; padding-right: clamp(0.375rem, 0.75vw, 1rem) !important; } /* 3) 工具卡片吃掉剩余高度，且【不许再长高】 ⚠️ 这条是整件事的关键： 原来的 min-height: calc(100vh - 210px) 会让卡片随内容长高， 于是永远整页滚动。这里改成 height:100% + overflow:hidden， 把"长高"的路堵死 —— 内容只能在自己那一栏里滚。 ⚠️ 用 !important 覆盖原来那条 min-height（它在同一文件更早的位置， 但两条都要能压住；用 !important 比调顺序更不容易以后被改坏）。 */ body[data-page="image"] .tool-card, body[data-page="music"] .tool-card, body[data-page="video"] .tool-card, body[data-page="text"] .tool-card, body[data-page="edit"] .tool-card, body[data-page="shop"] .tool-card, body[data-page="voice"] .tool-card { flex: 1 1 auto; height: 100%; min-height: 0 !important; overflow: hidden; /* ============================================================ 🔴🔴 v2.649：这里【必须】给回左右内边距 —— 我 v2.645 把它设成 0， 结果把内容切掉了。用户实测反馈：「你看你把边切掉了，字都差点没了」， 截图里「生图指令」的标题和「立即生成」按钮【紧贴卡片边缘】， 左侧整条都被切进去。 ------------------------------------------------------------ ★ 我 v2.645 的思路错在哪： 用户说"还差一点点没铺满" ⇒ 我以为卡片自己的 padding 是多余的， 于是归零、把间距交给外层 main。 ⚠️ 但卡片的 padding 不只是"间距"——它是【内容的安全边界】。 归零之后，卡片里所有东西（标题/字段/按钮）都顶到圆角边上， 圆角本身还会视觉上切掉一部分 ⇒ 看着就是"字被切了"。 ★ 正确做法（兼顾"铺满"和"不切内容"）： 1) 等宽两栏仍然从卡片边缘开始 —— 那是【铺满】的部分 ✓ 2) 卡片内部留出足够内边距 —— 那是【不切内容】的部分 ✓ 这两件事不冲突：铺满看的是"卡片有多宽"，不是"内容贴不贴边"。 ⚠️ 值用 1.25rem / 1.5rem，而不是原来的 p-4/sm:p-5(1rem/1.25rem)： 因为我自己砍掉过一轮，视觉上已经"紧"过一次， 这次给足一点（和电商专区左栏卡片的手感对齐）。 ⚠️ 不写死 sm: 断点：那个前缀的类【只靠 Tailwind CDN】定义 （我查过 tailwind-lite.css：sm:p-5 / sm:p-6 / sm:px-6 都没有）， CDN 不可达时那些类全部失效 ⇒ 间距会突然消失。 这里是项目自己的 CSS，不依赖任何 CDN。 ============================================================ */ padding-left: 1.25rem !important; padding-right: 1.25rem !important; } @media (min-width: 640px) { body[data-page="image"] .tool-card, body[data-page="music"] .tool-card, body[data-page="video"] .tool-card, body[data-page="text"] .tool-card, body[data-page="edit"] .tool-card, body[data-page="shop"] .tool-card, body[data-page="voice"] .tool-card { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } } /* 4) 面板撑满卡片剩余高度 */ body[data-page="image"] .tool-card > .tool-panel:not(.hidden), body[data-page="music"] .tool-card > .tool-panel:not(.hidden), body[data-page="video"] .tool-card > .tool-panel:not(.hidden), body[data-page="text"] .tool-card > .tool-panel:not(.hidden), body[data-page="edit"] .tool-card > .tool-panel:not(.hidden), body[data-page="shop"] .tool-card > .tool-panel:not(.hidden), body[data-page="voice"] .tool-card > .tool-panel:not(.hidden) { flex: 1 1 auto; min-height: 0; } /* 5) ★★ 左栏：整栏【不滚】，内部 .studio-side-scroll 自己滚 ⇒ 顶部标题和底部「立即生成」永远固定，只有中间的字段列表滚动。 ⇒ 右栏内容再长也不会把左栏带走。 */ body[data-page="image"] .tool-panel > .studio-side, body[data-page="music"] .tool-panel > .studio-side, body[data-page="video"] .tool-panel > .studio-side, body[data-page="text"] .tool-panel > .studio-side, body[data-page="edit"] .tool-panel > .studio-side, body[data-page="shop"] .tool-panel > .studio-side, body[data-page="voice"] .tool-panel > .studio-side { height: 100%; min-height: 0; overflow: hidden !important; /* 覆盖早期「整列滚动」的规则 */ } /* 6) ★★ 右栏（内容/作品区）：自己滚，和左栏互不牵扯 */ body[data-page="image"] .tool-panel > .studio-stage, body[data-page="music"] .tool-panel > .studio-stage, body[data-page="video"] .tool-panel > .studio-stage, body[data-page="text"] .tool-panel > .studio-stage, body[data-page="edit"] .tool-panel > .studio-stage, body[data-page="shop"] .tool-panel > .studio-stage, body[data-page="voice"] .tool-panel > .studio-stage { height: 100%; min-height: 0; overflow-y: auto; /* ⚠️ overscroll-behavior:contain —— 滚到尽头时不要把滚动"传"给页面， 否则会出现"滚到底整页跟着跳一下"的廉价感。 */ overscroll-behavior: contain; scrollbar-width: thin; padding-right: .35rem; } } /* ⚠️ 窄屏（<1281px）保持原样：上下堆叠 + 整页滚动。 强行分栏会让手机上左右各占一半、两边都看不清。 */ /* ============================================================ ★ text.html（文字创作）—— 它【不是】studio 那套结构 ------------------------------------------------------------ 实际结构： main.page-wide └ section.glass-effect └ div.grid.lg:grid-cols-2 ← 左输入 / 右结果 ├ div.flex.flex-col.gap-4 ← 左：输入栏（场景/模型/需求/按钮） └ div（含 #tx-stage） ← 右：生成结果 ⚠️ 我一开始以为它和图片创作一样（都是 .tool-card > .tool-panel）， 数了一下 class 才发现 tool-card=0 —— 差点写了一条永远不生效的规则。 ⚠️ 用 :has() 精准命中"含 #tx-stage 的那一栏" —— 比按 :last-child 稳（以后前面再插一栏也不会指错）。 :has() 现代浏览器都支持；不支持的浏览器上这条规则整条失效， 【退化成现在这样（整页滚动）】—— 不会把页面搞坏，可以接受。 ⚠️ 只给右栏滚动，左栏不锁死： 文字创作的左栏不长（几个输入框），锁死反而在窄一点的屏上挤。 ============================================================ */ @media (min-width: 1281px) { /* ⚠️⚠️ v2.849：这一整块【必须】带上 `:has(#tx-stage)` 作用域。 ---------------------------------------------------------------------------- 🔴 用户实测：「没有下拉滚动条，内容显示不完」 （截图：页面内容约 1000px、视口 884px，底部内容风格/小贴士/结果全被切掉） ★ 根因（是我重写页面时踩的）： 上面那段注释写明了这套规则认的是【老结构】—— 左输入栏 + 右栏（右栏里含 #tx-stage） 而我按新设计把右栏改成了"引导栏"、结果区挪到了下方 ⇒ **#tx-stage 这个元素不存在了** ⇒ 靠它命中的规则失配。 ⚠️ 但下面这一条是【无条件】的： .page-content { overflow: hidden } ⇒ 页面被锁成一屏高【整页不能滚】， 而本该接管滚动的右栏（那条 :has(#tx-stage) 规则）又失配 ⇒ 谁都不滚 ⇒ 底部内容【永久看不到】。 ⚠️ 这比"某一栏被切"严重：整页失去滚动能力。 ★ 修法：给这一整块加 :has(#tx-stage) 作用域 —— · 老结构（有 #tx-stage）⇒ 规则照旧生效，行为一点不变 · 新结构（没有 #tx-stage）⇒ 整块失效 ⇒ 回退到 **整页滚动**（就是手机端一直在用的那套，已经验证没问题） ⚠️ 为什么不是"删掉这块"：其它页面/历史结构可能还在用； 加作用域是【最保守】的改法 —— 不生效时什么都不做， 而不是把别人的布局改掉。 ⚠️ 如果以后有人把 #tx-stage 加回来，这块会自动复活 —— 所以注释里写清"它认的是老结构"，别再被同一个坑绊第二次。 */ body[data-page="text"]:has(#tx-stage) .page-content { overflow: hidden; } body[data-page="text"]:has(#tx-stage) .page-content > main { height: 100%; display: flex; flex-direction: column; min-height: 0; padding-bottom: 0; } body[data-page="text"]:has(#tx-stage) .page-content > main > section { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; } body[data-page="text"]:has(#tx-stage) .page-content > main > section > .grid { flex: 1 1 auto; min-height: 0; align-items: start; } /* 右栏（含 #tx-stage 的那一栏）：自己滚 */ body[data-page="text"] .page-content > main > section > .grid > *:has(#tx-stage) { height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } }