AIRI 舞台 UI 焕新实录：纯 CSS 波浪动画与自定义主题色的工程实现-北京尧图网络

AIRI 舞台 UI 焕新实录纯 CSS 波浪动画与自定义主题色的工程实现【免费下载链接】airi Self hosted, you-owned Grok Companion, a container of souls of waifu, cyber livings to bring them into our worlds, wishing to achieve Neuro-samas altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airi本篇技术指南围绕 AIRIProject AIRI自托管的 AI 伴生桌面项目2025 年 3 月 10 日发布的一篇开发日志展开系统复盘了这次舞台 UI 与设置 UI 风格重构背后落地到仓库中的三项核心技术新一代设置界面的视觉升级、用纯 CSS 实现的舞台波浪动画以及让舞台与 Logo 可以整体换肤的动态主题色体系含RGB ON全光谱动态模式。读完本文你将理解这些功能在 packages/stage-layouts 与 packages/stage-ui 中的真实实现细节、可复用的参数与调用链并了解仓库为简化构建而将独立包剥离到proj-airi组织背后的工程思路。背景一次 UI 风格的灵光一现根据开发日志的记述3 月 7 日周五作者一直在尝试为 AIRI 舞台 UI 与设置 UI 构思新风格直到当天开发直播结束时灵感才浮现。从 3 月 7 日开始团队着手实现新的设置 UI并在接下来几天内取得了快速进展。参与这次迭代的贡献者包括 LemonNekoGH、sumimakito、kwaa、luoling8192 与 junkwarrior87 等。在仓库中这些 UI 的最终落点主要分布在packages/stage-layouts/src/layouts/settings.vue设置页的整体布局框架packages/stage-ui/src/components/scenarios/settings设置项组件模型设置、预览舞台等packages/stage-pages/src/pages/settings设置页面的业务编排模块packages/i18n/src/locales/zh-Hans/settings.yaml与设置相关的多语言文案该语言目录下同时存在 en、ja、ko、es、fr、ru、vi 等对应文件说明设置界面本身是完整国际化的。新设置 UI从基础版本到点状节奏感开发日志记录了设置 UI 的两次关键视觉迭代基础版本new-ui-v1由作者首先完成设置设计的基础版本呈现了全新的菜单结构点状按钮效果new-ui-v2随后 sumimakito 上线帮忙为按钮实现了点状效果dotted effect让菜单在视觉上获得了更强的节奏感。现在我们能从菜单中感受到更多的节奏感对吧这种点状视觉语言与舞台整体的氛围相互呼应。值得注意的是这些 UI 组件并非一次性完成而是经过多轮 PR 持续打磨——开发日志特别提到最终成果依赖一组连续的提交记录PR #53、#60、#61、#63 等涉及颜色自定义PR #54、#55、#65 等涉及波浪动画。仓库瘦身把独立包迁往 proj-airi 组织在重构 UI 的过程中团队发现packages/目录下有一部分包实际上是独立的包并不在 Project AIRI 的核心工作流中。把它们继续留在主仓库会无谓地增大仓库的安装体积、拖慢构建流程因此团队决定将这些包迁移到新注册的 GitHub 组织proj-airi下。首批迁移的公开仓库包括webai-examples用于制作 WebGPU 及相关内容的演示lobe-iconsLobe Icons 的移植版本面向 Iconify JSON 与 UnoCSS 使用。这两个仓库保持开源并沿用 MIT 许可证。仓库内也能找到这次组织拆分留下的痕迹例如 packages/stage-layouts/src/composables/theme-color.ts 中直接以proj-airi/stage-ui/libs、proj-airi/stage-ui/stores/settings的形式引用stage-ui包——即stage-ui这类被广泛复用的包已经以proj-airi作用域发布与主仓库解耦。可以推断这样的拆分让stage-ui等包可以被 AIRI 之外的 Web 应用如stage-web、ui-server-auth等独立消费同时主仓库自身只保留与其业务强相关的代码从而精简依赖图与构建链。纯 CSS 波浪动画从不可能到太疯狂了3 月 8 日junkwarrior87 上线并帮助团队用纯 CSS制作了舞台上的波浪动画。开发日志感叹这简直太疯狂了我从来没想到这居然能实现。这一实现的最终形态可以在 packages/stage-layouts/src/components/Backgrounds/default/part-animated-wave.vue 中找到。组件参数一览该组件是一个高度可配置的波浪背景单元对外暴露了以下 Props均带默认值参数类型默认值说明heightnumber40波浪主体高度像素amplitudenumber14波幅即波浪起伏的最大幅度像素waveLengthnumber250单个完整波周期的像素长度fillColorstringoklch(95% 0.10 var(--chromatic-hue))波浪的填充颜色directionup \| downdown波浪拱起的方向movementDirectionleft \| rightleft波浪滚动的方向animationSpeednumber50动画速度像素/秒实现原理正弦波路径 mask-image 技巧组件通过generateSineWavePath()以 1px 为步长逐点生成 SVG 正弦波路径先用Math.ceil(width / waveLength)计算需要铺满宽度的完整波数再以Math.PI * 2 / waveLength作为相位因子逐点计算amplitude * Math.sin(factor * x)的纵向偏移最终闭合路径形成可填充的区域。根据direction的不同基准 Y 坐标与闭合边会相应调整从而决定波浪是向上还是向下拱起。真正的关键在于填充色的控制SVG 作为background-image时无法直接修改内部 fill 颜色因此组件采用mask-image方案——先把正弦波路径编码为 data URL SVG 作为遮罩再让一个普通 div 以fillColor作为background被遮罩裁剪出波浪形状。这样填充色就完全交给 CSS 变量与主题体系驱动实现了同一个波浪、随主题变色的效果。动画本身则是一段纯 CSS 关键帧波浪层宽度设为200vw配合mask-repeat: repeat-x横向平铺keyframes wave-animation让元素从translate(0)平移到translate(var(--wave-translate))其中--wave-translate恰好是-waveLength平移一个整周期后无缝衔接--animation-duration由waveLength / animationSpeed计算得出当movementDirection为right时通过animation-direction: reverse反转滚动方向。波浪与主题色的联动在 packages/stage-layouts/src/components/Backgrounds/default/index.vue 中波浪被叠加在PatternCross交叉纹理之上并且明暗模式的填充色都直接引用主题色变量暗色模式oklch(35% calc(var(--chromatic-chroma) * 0.6) var(--chromatic-hue))亮色模式color-mix(in srgb, oklch(95% calc(var(--chromatic-chroma-50) * 0.5) var(--chromatic-hue)) 80%, oklch(100% 0 360))也就是说波浪的颜色由全局 CSS 变量--chromatic-hue色相与--chromatic-chroma饱和度统一决定——这正是下一节自定义主题色能够从设置面板一处改动、全舞台即时生效的底层机制。舞台颜色自定义几小时完成的惊喜3 月 8 日临近结束时LemonNekoGH 和 junkwarrior87 完成了整个舞台的颜色自定义功能开发日志感叹我从来没想过这能在短短几个小时内完成。更让人惊喜的是连 Logo 也能跟随自定义颜色变化。主题色状态OKLCH 色相即主题主题色状态集中在 packages/stage-ui/src/stores/settings/theme.ts 中实现思路非常简洁——整套主题只由一个色相值驱动DEFAULT_THEME_COLORS_HUE 220.44默认主题色相偏蓝themeColorsHue持久化在localStorage的settings/theme/colors/hue键下保存当前色相数值themeColorsHueDynamic持久化在settings/theme/colors/hue-dynamic键下标记是否开启动态RGB ON模式setThemeColorsHue(hue)写入色相并自动关闭动态模式applyPrimaryColorFrom(color)借助culori的converter(oklch)将任意颜色字符串转换为 OKLCH再提取其h值作为主题色相实现从任意颜色一键取色isColorSelectedForPrimary(hexColor)把候选色也转为 OKLCH 后与当前色相比较容差为hueDifference 0.01 || hueDifference 359.99即色相相同或恰好首尾相接若处于动态模式则一律返回false因为此时没有任何手动选中的预设色。选择 OKLCH 而非 hex/RGB 是有意为之OKLCH 将色相与明度、饱和度解耦使只改色相、不动明暗层次成为可能从而保证无论用户选什么颜色界面的明暗对比与材质层次都保持稳定。CSS 变量如何驱动全舞台色相值最终以 CSS 变量--chromatic-hue以及配套的--chromatic-chroma、--chromatic-chroma-50等的形式注入组件树例如 packages/stage-ui/src/constants/inject.ts 定义了chromaticHue注入键packages/stage-ui/src/libs/color-from-element.ts 中也会读取--chromatic-hue默认回退到200。波浪填充色、交叉纹理pattern-cross.vue 中的--cross-color都引用同一组变量因此一处改色、全局生效。Logo 跟随变色则更有意思packages/stage-layouts/src/components/Layouts/HeaderLink.vue 对 Logo 应用了filter: hue-rotate(calc(var(--chromatic-hue, 0) * 1deg))——直接利用 CSS 的hue-rotate滤镜把 Logo 的每个像素沿色相环旋转--chromatic-hue度从而让 Logo 与当前主题色保持一致无需准备多套 Logo 素材。浏览器主题色meta theme-color的实时同步为了让浏览器标签栏/地址栏的theme-color也与舞台保持一致packages/stage-layouts/src/composables/theme-color.ts 提供了一套完整的同步机制useThemeColor(colorFrom)从颜色提供函数取值经colorjs.io转为 sRGB hex 后写入meta[nametheme-color]对于波浪背景通过themeColorFromPropertyOf(.widgets.top-widgets .colored-area, background-color)直接读取舞台上波浪实际渲染出的background-color确保浏览器主题色与所见即所得对于图片背景使用colorFromElement基于 html2canvas 克隆采样采样区域为顶部 140px、步长 10px、缩放 0.5计算平均色当背景为波浪且开启动态色相时用useIntervalFn以250ms 间隔刷新theme-color——注释明确说明这是为了在不做逐帧渲染的前提下让动画波浪背景的 theme-color 保持新鲜。完整的动态效果可查看仓库内的演示视频customizable-theme-colors.mp4。RGB ON让色相在整个光谱中闪耀颜色自定义的最后一块拼图来自 PR #64 保留的功能我想要动态的——开发日志把它形象地称为RGB ON模式色相在整个 RGB 光谱中连续变化。这一能力此前由 LemonNekoGH 演示最终由 junkwarrior87 保留进主题体系。从源码看RGB ON 的开关正是themeColorsHueDynamic当它为true时isColorSelectedForPrimary恒返回false没有固定选中色而色相值会随时间持续变化useBackgroundThemeColor中的 250ms 定时同步器也仅在波浪背景 themeColorsHueDynamic组合下启用驱动theme-color跟随色相环滚动。可以推断动态模式下--chromatic-hue由一个持续递增的动画/定时器驱动波浪、纹理、Logo 乃至浏览器主题色因此得以像呼吸灯一样在完整色相环上循环——这正是RGB ON名字的由来。结语三天的协作成果回顾这次迭代3 月 7 日确定新设置 UI 风格3 月 8 日完成纯 CSS 波浪动画与整个舞台的颜色自定义含动态 RGB 模式期间还完成了独立包向proj-airi组织的迁移以精简主仓库。这些改动背后是 stage-layouts 中组件 composable CSS 变量的分层设计part-animated-wave.vue提供可参数化的波浪基元theme-color.ts提供主题色同步管线settings/theme.ts提供以 OKLCH 色相为核心的轻量状态管理。无论读者是想复刻同样的波浪动画、搭建可换肤的舞台系统还是设计一个变量控制全局主题的架构这份实现都提供了可直接参考的范本。开发日志最后也表示AIRI 对所有人开放且友好即使是编程新手也欢迎参与贡献。【免费下载链接】airi Self hosted, you-owned Grok Companion, a container of souls of waifu, cyber livings to bring them into our worlds, wishing to achieve Neuro-samas altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

