#横幅通知

横幅通知位于客户端窗口顶部，以跑马灯滚动的方式展示自定义文字或天气预警信息。横幅高度可通过 CSS 变量 --banner-height 动态控制，不显示时高度为零，不影响课表布局。

#跑马灯滚动效果

横幅采用自定义 JavaScript 实现的跑马灯滚动动画，不依赖 CSS Animation API。核心参数和机制如下：

#滚动速度

文字滚动速度为每秒 80 像素，使用 requestAnimationFrame 驱动画面更新。此速度在文字较长时提供流畅的阅读体验，文字较短时不会过快掠过。

#双段无缝循环

横幅采用双段文本加间隔的设计实现无缝循环滚动：

1. 第一段文字（seg1）从右侧进入，向左滚动。
2. 第一段文字末尾添加四个不间断空格作为间隔。
3. 第二段文字（seg2）紧接间隔后开始滚动。

当第一段文字完全滚出左侧视野时，滚动偏移重置，实现首尾衔接的无缝循环效果。两段文字内容和格式完全相同，视觉上无法分辨滚动周期的起止点。

#短文字居中

当横幅文字总宽度小于容器宽度（无需滚动即可完整显示）时，自动切换为居中静态显示模式，移除滚动轨道，直接应用 CSS text-align: center。

#内容变化响应

横幅通过 MutationObserver 监听 DOM 内容变化。当横幅文字在运行时被更新时，滚动动画自动重启以适配新的文字长度。这一机制支持天气预警与普通横幅之间的动态切换。

#横幅隐藏

当横幅文字为空字符串时，横幅自动隐藏。隐藏操作包括：

• 设置 display: none 移除横幅 DOM 的可见性。
• 停止跑马灯滚动动画，释放 requestAnimationFrame 资源。
• 设置 --banner-height CSS 变量为 0，确保课表布局不受影响。

当横幅文字从空变为非空时，上述操作反向执行：恢复 --banner-height 为默认值、显示 DOM、启动跑马灯动画。

#天气预警替代横幅

横幅支持被极端天气预警内容替代，此功能由管理端的两个开关联合控制：

• weather_alert_override：是否启用天气预警替代。当此开关开启时，客户端优先使用天气预警文字作为横幅内容；当预警数据不存在或此开关关闭时，回退为普通的 banner_text。
• weather_alert_brief：预警显示模式。开启时使用简略预警标题，关闭时使用详细预警描述。

预警替代行为在两种场景下触发：

1. 客户端收到新的天气数据（包括预警信息）时，自动调用 setBanner 重新评估横幅内容。
2. 用户在管理端修改 weather_alert_override 或 weather_alert_brief 配置后，客户端通过 WebSocket 或轮询收到新配置，根据缓存的最后一份天气数据重新计算预警文字。

#管理端配置

横幅相关配置集中在管理端"通用设置"页面：

修改以上配置后，客户端将在数秒内（WebSocket 模式）或下一个轮询周期（Serverless 模式）内同步更新横幅显示。在 WebSocket 断开的情况下，客户端会保持最后已知的配置状态。