aurora-admin
f1fbfc2ddb
Regression / regression (push) Canceled after 0s
## 品牌标识（本次会话） 起因：品牌此前没有任何图形标识 —— 唯一 favicon 是内联 data-URI 里的字母「A」， 那是 v2.0.0「Aurora Admin → Kole UI」改名漏掉的一处（PC 顶栏也是「A」， 移动端站已是「K」；移动端文档站则完全没有 favicon）。 - 几何：24 网格三个互不接触的笔画（竖 + 两斜），圆头描边； 描边 2.25 → 16px 标签页尺寸下正好 1.5px = 规范原文「描边1.5px」 - 取色分两套（刻意）：favicon 硬编码品牌蓝/白（渲染在浏览器标签栏，不继承 kole-dark）； 顶栏标记走 currentColor（实测暗色下自动转 rgb(20,22,28)） - 新增 theme-color 双条（light #FFFFFF / dark #1C1F26，取 --kole-color-card-bg） - 修 site/app.js hero 标语 KOLE ADMIN → KOLE UI（改名变形残留） - 移动端 7 个模板补 favicon（此前计数 0） 验收：门禁 9 条全 OK（site-routing/site-routes/mobile-docs/mobile-site/isolation/ theme/nav/i18n/icons）；PC 回归 1464/1464 · 移动端 807/807，各连跑 8 次一致； 两端 favicon 405 字节逐字节一致；PC 站控制台错误 1→0。 ## 并行会话成果（本次一并入库） - 图标系统：2576 图标（TDesign/Element Plus，MIT）+ 11 端注入 + 5 个构建门禁工具 + IconPreview 预览页 + ICON-SPEC.md 冻结规格 - 移动端平台：47 组件 × 6 端 + 文档站 53 页 + 隔离门禁 - PC 组件：103 个大后台组件 / 组件11 批次 - uni-app：PC 端试点 + 移动端端实现 + 真实编译验证 ## 工程 - .gitignore 补 .scratch/ 与 .zcode-preexisting-*.txt（会话中间产物，实测 9.1MB，不入库） - CHANGELOG 补品牌标识条目 - ROADMAP 登 S8-P4（品牌标识任务包 + og:image/apple-touch-icon 未做部分）
3.9 KiB
3.9 KiB
39 · 吸顶容器 Sticky
39.1 用途
让一段内容在滚动时贴住滚动容器的边缘保持可见（列表标题、分组、购物车合计条）。移动端与桌面端的关键差别是滚动惯性：桌面端滚动是离散的滚轮步进，用「监听 scroll + position: fixed」的 JS 方案看不出问题；触屏上滚动是带惯性的连续位移，fixed 方案会在惯性阶段出现一帧的抖动与跳位，且元素脱离文档流后原位置塌陷、必须手动补一个占位元素 —— 所以这里用 CSS 原生的 position: sticky，贴合由浏览器在合成层完成，不监听滚动。
39.2 结构（anatomy）
sticky：根元素，就是滚动内容流里的那一行（sticky 不脱离文档流，因此不需要占位元素）title：标题文字，单行省略，占满剩余宽度extra：右侧附加说明（数量、合计等），可选action：右侧动作按钮（原生button，热区 44px），可选
39.3 变体维度
position：top（贴顶，最常用）/bottom（贴底，合计条一类）safeArea：false（只用偏移量）/true（偏移量再叠加刘海或底部横条安全区）shadow：false（恒定无投影）/true（仅吸顶后才有投影，用于区分「贴住了」与「还在流里」）
39.4 状态
- default：未吸顶，正常参与文档流
- stuck：
is-stuck—— 已贴合边缘（加下边框 / 投影）。判定由宿主负责：贴合时机只有浏览器知道，组件不监听滚动
39.5 交互与触控
- 贴合位置由组件级变量
--kole-m-sticky-offset决定，默认等于导航栏高度；业务侧覆盖它即可适配自有导航（贴底用法通常覆盖为0px） safeArea=true时偏移叠加--kole-m-safe-top/--kole-m-safe-bottom：支持env()的浏览器拿到真实刘海高度，不支持的拿到0px（不会因非法值整条声明被丢弃）- 组件本身不监听滚动：
is-stuck由宿主按滚动位置切换。原因有两条 —— ① 贴合判定与滚动容器强绑定，组件无法知道自己在哪个容器里；② 逐帧读写滚动位置在移动端会挤占合成线程，原生 sticky 已经把这件事交给浏览器 - 触屏热区：整条高度 ≥ 44px；右侧动作按钮自身撑满 44px，负外边距吸收不撑高栏体
position=bottom时吸顶后的描边换到上边（视觉上仍是「靠内容那一侧」的分隔）- 不响应长按、双击与横滑：吸顶条不是可拖拽元素（拖拽排序不在本组件范围内）
39.6 无障碍
- 根是普通容器，标题文字正常参与读屏朗读；
is-stuck是纯视觉增强，不添加任何aria-*（吸顶不是状态变化，播报它只会打断用户） - 右侧动作是原生
button，名称由可见文字承担；装饰性图形必须aria-hidden="true" - 吸顶不改变文档顺序：读屏与键盘的遍历顺序与未吸顶时完全一致（这也是不用
fixed的另一个理由 ——fixed会它把挪出正常流，键盘聚焦时的滚动定位会跳） prefers-reduced-motion下不引入任何过渡（组件本身不加动效，此处显式声明避免宿主样式穿透）
39.7 doNotInvent
- 吸顶触发的位移/缩放动画（如标题从大字缩成小字）—— 规格只定义了贴合，没有定义形态演变
- 多个吸顶条的层叠顺序与相互推挤（层叠上下文规则由宿主决定）
- 进入/离开视口时的埋点事件与曝光统计
- 拖拽排序与吸附
39.8 unknowns
- 吸顶判定是否应由组件内部提供一个可选的滚动监听辅助（当前完全交给宿主）
- 是否需要在吸顶时自动隐藏相邻内容（当前不做，靠宿主布局）
- 贴底形态在内容不足一屏时是否应始终贴底（当前 sticky 语义下会贴着容器底，未做额外分支）