AIRI 舞台 UI 焕新实录：纯 CSS 波浪动画与自定义主题色的工程实现

相关推荐

Python量化交易回测系统源码拆解：从ETF轮动到随机森林策略

机器视觉循迹小车：从HSV分割到双环PID的闭环实现

HDFS存储模型与云盘工程实践：块大小、副本策略及调优

更多资讯

Unity WebGL与JavaScript双向通信实战指南

Bazel Labels 全面解析：从规范形式到词法校验的权威指南

Humanizer：让AI对话更自然的NLP技术解析

人机协作新范式：AI论文网站测评与2026最新推荐

基于SpringBoot的校园失物招领管理系统平台(源码+lw+部署文档+讲解等)

AIRI 舞台 UI 焕新实录：纯 CSS 波浪动画与自定义主题色的工程实现

今日更新

SpacetimeDB C++ 模块库实战：用 C++20 在数据库内构建 WebAssembly 模块

别踩雷！不是所有 AI 写作工具都靠谱，2026 高校认可工具精选

SSM+MySQL幼儿园管理系统源码解析：从部署到优化

本周精选

超人会飞不算本事：系统稳定依赖清晰规则与边界设计

超人VS蜘蛛侠：拆解超级IP的影响力与传播方法论

基于CNN的调制信号识别：MATLAB实现时频图分类实战

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？