Project AIRI 开发日志深度解析：gpuu GPU 工具、品牌视觉迭代与 UI 转场动画实践

Project AIRI 开发日志深度解析：gpuu GPU 工具、品牌视觉迭代与 UI 转场动画实践

【免费下载链接】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-sama's altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airi

本篇技术指南以 Project AIRI（ai/airi 仓库）2025 年 3 月 5 日的开发日志为主线，拆解三个相互独立又彼此呼应的实践主题：面向 WebGPU 的gpuu工具包如何接入项目、Project AIRI 品牌标志从初稿到定稿的视觉迭代方法论，以及如何将 YouTube 上令人着迷的文字 PV 动画效果移植为可复用的 Vue 转场组件库。读完本文，你将掌握gpuu/webgpu的调用方式、标志设计在深浅主题间的配色取舍思路，以及@proj-airi/ui-transitions中基于vue-router生命周期钩子的转场编排原理与源码结构。

从 gpuu 开始：面向 WebGPU 的 GPU 工具包

日志开篇记录了gpuu（GPU 工具）包的诞生。这个新包用于帮助 Project AIRI 处理 WebGPU 相关功能，作者在日志中说明其当前功能还比较有限，但未来或许能借助它与真实的 GPU 设备交互——为后续的图形渲染能力（例如 Live2D、MMD、Three.js 舞台渲染）留出扩展空间。需要说明的是，gpuu是独立于本仓库发布的配套包，目前仓库内尚不包含其源码，其用法以日志记载为准。

日志给出了gpuu的完整调用示例，配合 Vue 组件生命周期使用：

