尧图网站建设 
Project AIRI 开发日志解析WebGPU 能力检测、品牌视觉系统与 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本文基于 Project AIRI 官方开发日志 DevLog 2025.03.05 展开梳理这一天围绕三个主题的技术与设计工作引入gpuuGPU utilities包来统一 WebGPU 能力检测、迭代 Project AIRI 的品牌 Logo 与配色、上线官方文档站并将 yui540 的 CSS 舞台转场动画移植进proj-airi/ui-transitions包。读完本文你将掌握 WebGPU 能力检测的完整落地实现、多主题品牌视觉的迭代思路以及一套可在 Vue Router 应用中直接复用的转场动画组件的内部工作原理。日志主线一天内的三条工作流2025.03.05 的开发日志按时间线分为三个部分正好对应三条独立但相互关联的工作流Dejavu昨日回顾为项目新增gpuuGPU utilities包用于与 WebGPU 交互收到并迭代了 Project AIRI 第一版 Logo 设计。Daytime白天完成 Logo 的多轮视觉迭代适配 Home Screen 图标、深/浅色主题、字体与背景色优化并将成果与新配色一同发布到官方文档站。DevStream直播将 yui540 的 CSS 动画作品移植为项目内的转场动画组件并在直播中演示效果。下面分别深入这三条主线并结合当前仓库源码验证其真实落地情况。一、gpuu面向 WebGPU 的 GPU 工具包1.1 日志中的原始用法日志记录道Yesterday I added one extra package calledgpuu(GPU utilities) to help us work with WebGPU并给出了最直接的调用示例import { check } from gpuu/webgpu import { onMounted } from vue onMounted(async () { const result await check() console.info(result) // do something with the result })这个示例展示了两个关键信息gpuu以子路径gpuu/webgpu暴露 WebGPU 相关 API因此可以按需引入而无需拉入全部模块check()返回一个异步结果对象可直接在 Vue 组件的onMounted钩子中调用用于页面初始化时的 GPU 能力探测。日志也坦言该包目前能力不多未来会持续扩展——从当前仓库看这一预测已经兑现gpuu被进一步封装进了stage-shared包形成了完整的能力检测模块。1.2 仓库中的真实落地stage-shared 的集中式 WebGPU 检测在 packages/stage-shared/src/webgpu/detect.ts 中gpuu被二次封装为项目统一的 WebGPU 能力检测入口import { check as gpuuCheck, isWebGPUSupported as gpuuIsSupported } from gpuu/webgpu封装的核心动机在源码注释中写得很清楚集中化检测并缓存结果让每个消费者拿到同一份答案避免重复发起 adapter 请求。对外暴露的核心类型为WebGPUCapabilities字段含义supported当前环境是否支持 WebGPUfp16Supported是否支持 fp16 着色器运算estimatedVRAM估算的显存大小字节不可用时为 0estimatedVRAMSource显存估算来源override/max-buffer-heuristic/noneadapterInfo适配器上报的vendor/architecture/device/descriptionreason不支持时的原始原因字符串显存估算的三级优先级Web 平台并不暴露 GPU 显存总量源码注释明确给出估算策略按优先级依次为用户覆盖值setEstimatedVRAMOverride(bytes)设置启发式adapter.limits.maxBufferSize * 4源码注释指出典型值集成 GPU 约 256MB独立 GPU 约 2–4GB乘以 4 作为保守的总显存估算不可用返回 0。该来源会通过estimatedVRAMSource上报给消费者便于在诊断界面呈现这个数字是怎么算出来的。Adapter 信息提取的兼容策略extractAdapterInfo优先使用现代同步 APIadapter.info源码注释标注 Chrome 114 / Safari 17.4失败则回退到旧的 Promise 风格adapter.requestAdapterInfo()两者都不可用则返回null。由于浏览器对 vendor/architecture 命名没有统一标准WebGPUAdapterInfo的字段被定义为不透明字符串。单例缓存与并发去重detectWebGPU()具备两层优化结果缓存为单例cachedResult首次成功调用后重复调用直接返回通过pendingDetection对并发调用去重——多个组件同时调用时只发起一次真正的检测。此外还提供了getCachedWebGPUCapabilities()同步读取、isWebGPUSupported()轻量布尔快速判断直接透传gpuuIsSupported()、setEstimatedVRAMOverride()/getEstimatedVRAMOverride()用户偏好覆盖如我有 8GB 显存以及仅用于测试的resetWebGPUCache()。覆盖值设置时会即时更新已缓存结果无需重置缓存。对应测试位于 packages/stage-shared/src/webgpu/detect.test.ts覆盖了检测、缓存与覆盖逻辑。gpuu也被写入了 pnpm-workspace.yaml 及多个应用/包的依赖中可见它已成为 WebGPU 检测链路的底层公共依赖。二、品牌视觉Project AIRI Logo 的多轮迭代2.1 从复杂到克制的迭代路线日志记录上周设计师/画师提交了 Project AIRI Logo 的第一版委托稿但作者从设计角度判断scaled down to Home Screen app sizes缩放到主屏幕应用图标尺寸时显得过于复杂、对用户不友好于是开始了多轮迭代v1委托的首版设计细节丰富但小尺寸下辨识度不足v2简化的新版并衍生出深色主题变体airi-logo-v2-dark——我们需要一个深色主题版本v3团队成员 kwaa 提议将两套主题的配色互换效果更佳v4更新了 Typography字体排印v5优化背景颜色最终版综合以上所有调整的定稿。这段迭代史的价值在于完整记录了一个品牌视觉从艺术表现走向工程可用的过程图标设计不仅要好看还要在小尺寸、双主题、不同介质Web/桌面/移动端主屏下保持辨识度。2.2 仓库中的品牌资产与配色落地迭代成果最终沉淀在 docs/content/public/ 下作为文档站与各端共用的品牌资产app-dark.svg/app-light.svg深浅两套应用图标logo-dark.avif/logo-light.avif深浅两套 Logofavicon.svg、maskable_icon_x192.avif、maskable_icon_x512.avif等PWA 与站点图标。配色方面文档站 docs/.vitepress/config.ts 中设置了主题色 meta 标签theme-color: #0b0d0f站点默认外观为appearance: dark并内联脚本依据prefers-color-scheme与本地设置自动切换。根目录的 uno.config.ts 则统一管理primary等语义色含bg-primary-${shade}这类按色阶生成工具类的逻辑保证 Logo、文档站与各应用之间的色彩一致。三、文档站 airi.build上线、结构与设计指南3.1 上线与多语言架构日志记录当天完成了文档站airi.build的发布新 Logo 与配色随之上线作为开发者与艺术家共同参考的指南站。文档站基于VitePress构建从 docs/package.json 可以看到scripts: { build: vitepress build, build:base: BASE_URL/docs/ vitepress build, dev: vitepress dev, preview: vitepress preview }支持BASE_URL前缀构建部署到/docs/子路径与本地开发热更新。站点架构在 docs/.vitepress/config.ts 中定义包含Englishroot、简体中文、日本語、한국어四套 locale内容分别存放在 docs/content/en/、docs/content/zh-Hans/、docs/content/ja/、docs/content/ko/ 下并由 vue-i18n intlify/unplugin-vue-i18n/vite提供多语言支持。3.2 日志中提到的三份指南今天在哪里日志提到Basic guide、contribution guidelines、designing guidelines 都从这一刻起被包含进来这三类内容在现行文档树中的对应位置为Basic guide入门指南docs/content/en/docs/overview/index.md —— 介绍 Project AIRI 的定位开源版 Neuro-sama 式数字生命、Web/Desktop 双端支持、快速开始入口Contribution guidelines贡献指南docs/content/en/docs/contributing/index.md —— 完整的环境搭建Git、mise、Corepack、pnpm、fork/clone、分支、lint/typecheck、提交与 PR 流程Designing guidelines设计指南docs/content/en/docs/contributing/design-guidelines/index.md其下再细分为 resources.md参考资源与 tools.md工具。其中设计指南的内容与日志主题高度呼应配色工具链开发默认使用 UnoCSS 生成样式基础色板参考 Tailwind 的neutral、pink、violet、cyan四组色系交互组件推荐 Radix Colors 色板可读性铁律引述 Refactoring UI 的建议——需要调整色彩浓度时应手工挑选最佳实色而不是依赖透明度除非透明度本身就是排印设计的一部分互补色工具Figma / Canva 色轮、Paletton 等背景与图案资源SVG Backgrounds、Finisher Header 等生成器。3.3 文档站视觉验证日志中的截图展示了新 Logo 与色板在文档站含深、浅两套主题中的实际呈现对应配置见 docs/.vitepress/config.ts 中appearance: dark与主题切换逻辑。四、移植 yui540 转场动画proj-airi/ui-transitions4.1 灵感来源与移植过程日志提到作者花了一整个中午研究 YouTube 上的 Text PV 动画希望在浏览器中实现类似的转场效果并因此结识了擅长 CSS 舞台转场的创作者 yui540。随后在 DevStream 中作者将 yui540 作品集中的大量动画转场移植到了proj-airi/packages-ui-transitions的演示站点。这些成果的落地点就是当前的 packages/ui-transitions其 README.md 定位为A set of UI transition animations for fade-in / fade-out of scenes一组用于场景淡入淡出的 UI 转场动画。4.2 包的组成与导出结构packages/ui-transitions/package.json 定义包名为proj-airi/ui-transitionsMIT 许可private: true依赖vue、vueuse/core、vueuse/motion并提供两条导出路径exports: { .: ./src/index.ts, ./components: ./src/components/index.ts }组件索引 packages/ui-transitions/src/components/index.ts 导出 7 个组件ArrowTransition、BubbleWaveOutTransition、FantasyFallTransition、MultipleBlocksRevealTransition、SlideTransition、SlopeSlideTransition、StageTransitionGroup目录中另有RectanglesRotateTransition.vue从源码结构看它未出现在组件索引中而是被StageTransitionGroup直接引入使用。开发预览通过pnpm play:devvite、pnpm play:build、pnpm play:preview运行演示页位于 packages/ui-transitions/playground/。4.3 核心编排器 StageTransitionGroup真正的灵魂在 StageTransitionGroup.vue它把七种转场统一注册进一张注册表并与 Vue Router 深度集成。转场注册表与默认时长const transitions shallowRefRecordstring, TransitionOptions({ slide: { component: SlideTransition, duration: 2700 }, slope-slide: { component: SlopeSlideTransition, duration: 2700 }, arrow: { component: ArrowTransition, duration: 2700 }, multiple-blocks-reveal: { component: MultipleBlocksRevealTransition, duration: 2800 }, fantasy-fall: { component: FantasyFallTransition, duration: 2700 }, rectangles-rotate: { component: RectanglesRotateTransition, duration: 2700 }, bubble-wave-out: { component: BubbleWaveOutTransition, duration: 1000 }, })七种转场的默认时长大多为2700msmultiple-blocks-reveal为2800msbubble-wave-out气泡扩散最短仅1000ms。完整的生命周期阶段TransitionStage类型定义了七阶段生命周期与 Vue Transition 的理念一脉相承阶段说明before-enter动画开始前enter-active入场动画进行中navigation到达导航时机由组件决定何时触发after-enter入场动画完成before-leave退场动画开始前leave-active退场动画进行中after-leave整个动画周期结束钩子系统与导航时机addTransitionHook(hook)允许外部注册生命周期钩子并返回移除函数triggerHooks(stage, data)会顺序执行并await所有钩子单个钩子出错仅打印错误而不中断流程。导航时机由navTiming transition.nextDelay ?? transition.duration / 3决定默认在 1/3 时长处触发导航可通过nextDelay覆盖同时内置了保守兜底即使没有任何钩子处理导航也会在duration * 2后强制执行next()避免页面卡死。与 Vue Router 的集成方式router.beforeEach拦截路由跳转读取目标路由的to.meta.stageTransition类型为StageTransitionCommonParamsname/primaryColor/secondaryColor/tertiaryColor/direction/colors/zIndex/pageSpecificAvailable。组件 Props 提供了primaryColor、secondaryColor、tertiaryColor、colors、zIndex、disableTransitions、usePageSpecificTransitions等覆盖项disableTransitions为真时直接放行不播放动画usePageSpecificTransitions配合路由 meta 的pageSpecificAvailable可实现某些页面用页面自身的转场其他页面用全局转场全局 Props 中的颜色/zIndex 会覆写路由 meta 中的同名配置。4.4 单个转场的 CSS 实现细节SlideTransition双层色块滑入滑出SlideTransition.vue 使用::before/::after两个伪元素作为双层遮罩动画曲线为cubic-bezier(0.87, 0.05, 0.02, 0.97)关键帧slideIn/slideOut通过translateX(-101%) → 0 → 101%实现从左到右的扫描。两层遮罩的动画延迟错开第二层::after主色在0.2s开始入场、1.2s开始退场第一层::after之前的::before副色分别在0s/1.4s——这种错拍叠加正是舞台幕布质感的来源。颜色通过 CSS 变量--stage-transition-1-overlay-color-1/2注入默认#666/#ccc层级默认z-index: 100。ArrowTransitionclip-path 裁剪出箭头形状ArrowTransition.vue 用clip-path: polygon(...)把遮罩裁剪成箭头轮廓通过arrowIn/arrowOut两个关键帧改变六边形顶点位置实现箭头从左刺入再向右拔出的效果。核心参数--sharpness: 40%控制箭头的锐度源码注释明确标注了原作者yui540及对应源文件位置。BubbleWaveOutTransition多色圆形扩散BubbleWaveOutTransition.vue 是唯一的从中心扩散型转场一个150vmax的圆形容器position: fixed居中pointer-events: none内部按 4 个同心圆依次执行circleExpand缩放动画每层延迟递增0.15s。默认四色为[#eee, #ebcb8b, #c56370, #3f3b52]时长与延迟通过--circle-expansion-duration默认0.4s和--circle-expansion-delay两个 CSS 变量注入颜色同样可经stageTransition.colors自定义。4.5 效果验证日志中的演示动图印证了移植效果这也是Text PV 动画 → CSS 转场 → 可复用组件包这一从灵感到工程化的完整链路。设计参考资源至今仍收录在文档站设计指南的 resources.md 中。五、小结与延伸阅读2025.03.05 的这条 DevLog 展示了开源项目日常推进的三个典型切面基础设施gpuu → stage-shared 的 WebGPU 能力检测、品牌与内容Logo 多轮迭代 文档站上线、表现层工程yui540 动画的组件化移植。三者都从想法走到了仓库里可验证的代码/资产这也是阅读与引用本项目时最值得关注的证据链。WebGPU 检测实现packages/stage-shared/src/webgpu/detect.ts 与 测试文件转场组件源码packages/ui-transitions/src/components/StageTransitionGroup.vue、SlideTransition.vue、ArrowTransition.vue、BubbleWaveOutTransition.vue文档站架构docs/.vitepress/config.ts 与 docs/package.json设计指南index.md、resources.md、tools.md品牌资产目录docs/content/public/【免费下载链接】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），仅供参考 Project AIRI 开发日志解析：WebGPU 能力检测、品牌视觉系统与 CSS 舞台转场动画
Project AIRI 开发日志解析WebGPU 能力检测、品牌视觉系统与 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本文基于 Project AIRI 官方开发日志 DevLog 2025.03.05 展开梳理这一天围绕三个主题的技术与设计工作引入gpuuGPU utilities包来统一 WebGPU 能力检测、迭代 Project AIRI 的品牌 Logo 与配色、上线官方文档站并将 yui540 的 CSS 舞台转场动画移植进proj-airi/ui-transitions包。读完本文你将掌握 WebGPU 能力检测的完整落地实现、多主题品牌视觉的迭代思路以及一套可在 Vue Router 应用中直接复用的转场动画组件的内部工作原理。日志主线一天内的三条工作流2025.03.05 的开发日志按时间线分为三个部分正好对应三条独立但相互关联的工作流Dejavu昨日回顾为项目新增gpuuGPU utilities包用于与 WebGPU 交互收到并迭代了 Project AIRI 第一版 Logo 设计。Daytime白天完成 Logo 的多轮视觉迭代适配 Home Screen 图标、深/浅色主题、字体与背景色优化并将成果与新配色一同发布到官方文档站。DevStream直播将 yui540 的 CSS 动画作品移植为项目内的转场动画组件并在直播中演示效果。下面分别深入这三条主线并结合当前仓库源码验证其真实落地情况。一、gpuu面向 WebGPU 的 GPU 工具包1.1 日志中的原始用法日志记录道Yesterday I added one extra package calledgpuu(GPU utilities) to help us work with WebGPU并给出了最直接的调用示例import { check } from gpuu/webgpu import { onMounted } from vue onMounted(async () { const result await check() console.info(result) // do something with the result })这个示例展示了两个关键信息gpuu以子路径gpuu/webgpu暴露 WebGPU 相关 API因此可以按需引入而无需拉入全部模块check()返回一个异步结果对象可直接在 Vue 组件的onMounted钩子中调用用于页面初始化时的 GPU 能力探测。日志也坦言该包目前能力不多未来会持续扩展——从当前仓库看这一预测已经兑现gpuu被进一步封装进了stage-shared包形成了完整的能力检测模块。1.2 仓库中的真实落地stage-shared 的集中式 WebGPU 检测在 packages/stage-shared/src/webgpu/detect.ts 中gpuu被二次封装为项目统一的 WebGPU 能力检测入口import { check as gpuuCheck, isWebGPUSupported as gpuuIsSupported } from gpuu/webgpu封装的核心动机在源码注释中写得很清楚集中化检测并缓存结果让每个消费者拿到同一份答案避免重复发起 adapter 请求。对外暴露的核心类型为WebGPUCapabilities字段含义supported当前环境是否支持 WebGPUfp16Supported是否支持 fp16 着色器运算estimatedVRAM估算的显存大小字节不可用时为 0estimatedVRAMSource显存估算来源override/max-buffer-heuristic/noneadapterInfo适配器上报的vendor/architecture/device/descriptionreason不支持时的原始原因字符串显存估算的三级优先级Web 平台并不暴露 GPU 显存总量源码注释明确给出估算策略按优先级依次为用户覆盖值setEstimatedVRAMOverride(bytes)设置启发式adapter.limits.maxBufferSize * 4源码注释指出典型值集成 GPU 约 256MB独立 GPU 约 2–4GB乘以 4 作为保守的总显存估算不可用返回 0。该来源会通过estimatedVRAMSource上报给消费者便于在诊断界面呈现这个数字是怎么算出来的。Adapter 信息提取的兼容策略extractAdapterInfo优先使用现代同步 APIadapter.info源码注释标注 Chrome 114 / Safari 17.4失败则回退到旧的 Promise 风格adapter.requestAdapterInfo()两者都不可用则返回null。由于浏览器对 vendor/architecture 命名没有统一标准WebGPUAdapterInfo的字段被定义为不透明字符串。单例缓存与并发去重detectWebGPU()具备两层优化结果缓存为单例cachedResult首次成功调用后重复调用直接返回通过pendingDetection对并发调用去重——多个组件同时调用时只发起一次真正的检测。此外还提供了getCachedWebGPUCapabilities()同步读取、isWebGPUSupported()轻量布尔快速判断直接透传gpuuIsSupported()、setEstimatedVRAMOverride()/getEstimatedVRAMOverride()用户偏好覆盖如我有 8GB 显存以及仅用于测试的resetWebGPUCache()。覆盖值设置时会即时更新已缓存结果无需重置缓存。对应测试位于 packages/stage-shared/src/webgpu/detect.test.ts覆盖了检测、缓存与覆盖逻辑。gpuu也被写入了 pnpm-workspace.yaml 及多个应用/包的依赖中可见它已成为 WebGPU 检测链路的底层公共依赖。二、品牌视觉Project AIRI Logo 的多轮迭代2.1 从复杂到克制的迭代路线日志记录上周设计师/画师提交了 Project AIRI Logo 的第一版委托稿但作者从设计角度判断scaled down to Home Screen app sizes缩放到主屏幕应用图标尺寸时显得过于复杂、对用户不友好于是开始了多轮迭代v1委托的首版设计细节丰富但小尺寸下辨识度不足v2简化的新版并衍生出深色主题变体airi-logo-v2-dark——我们需要一个深色主题版本v3团队成员 kwaa 提议将两套主题的配色互换效果更佳v4更新了 Typography字体排印v5优化背景颜色最终版综合以上所有调整的定稿。这段迭代史的价值在于完整记录了一个品牌视觉从艺术表现走向工程可用的过程图标设计不仅要好看还要在小尺寸、双主题、不同介质Web/桌面/移动端主屏下保持辨识度。2.2 仓库中的品牌资产与配色落地迭代成果最终沉淀在 docs/content/public/ 下作为文档站与各端共用的品牌资产app-dark.svg/app-light.svg深浅两套应用图标logo-dark.avif/logo-light.avif深浅两套 Logofavicon.svg、maskable_icon_x192.avif、maskable_icon_x512.avif等PWA 与站点图标。配色方面文档站 docs/.vitepress/config.ts 中设置了主题色 meta 标签theme-color: #0b0d0f站点默认外观为appearance: dark并内联脚本依据prefers-color-scheme与本地设置自动切换。根目录的 uno.config.ts 则统一管理primary等语义色含bg-primary-${shade}这类按色阶生成工具类的逻辑保证 Logo、文档站与各应用之间的色彩一致。三、文档站 airi.build上线、结构与设计指南3.1 上线与多语言架构日志记录当天完成了文档站airi.build的发布新 Logo 与配色随之上线作为开发者与艺术家共同参考的指南站。文档站基于VitePress构建从 docs/package.json 可以看到scripts: { build: vitepress build, build:base: BASE_URL/docs/ vitepress build, dev: vitepress dev, preview: vitepress preview }支持BASE_URL前缀构建部署到/docs/子路径与本地开发热更新。站点架构在 docs/.vitepress/config.ts 中定义包含Englishroot、简体中文、日本語、한국어四套 locale内容分别存放在 docs/content/en/、docs/content/zh-Hans/、docs/content/ja/、docs/content/ko/ 下并由 vue-i18n intlify/unplugin-vue-i18n/vite提供多语言支持。3.2 日志中提到的三份指南今天在哪里日志提到Basic guide、contribution guidelines、designing guidelines 都从这一刻起被包含进来这三类内容在现行文档树中的对应位置为Basic guide入门指南docs/content/en/docs/overview/index.md —— 介绍 Project AIRI 的定位开源版 Neuro-sama 式数字生命、Web/Desktop 双端支持、快速开始入口Contribution guidelines贡献指南docs/content/en/docs/contributing/index.md —— 完整的环境搭建Git、mise、Corepack、pnpm、fork/clone、分支、lint/typecheck、提交与 PR 流程Designing guidelines设计指南docs/content/en/docs/contributing/design-guidelines/index.md其下再细分为 resources.md参考资源与 tools.md工具。其中设计指南的内容与日志主题高度呼应配色工具链开发默认使用 UnoCSS 生成样式基础色板参考 Tailwind 的neutral、pink、violet、cyan四组色系交互组件推荐 Radix Colors 色板可读性铁律引述 Refactoring UI 的建议——需要调整色彩浓度时应手工挑选最佳实色而不是依赖透明度除非透明度本身就是排印设计的一部分互补色工具Figma / Canva 色轮、Paletton 等背景与图案资源SVG Backgrounds、Finisher Header 等生成器。3.3 文档站视觉验证日志中的截图展示了新 Logo 与色板在文档站含深、浅两套主题中的实际呈现对应配置见 docs/.vitepress/config.ts 中appearance: dark与主题切换逻辑。四、移植 yui540 转场动画proj-airi/ui-transitions4.1 灵感来源与移植过程日志提到作者花了一整个中午研究 YouTube 上的 Text PV 动画希望在浏览器中实现类似的转场效果并因此结识了擅长 CSS 舞台转场的创作者 yui540。随后在 DevStream 中作者将 yui540 作品集中的大量动画转场移植到了proj-airi/packages-ui-transitions的演示站点。这些成果的落地点就是当前的 packages/ui-transitions其 README.md 定位为A set of UI transition animations for fade-in / fade-out of scenes一组用于场景淡入淡出的 UI 转场动画。4.2 包的组成与导出结构packages/ui-transitions/package.json 定义包名为proj-airi/ui-transitionsMIT 许可private: true依赖vue、vueuse/core、vueuse/motion并提供两条导出路径exports: { .: ./src/index.ts, ./components: ./src/components/index.ts }组件索引 packages/ui-transitions/src/components/index.ts 导出 7 个组件ArrowTransition、BubbleWaveOutTransition、FantasyFallTransition、MultipleBlocksRevealTransition、SlideTransition、SlopeSlideTransition、StageTransitionGroup目录中另有RectanglesRotateTransition.vue从源码结构看它未出现在组件索引中而是被StageTransitionGroup直接引入使用。开发预览通过pnpm play:devvite、pnpm play:build、pnpm play:preview运行演示页位于 packages/ui-transitions/playground/。4.3 核心编排器 StageTransitionGroup真正的灵魂在 StageTransitionGroup.vue它把七种转场统一注册进一张注册表并与 Vue Router 深度集成。转场注册表与默认时长const transitions shallowRefRecordstring, TransitionOptions({ slide: { component: SlideTransition, duration: 2700 }, slope-slide: { component: SlopeSlideTransition, duration: 2700 }, arrow: { component: ArrowTransition, duration: 2700 }, multiple-blocks-reveal: { component: MultipleBlocksRevealTransition, duration: 2800 }, fantasy-fall: { component: FantasyFallTransition, duration: 2700 }, rectangles-rotate: { component: RectanglesRotateTransition, duration: 2700 }, bubble-wave-out: { component: BubbleWaveOutTransition, duration: 1000 }, })七种转场的默认时长大多为2700msmultiple-blocks-reveal为2800msbubble-wave-out气泡扩散最短仅1000ms。完整的生命周期阶段TransitionStage类型定义了七阶段生命周期与 Vue Transition 的理念一脉相承阶段说明before-enter动画开始前enter-active入场动画进行中navigation到达导航时机由组件决定何时触发after-enter入场动画完成before-leave退场动画开始前leave-active退场动画进行中after-leave整个动画周期结束钩子系统与导航时机addTransitionHook(hook)允许外部注册生命周期钩子并返回移除函数triggerHooks(stage, data)会顺序执行并await所有钩子单个钩子出错仅打印错误而不中断流程。导航时机由navTiming transition.nextDelay ?? transition.duration / 3决定默认在 1/3 时长处触发导航可通过nextDelay覆盖同时内置了保守兜底即使没有任何钩子处理导航也会在duration * 2后强制执行next()避免页面卡死。与 Vue Router 的集成方式router.beforeEach拦截路由跳转读取目标路由的to.meta.stageTransition类型为StageTransitionCommonParamsname/primaryColor/secondaryColor/tertiaryColor/direction/colors/zIndex/pageSpecificAvailable。组件 Props 提供了primaryColor、secondaryColor、tertiaryColor、colors、zIndex、disableTransitions、usePageSpecificTransitions等覆盖项disableTransitions为真时直接放行不播放动画usePageSpecificTransitions配合路由 meta 的pageSpecificAvailable可实现某些页面用页面自身的转场其他页面用全局转场全局 Props 中的颜色/zIndex 会覆写路由 meta 中的同名配置。4.4 单个转场的 CSS 实现细节SlideTransition双层色块滑入滑出SlideTransition.vue 使用::before/::after两个伪元素作为双层遮罩动画曲线为cubic-bezier(0.87, 0.05, 0.02, 0.97)关键帧slideIn/slideOut通过translateX(-101%) → 0 → 101%实现从左到右的扫描。两层遮罩的动画延迟错开第二层::after主色在0.2s开始入场、1.2s开始退场第一层::after之前的::before副色分别在0s/1.4s——这种错拍叠加正是舞台幕布质感的来源。颜色通过 CSS 变量--stage-transition-1-overlay-color-1/2注入默认#666/#ccc层级默认z-index: 100。ArrowTransitionclip-path 裁剪出箭头形状ArrowTransition.vue 用clip-path: polygon(...)把遮罩裁剪成箭头轮廓通过arrowIn/arrowOut两个关键帧改变六边形顶点位置实现箭头从左刺入再向右拔出的效果。核心参数--sharpness: 40%控制箭头的锐度源码注释明确标注了原作者yui540及对应源文件位置。BubbleWaveOutTransition多色圆形扩散BubbleWaveOutTransition.vue 是唯一的从中心扩散型转场一个150vmax的圆形容器position: fixed居中pointer-events: none内部按 4 个同心圆依次执行circleExpand缩放动画每层延迟递增0.15s。默认四色为[#eee, #ebcb8b, #c56370, #3f3b52]时长与延迟通过--circle-expansion-duration默认0.4s和--circle-expansion-delay两个 CSS 变量注入颜色同样可经stageTransition.colors自定义。4.5 效果验证日志中的演示动图印证了移植效果这也是Text PV 动画 → CSS 转场 → 可复用组件包这一从灵感到工程化的完整链路。设计参考资源至今仍收录在文档站设计指南的 resources.md 中。五、小结与延伸阅读2025.03.05 的这条 DevLog 展示了开源项目日常推进的三个典型切面基础设施gpuu → stage-shared 的 WebGPU 能力检测、品牌与内容Logo 多轮迭代 文档站上线、表现层工程yui540 动画的组件化移植。三者都从想法走到了仓库里可验证的代码/资产这也是阅读与引用本项目时最值得关注的证据链。WebGPU 检测实现packages/stage-shared/src/webgpu/detect.ts 与 测试文件转场组件源码packages/ui-transitions/src/components/StageTransitionGroup.vue、SlideTransition.vue、ArrowTransition.vue、BubbleWaveOutTransition.vue文档站架构docs/.vitepress/config.ts 与 docs/package.json设计指南index.md、resources.md、tools.md品牌资产目录docs/content/public/【免费下载链接】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），仅供参考