admin
d9445b5888
- oil-ui-pro 升到 0.22.2：references 13→28 份（新增 16、删 imagery.md）、assets 增 cards/（22 组）与 fonts/、SKILL.md 顶层五步结构未改名。 - 升级路径：官方 `npx github:oil-oil/oil-cli update` 稳定失败（error=replace、报「检查目录权限」）。 真身为 EXDEV —— 解压在 os.tmpdir()（C 盘）、技能目录在 E 盘，Windows 上 rename 不能跨盘； CLI 的 catch 把非 CliError 原生异常一律兜底成 replaceFailed，真错误一个字不吐。 做法＝借其 prepare() 只做下载+校验，再 cp 到同盘 stage、rename 交换；官方命令复验 up_to_date。 - 回归：product-planning 按名引用的 visual-review.md／tools.md／design-direction.md／style-explorer.md 全部健在；命名闸门 2061｜0｜27。 - session-mechanism/references/pitfalls.md 新增 P0-98（含通则：更新器把原生错误兜底成指错方向的人话）。
4.4 KiB
4.4 KiB
空间、滚动与浮层
页面怎样分配空间、谁负责滚动、任务放进弹窗、侧面板还是完整页面，以及菜单和浮层的行为。截图还原和布局的验证重点见 布局与视口。
先定空间责任
先定四件事：首屏的重点是什么，内容变多变少时怎么伸缩，哪一块负责滚动，主要操作放在哪里。用来做事的界面，尽量少让人做没必要的滚动；用来讲故事的页面，可以有意做长、做出节奏。不能为了挤进一屏，把文字和控件缩到难用。
分清四种区域：铺满整个宽度的背景，限制了宽度的正文，会跟着伸缩的区域，以及尺寸固定的控件。布局是由内容、父容器、比例和上下限一起决定的，不是把一整张设计图等比缩放成网页。
宽屏上，需要对照着看的信息可以并排；窄屏上，按做事的先后顺序重新排。要不要分栏，看内容之间的关系，不默认每个页面都是左边文字、右边图。
内容与伸缩
- 文字和会变的数据，让内容自己撑开尺寸。固定尺寸只用在图标、点击区域、图片和视频的比例，以及不该变的几何形状上，不是为了让眼前这张截图刚好装得下。
- 长名称和很宽的内容要能收缩、换行，或者只在自己那一块里滚动。网页里 Flex/Grid 的子项要允许收缩（最小宽高设为 0），否则长内容会撑破父容器；不用裁掉整页的办法来掩盖溢出。
- 图片要定好尺寸、怎么裁，以及主体不能被裁到的范围；后加载的内容先把位置留出来，免得加载完把按钮挤走。
- 把真实组件或页面放进固定大小的缩略窗口（组件目录、模板墙、样张）时，按内容的自然尺寸缩放进窗口，不要居中后让上下两头一起被裁掉。先保证宽度放得下；太高的内容缩到还能读的比例后顶端对齐，底部渐隐。随容器伸缩的组件在缩略窗口里没有自然宽度，会被挤成一列竖排字，要按真实使用时的宽度渲染再缩放。
- 检查响应式时，把项目支持的几种典型宽度都看一遍；断点设在内容开始排不下的那个宽度。不同宽度下可以重新排，不要求比例一模一样。
滚动由谁负责
每个表面只有一个主滚动区：应用外壳固定时，主内容区滚动；弹窗只有正文滚动；表格只在自身容器里横向滚动。确实需要分别浏览的面板才有自己的滚动，并且要有明确的尺寸和任务边界。
- 不让页面、内容区和弹窗同时滚动；不为溢出随手加
overflow: auto；不做没有独立任务边界的多层嵌套滚动。
选择承载方式
| 任务 | 承载 | 要点 |
|---|---|---|
| 短而自包含：确认、简短表单、预览加配置 | 弹窗 | 宽度随内容：确认用窄的，表单用中等，预览加配置用宽的或双栏 |
| 需要保持底层列表、表格或画布可见 | 侧面板 | 从当前对象出发的查看或编辑；关闭后回到原对象 |
| 多步骤、复杂创作、大量媒体，或需要两个以上主滚动区 | 完整页面 | 任务本身就是目的地，不是某页的附属动作 |
不在弹窗上再叠弹窗，需要第二层完整任务时升级为侧面板或页面。沿用项目已有的表面组件，不为一次需求另建一套。
弹窗固定分三段：
- 标题栏固定在顶部：标题、必要的对象身份和关闭入口。
- 正文占剩余空间，是唯一的滚动区。
- 操作栏固定在底部，跨满弹窗宽度：主操作在右，取消紧挨着它，危险确认单独隔开；计数或校验摘要放在左侧。
弹窗高度用“内容上限 + 动态视口高度”约束，不用固定高度。纯阅读的弹窗只留关闭入口。关闭或返回后，回到原来的位置和对象。
菜单与浮层
浮层贴着触发器出现，空间不足时翻转或平移，保留视口安全边距。它要渲染在能脱离裁切的层上，不被表格、弹窗或滚动容器截掉；页面滚动、容器滚动和窗口缩放后重新定位；触发器消失时关闭。长名称按对象身份的规则截断，不撑大浮层；内容超出下拉能清楚承载的范围时，改用弹窗或完整页面。单选选完即关，多选在点“完成”或点击外部时关闭。关闭后不留下遮罩、滚动锁或看不见的点击层。