import { check } from 'gpuu/webgpu' import { onMounted } from 'vue' onMounted(async () => { const result = await check() console.info(result) // 对结果进行一些操作 })

从这段代码可以提炼出几个实操要点：

• 按子路径导入：import { check } from 'gpuu/webgpu'说明该包采用子路径导出（subpath exports）设计，webgpu入口专门暴露 WebGPU 相关能力，便于按需加载。
• 异步检测：check()返回 Promise，在onMounted中调用是因为 WebGPU API 依赖浏览器环境与设备适配器（adapter），必须在 DOM 挂载、环境就绪后执行。
• 结果即数据：result是后续一切操作的基础——检测是否支持 WebGPU、设备能力等级、特性列表等，都可围绕它展开，日志注释"对结果进行一些操作"正是指向这一扩展方向。

品牌视觉迭代：从第一版设计稿到最终方案

日志的后半部分用一组连续图片记录了 Project AIRI 标志的完整设计流程，这是一次教科书式的"由繁入简、随主题演进"的视觉迭代。

第一版：企业设计师提交的初稿

上周，企业设计师/艺术家提交了 Project AIRI 标志的第一版设计稿：

缩放友好性重设计与深浅主题适配

从设计角度看，第一版标志在缩放到主屏幕应用图标大小时"过于复杂且不够友好"，因此作者重新设计了简化版（v2），并编辑了其他变体。不过这些版本都只适合深色主题，于是又补充了浅色主题版本。

@kwaa 随后提出一个关键建议：为两个主题互换配色方案（v3），即在浅色主题中使用深色主题的配色、反之亦然。作者评价"这确实看起来更好"——这背后是典型的品牌对比度策略：深色背景下需要高亮主体，浅色背景下则需要深色主体来维持视觉重量，互换配色能让同一套图形在两套主题下都保持辨识度。

此后又经历了两轮微调：更新字体排版（v4）与优化背景颜色（v5），最终定稿如下：

这条迭代链路（复杂度收敛 → 主题适配 → 配色互换 → 字体与背景打磨）完整继承了日志的记录，可以直接复用到任何需要同时支持深/浅主题的应用图标设计中。最终版标志与配色方案已整合进文档网站。

文档网站上线与内容建设

当天晚些时候，Project AIRI 将文档网站正式上线，为开发者与艺术家提供参考和指南。日志明确记录了网站已包含三块内容：基础指南、贡献指南以及设计指南。

在仓库中，这些内容与docs/content/zh-Hans/docs/目录下的文档对应：

• 基础指南：对应 docs/content/zh-Hans/docs/overview 与 docs/content/zh-Hans/docs/manual 等概览与操作手册；
• 贡献指南：对应 docs/content/zh-Hans/docs/contributing 目录；
• 设计指南：对应 docs/content/zh-Hans/docs/contributing/design-guidelines/index.md，从路径名即可确认"设计指南"确实是贡献规范中的一个独立章节。

同时，日志还提到已将 YouTube 文字 PV 动画的研究资源与网站链接收录进该文档网站，供开发者和艺术家查阅。值得一提的是，作者还维护了后续的 DevLog-2025.03.06，记录了这一系列工作的延续。

UI 转场动画研究：从文字 PV 到浏览器实现

日志记录了一个有趣的技术动机：作者花了一整个中午研究 YouTube 上的文字 PV（Promotion Video）动画效果，并"对这些动画非常着迷，希望能在浏览器中实现类似的过渡效果"。幸运的是，他认识一位在这方面非常出色的开发者兼艺术家 yui540，对方刚发布了一个专门展示精彩过渡效果实现的新仓库。

这个兴趣点在当天就转化成了实际产出：作者将 yui540 仓库中的大量动画过渡效果移植到了一个在线演示站，移植后的效果相当不错：

这条"研究 → 找对人 → 移植 → 演示"的路径，最终沉淀为仓库中的一个正式包@proj-airi/ui-transitions（包名为@proj-airi/ui-transitions，见 packages/ui-transitions/package.json），其定位是"Project AIRI 使用的一组场景淡入淡出 UI 转场动画集合"。

@proj-airi/ui-transitions 源码剖析：转场组件与生命周期编排

如果说日志记录的是"移植了多少效果"，那么仓库源码则展示了这套转场系统真正的工程化设计。以下是基于 packages/ui-transitions 源码的完整剖析。

七种转场组件

包通过 src/components/index.ts 统一导出七种转场组件：

这些时长与注册表定义在 StageTransitionGroup.vue 的transitions对象中。以ArrowTransition为例，其 CSS 实现直接使用clip-path多边形动画来制造箭头形状的遮挡/展开效果，代码注释明确标注了原作者与出处——"Author: yui540 / Source code at: github.com/yui540/css-animations..."（见 ArrowTransition.vue），与日志中"移植 yui540 仓库动画"的描述完全对应，这是移植来源的源码级佐证。

每个转场组件都支持统一的样式化参数。以BubbleWaveOutTransition（圆形波纹扩散）为例（BubbleWaveOutTransition.vue）：

• colors?: string[]：多层圆环的配色，默认['#eee', '#ebcb8b', '#c56370', '#3f3b52']，最多四层，每层通过 CSS 变量--circle-expansion-color-{n}注入，并以 0.15s 递增延迟形成波纹节奏；
• delay?: number：整体延迟，默认 0；
• duration?: number：单层扩散时长，默认 0.4s；
• zIndex?: number：覆盖层层级，默认 100。

ArrowTransition则提供primaryColor/secondaryColor双色与zIndex参数（默认#666/#ccc），动画依赖--sharpness: 40%控制箭头锐度。

StageTransitionGroup：与 vue-router 深度集成的生命周期引擎

真正核心的是StageTransitionGroup（StageTransitionGroup.vue），它将转场系统与vue-router的导航流程打通：

1. 路由元信息驱动：每个页面在路由meta.stageTransition中声明要使用的转场名称，例如 playground 中index.vue声明name: 'slide'（index.vue）、transition-2.vue声明name: 'slope-slide'（transition-2.vue）。
2. 全局导航守卫拦截：组件通过router.beforeEach读取目标路由的meta.stageTransition，并将组件 props（primaryColor、secondaryColor、tertiaryColor、colors、zIndex）合并覆盖到转场参数中，然后调用triggerTransition(stageTransition, next)。
3. 生命周期阶段钩子：系统定义了完整的转场生命周期，共七个阶段（StageTransitionGroup.vue）：
   • before-enter：动画开始前；
   • enter-active：入场动画已开始；
   • navigation：执行页面导航的时机（由组件决定何时调用next()）；
   • after-enter：入场动画完成；
   • before-leave：离场动画开始前；
   • leave-active：离场动画进行中；
   • after-leave：整个动画循环结束。
4. 可插拔 Hook 机制：addTransitionHook()注册钩子、triggerHooks()依次异步执行，导航动作通过一个临时注册的navigation阶段钩子触发next()；默认导航时机为duration / 3，也可通过nextDelay配置覆盖（StageTransitionGroup.vue）。系统还内置了容错：即使没有钩子响应，也会在超时后强制next()，保证导航绝不卡死（StageTransitionGroup.vue）。
5. Props 开关：disableTransitions可一键关闭所有转场，usePageSpecificTransitions允许页面使用自定义转场覆盖全局配置。

在线演示 Playground

包内附带完整可运行的演示应用（packages/ui-transitions/playground），共 7 个演示页面（/、/transition-2至/transition-7），通过Buttons.vue中的RouterLink导航网格串联（Buttons.vue）。切换页面即可逐一体验 7 种转场效果，这正是日志中移植工作的成果展示。运行方式为在包目录下执行pnpm play:dev（对应vite脚本，见 package.json）。

结语

这一篇开发日志的价值在于完整呈现了 Project AIRI 从基础设施到品牌再到体验层的三条并行工作线：gpuu为 WebGPU 能力铺路，标志迭代沉淀出深浅主题通用的视觉方案并整合进文档网站，而对文字 PV 动画的痴迷则直接催生了@proj-airi/ui-transitions这个工程化程度颇高的转场组件库——它有清晰的组件注册表、七阶段生命周期钩子、与vue-router的无缝集成以及可运行的 playground 演示。对读者而言，无论是想复刻类似的转场系统，还是借鉴"研究 → 移植 → 产品化"的开源协作路径，这份日志与其仓库源码都是值得对照研读的完整案例。

【免费下载链接】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-sama's altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airi