企业官网建设流程全解析

AIRI 开发日志（2025.03.05）深度解读：WebGPU 工具包、品牌 Logo 迭代与 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-sama's altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airi

这篇技术指南基于 Project AIRI 仓库中的 DevLog-2025.03.05 开发日志展开，还原当日四项关键工作：新增面向 WebGPU 的gpuu工具包、AIRI 品牌 Logo 的多轮设计迭代、官方文档站上线，以及把社区优质 CSS 动画移植进ui-transitions过渡动画包。读完本文，你将掌握gpuu/webgpu的调用方式、Logo 从初稿到定稿的完整打磨思路，以及ui-transitions包的组件结构、生命周期状态机和路由级联动机制，可直接在仓库中对照源码继续深入。

gpuu：面向 WebGPU 的 GPU 工具包

开发日志提到，开发者在 2025 年 3 月 4 日新增了一个名为gpuu（GPU Utilities）的包，用于辅助处理 WebGPU 相关功能，未来甚至可能用它直接与真实 GPU 设备交互。从日志的描述看，这个包当前能做的事情还比较有限，更多能力会在后续版本中逐步补充。

日志给出了最基础、也最具代表性的用法——在 Vue 组件挂载时执行 WebGPU 能力检查：

import { check } from 'gpuu/webgpu' import { onMounted } from 'vue' onMounted(async () => { const result = await check() console.info(result) // 结果に対して何らかの操作を行う（对结果做进一步处理） })

这段代码有三个值得注意的实践点：

• 按子路径导入：gpuu/webgpu表明该包采用子路径导出（subpath exports）组织模块，将 WebGPU 相关能力与包的其他部分隔离，便于 Tree-shaking 和按需加载；
• 异步 API：check()返回 Promise，说明 GPU 能力探测（如navigator.gpu是否存在、设备是否可用）属于异步操作，需要等待浏览器返回结果；
• 挂在生命周期中执行：在onMounted中调用，确保 DOM 与浏览器环境就绪后再探测，避免在 SSR 或初始化阶段误判。

日志中"未来可能与真实 GPU 设备交互"的表述，结合check()这类探测函数的存在，可以推断该包的设计目标是先解决"浏览器环境能否用 WebGPU"这个前置问题，再逐步扩展到设备枚举、适配器/设备选择等更深层能力。如果要在自己的项目里引入，直接在依赖中声明gpuu，然后按上述方式导入即可。

品牌视觉迭代：AIRI Logo 从初稿到定稿

日志的第二条主线是品牌视觉重塑。上一周企业设计师/艺术家提交了 Project AIRI Logo 的第一版设计方案，但日志作者在"白天的作业"中敏锐地发现了一个常见的设计问题：这些 Logo 缩放到主屏幕 App 图标尺寸时，细节过于复杂、缺乏亲和力。

初稿的局限与简化

初稿（见 airi-logos-v1.avif）风格感很强，但复杂度过高。于是作者推出简化版：

并在此基础上衍生出多种变体，最终形成了 airi-logo-v2.avif 与 airi-logos-v2.avif 两套简化方案。简化方向的核心是"缩得下去、认得出来"——这在移动端 PWA、桌面端托盘图标等小尺寸场景下是硬性要求，从仓库各应用public/目录下大量 192x192 / 512x512 的web-app-manifest与maskable_icon资源也能印证这一点。

主题配色：暗色、亮色与交换试错

简化后的版本最初只适配了暗色主题，作者随即制作了亮色版本（airi-logo-v2-dark.avif）。此时贡献者 @kwaa 提出了一个非常有效的设计技巧：把两套主题的配色互换试试。结果（airi-logos-v3.avif）确实效果更好——亮色与暗色环境下的可读性和对比度都得到了优化。

字体、背景与定稿

配色确定后，作者又依次打磨了字体排版（airi-logos-v4.avif）和背景色（airi-logos-v5.avif），最终收敛为定稿：

这轮迭代沉淀下来的方法值得沉淀为设计规范：从小尺寸可读性出发做减法 → 按主题维护配色变体 → 大胆交换配色验证对比度 → 最后精修字体与背景。这套流程最终也推动项目建立了正式的 设计指南（Design Guidelines），并在其中提供了面向艺术家与开发者的 资源清单 与工具说明，方便社区成员按同样的标准贡献设计。

文档站点上线：开发者与艺术家的参考中心

日志当日稍晚的核心工作是把 Project AIRI 官方文档站正式发布上线。建站的目的是为作者本人、其他开发者和艺术家提供一个统一参考与指南的入口，让"如何上手、如何贡献、如何设计"都有据可查。

日志明确提到站点上线时已包含三类内容：

• 基本指南：对应仓库中 docs/content/ja/docs 下的 manual（手册）与 overview（概览）等目录，涵盖使用方式与项目认知；
• 贡献指南：对应 docs/content/ja/docs/contributing/index.md 及其子页（如 WebUI、Tamagotchi、服务接入等贡献说明）；
• 设计指南：对应 docs/content/ja/docs/contributing/design-guidelines/index.md，并提供 资源 与 工具 两个子页。

新设计的 Logo 与配色方案也同步集成到了站点中（见 airi-build-light.avif 与 airi-build-dark.avif），亮/暗双主题与 Logo 的多主题适配形成闭环——站点本身就成了品牌规范的活样板。

从仓库结构看，文档内容按en / ja / ko / zh-Hans四种语言组织（见 docs/content 目录），这意味着站点从立项起就具备国际化体系：除了英文与日文原文，韩文、简体中文版本也在同一框架内同步维护，方便不同语言的开发者与艺术家使用。

DevStream 实战：把 CSS 动画移植进 ui-transitions 包

日志的最后一部分是当天 DevStream（开发直播）的成果：作者花了一整个午休时间研究 YouTube 上的文字 PV 动画效果，被其转场表现深深吸引，希望在浏览器中实现类似效果。他注意到开发者兼艺术家 yui540 刚开源了一个专门演示精美过渡效果的仓库（yui540/css-animations），于是以此为素材，把大量动画过渡效果移植到了项目自己的过渡动画包ui-transitions中。

这些相关资源与网站链接随后也被收录进了文档站的 设计资源页，作为社区参考与灵感来源。

移植后的实际效果由 animation-transitions.gif 记录，可以看到页面切换时铺满全屏的图形动画（箭头、斜坡、方块等）依次进出，极具"舞台感"：

包结构与 7 种过渡组件

ui-transitions包位于 packages/ui-transitions，其 README 将其定位为"一组用于场景淡入/淡出的 UI 过渡动画"。组件层在 src/components，由 index.ts 统一导出：

• SlideTransition— 滑入滑出；
• SlopeSlideTransition— 斜坡滑动；
• ArrowTransition— 箭头形裁剪遮罩开合；
• MultipleBlocksRevealTransition— 多块状逐格揭示；
• FantasyFallTransition— 幻想坠落（支持方向参数）；
• RectanglesRotateTransition— 矩形旋转；
• BubbleWaveOutTransition— 气泡波浪式退出；
• StageTransitionGroup— 编排以上全部过渡的核心容器组件。

这些组件大多是纯 CSS 实现。以 ArrowTransition.vue 为例，它用两个::before/::after伪元素叠加两层遮罩，通过clip-path: polygon(...)的arrowIn/arrowOut关键帧实现箭头形状的开合，动画曲线采用cubic-bezier(0.87, 0.05, 0.02, 0.97)（先快后慢的强调曲线），并用 CSS 变量（--sharpness: 40%）控制箭头的锐度。组件头部注释明确标注了原作者与源码出处，遵守了移植时的署名规范。

生命周期状态机：StageTransitionGroup 的核心

StageTransitionGroup是整个过渡系统的调度中枢（StageTransitionGroup.vue）。它把一次完整的页面切换切分为 7 个可观测、可挂接的阶段（见 TransitionStage 类型定义）：

组件内部维护了一个过渡注册表（transitions 定义），内置 7 种过渡各自的组件与时长，例如slide/slope-slide/arrow/fantasy-fall/rectangles-rotate均为 2700ms，multiple-blocks-reveal为 2800ms，bubble-wave-out最短为 1000ms。

围绕这 7 个阶段，组件实现了钩子系统：addTransitionHook(hook)注册监听函数并返回移除函数，triggerHooks(stage, data)会按注册顺序依次执行并await完成。调度流程的核心逻辑是：

1. 触发before-enter；
2. 置入新过渡，触发enter-active；
3. 在navigation阶段（默认取duration / 3的时刻，可通过nextDelay覆盖）调用next()执行真正的路由跳转，并设置hasNavigated防重入；
4. 按duration/duration + 10/duration + 20的节奏依次触发after-enter、before-leave、leave-active；
5. 动画周期结束后清理状态并触发after-leave。

此外还有几道安全兜底：finally中无论成败都移除导航钩子，并以duration * 2作为保守超时强制next()，避免钩子异常导致路由卡死；如果上一轮过渡尚未结束，会先快速走完退场流程（before-leave → after-leave）再开始新过渡，保证连续切换不重叠。

路由级联动：把过渡挂到页面切换上

StageTransitionGroup通过router.beforeEach与 vue-router 深度集成（见 路由守卫实现）：当目标路由的meta.stageTransition为对象时，守卫会读取其配置（name、primaryColor等），用组件 props 覆盖默认值后交给triggerTransition异步执行，完成"进场动画 → 跳转 → 退场动画"的完整编排。

配合 vue-router/experimental 的definePage，可以在每个页面声明自己的过渡。仓库自带的 playground 就是最佳示范：首页 index.vue 声明stageTransition: { name: 'slide' }，其余页面分别对应slope-slide（transition-2.vue）、arrow（transition-3.vue）、multiple-blocks-reveal（transition-4.vue）、fantasy-fall（transition-5.vue，带direction: 'down'）、rectangles-rotate（transition-6.vue）与bubble-wave-out（transition-7.vue）。

颜色与主题适配

过渡动画的配色完全可配置。playground 的 App.vue 中，用useDark()感知主题，再向StageTransitionGroup传入主色/次色：

<StageTransitionGroup :primary-color="!isDark ? '#FFA1B3' : '#FF5778'" :secondary-color="!isDark ? '#A1FFD7' : '#57FFB7'" > <router-view v-slot="{ Component, route: r }"> <component :is="Component" :key="r.path" /> </router-view> </StageTransitionGroup>

StageTransitionGroup支持的 props 还包括tertiaryColor、colors（多色数组）、zIndex（遮罩层级，默认 100）、disableTransitions（一键禁用过渡）与usePageSpecificTransitions（允许页面级过渡覆盖全局配置），这与当天日志里亮/暗双主题配色的打磨思路一脉相承。

运行与部署

包的运行与部署链路也很清晰：

• 本地开发/预览：pnpm -F @proj-airi/ui-transitions play:dev（Vite 启动 playground）、play:build、play:preview；
• 类型检查：vue-tsc --noEmit（见 package.json 的 scripts）；
• 静态托管：仓库内置的 netlify.toml 配置了构建命令（先 build 再 play:build）、发布目录packages/ui-transitions/playground/dist，以及/* → /index.html的 SPA 重定向规则，保证刷新页面时路由不 404。

小结

这则开发日志浓缩了 Project AIRI 在品牌与技术两条线上的推进节奏：gpuu是面向 WebGPU 的前置布局，为后续 GPU 能力探索铺路；Logo 的六轮迭代展现了"从小尺寸可读性出发、按主题维护变体、敢于交换配色"的务实设计方法论；文档站上线把指南、贡献规范与设计规范沉淀为可持续维护的知识库；而 ui-transitions 包则以"舞台过渡"为概念，用 7 阶段生命周期状态机 + 钩子系统 + vue-router 守卫，把社区优秀的 CSS 动画完整移植进 Vue 生态，并在仓库中留下了可复跑、可部署的完整示例。无论是想复刻这套转场效果，还是想为 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-sama's altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airi