大屏应用的背景很容易从“氛围层”变成“事故层”：光斑边缘露出矩形边界、深浅色不一致，甚至装饰节点挡住按钮点击。听见课堂把大屏光场收敛为独立 LargeAuroraBackground 组件，并明确它只负责视觉，不参与输入。

一、背景组件的第一职责是退出业务

背景不应知道当前课程、字幕数量或任务状态。组件只接收 isDark，据此选择背景色与三组光场颜色。这样页面业务变化不会让装饰层重新承担状态判断。

@ComponentV2
export struct LargeAuroraBackground {
  @Param isDark: boolean = false;
}

二、先铺连续底色，再叠局部光场

最底层是 145 度线性渐变，从 LARGE_BACKGROUND_START 经过中间色走到结束色。它确保窗口任何位置都有连续底色，即使上层径向光斑变淡，也不会露出突兀纯色。

.linearGradient({
  angle: 145,
  colors: [[this.backgroundStart(), 0],
    [this.backgroundMiddle(), 0.48], [this.backgroundEnd(), 1]]
})

三、三组光斑各自承担不同重心

蓝色位于左上，青色位于右上，薄荷色位于下部。它们的宽高分别约为窗口的 42%×38%、38%×42% 和 54%×30%，形成非对称但平衡的视觉路径。

光斑不是固定像素图片，因此窗口变化时仍按比例覆盖，不会因 2in1 自由窗口缩放直接裁坏。

四、Peak、Soft、Clear 构成平滑衰减

每种颜色都不是单个不透明色，而是峰值、柔和色和全透明色三档。蓝色在 0 处最强，0.34 处变软，0.72 以后透明；青色和薄荷也使用相近但独立的停止点。

这种提前归零比让光斑一直延伸到容器边缘更安全，可减少矩形衰减边界。

五、blur 需要和透明停止点一起设计

三组光场使用 140、144 和 152 的模糊半径。大 blur 能消除硬边，但如果颜色在边缘仍不透明，模糊后仍可能出现一大片浑浊色块。

项目先把停止点衰减到透明，再用 blur 扩散，目标是连续环境光，而不是三个可辨认的圆。

六、暗色模式使用独立 Token

暗色背景是 #081B27 到 #0B2427 的深青蓝渐变，三组光场也改用更克制的 _DARK 与 _SOFT_DARK。这不是给浅色结果加黑色蒙层，而是重新控制峰值与透明度。

组件中的 bluePeak()、cyanSoft() 等方法把选择逻辑集中起来，Builder 保持清晰。

七、clip(true) 约束装饰边界

蓝色和青色光斑有负位置，薄荷色靠近窗口底部。没有裁剪时，模糊后的内容可能越出应用根容器，造成边缘脏影或影响相邻系统区域。

根 Stack 使用 .clip(true)，所有装饰只在应用自己的宽高内生效。系统桌面壁纸和窗口标题栏不属于这个组件的修改范围。

八、HitTestMode.None 是交互安全线

背景铺满 100% 宽高，视觉上位于内容下面，但仅靠层级并不足以表达“绝不接收输入”。组件显式设置：

.width('100%')
.height('100%')
.clip(true)
.hitTestBehavior(HitTestMode.None)

这样点击、触摸与指针事件会交给真正的页面控件，不会被透明装饰节点截获。

九、内容必须位于同一个根 Stack 的上层

Index.ets 先调用 auroraBackground()，再构建隐私页、手语页、沉浸页或大屏工作区。背景与内容共享根 Stack，绘制顺序清晰，业务区不需要知道光场内部有几层节点。

这也让手语页面能复用同一个大屏背景组件，而不是复制三组渐变。

十、性能判断不能只看代码漂亮

多层全屏渐变和大半径 blur 都可能增加 GPU 合成成本。当前项目已做构建和重点设备运行验证，但不能把几张流畅截图等同于长课堂性能结论。

若页面还叠加相机预览、实时字幕和动画，应观察帧率、功耗、温度与内存，并考虑降低模糊层数量或在低性能设备使用静态渐变降级。

十一、窗口往返是必要验收

首次在 1100vp 打开正常，不代表缩到约 835vp 再放回仍正常。验收要检查光场是否出现边界、内容是否残留旧尺寸、点击区域是否可用，以及暗色切换后是否存在闪烁。

背景连续性、输入穿透和布局恢复必须同时通过，才能说明组件真正适合自由窗口。

十二、总结

可靠的大屏背景由连续底色、提前透明的径向光场、容器裁剪和输入穿透共同组成。LargeAuroraBackground 的价值不只是好看，而是把视觉责任和交互责任分开。

下一篇讨论毛玻璃的三档材料：为什么 blur 越大不代表层级越高级，反而可能伤害字幕与正文可读性。