人工智能AI AgentMCP 服务工具调用GUI 自动化语音数字人交互助手【免费下载链接】airi 自托管、归你拥有的 Grok 风格 AI 伴侣与 waifu / 赛博生命灵魂容器目标是接近 Neuro-sama 的高度支持实时语音聊天、Minecraft 和 Factorio 游玩支持 Web / macOS / Windows。项目地址https://gitcode.com/moeru-ai/airi点击查看免费下载本文以 airi 仓库中 DevLog-2025.03.06 的开发日志为线索完整梳理当日围绕proj-airi/ui-transitions动画转场包展开的核心工作将设计师 yui540 的 CSS 动画移植为任意 Vue 项目可复用的转场组件、借助unplugin-vue-router的definePage宏实现页面级转场声明、以及基于 Netlify 的 playground 部署模式。读完本文你将掌握该转场包的组件 API、生命周期钩子架构、页面配置方式与真实工程落地细节并能直接在当前仓库中验证每一处实现。日志背景从 DevStream 出发的一天这篇 DevLog 记录了 2025 年 3 月 6 日一整天的开发节奏按时间线分为三段前一天Dejavu的直播成果回顾、白天Day time的技术实验与调研、以及当天直播DevStream中的集成实战。贯穿始终的主线是页面转场动画transition animations的组件化——作者的目标非常明确把 yui540 在个人作品中展示的惊艳 CSS 动画移植成任何 Vue 项目都能直接用的可复用 Vue 组件。这个目标最终沉淀为仓库中的packages/ui-transitions包。从其 README 可知该包被定义为 A set of UI transition animations for fade-in / fade-out of scenes即一套用于场景淡入 / 淡出切换的 UI 转场动画集合并且按包说明和 package.json 中的描述它被直接服务于 Project AIRI 的各个 Web 前端。从 CSS 到 Vue 组件7 个转场动画的移植日志中提到的 把 CSS 实现拆分进 Vue 组件 这一步在仓库里已经落成了完整的组件库。packages/ui-transitions/src/components/index.ts统一导出了 7 个转场组件组件转场注册名动画形态SlideTransitionslide双层色块从左向右滑入再滑出SlopeSlideTransitionslope-slide带斜切的 clip-path 遮罩平移ArrowTransitionarrow箭头形 clip-path 遮罩扫过MultipleBlocksRevealTransitionmultiple-blocks-reveal5 个横向分块依次滑入FantasyFallTransitionfantasy-fall单色幕布从指定方向坠落RectanglesRotateTransitionrectangles-rotate三块矩形旋转展开BubbleWaveOutTransitionbubble-wave-out同心圆气泡向外扩散这些组件的实现方式非常一致每个组件只是一个固定定位、覆盖全屏的容器真正动起来的是容器内::before/::after伪元素或子元素上挂载的 CSS 关键帧动画。以SlideTransition为例SlideTransition.vue两个伪元素分别承担两层不同颜色的遮罩通过slideIn/slideOut两组keyframes和错开的animation-delay0.2s与0s、1.2s与1.4s营造出一层盖一层的推进感缓动曲线统一使用cubic-bezier(0.87, 0.05, 0.02, 0.97)——这是一个非常明显的先慢后快加速曲线也是这些转场视觉节奏的共同来源。值得注意的是SlopeSlideTransition与ArrowTransition都直接复用了 yui540 原始实现的思路源码注释中保留了原作者的署名与出处见 SlopeSlideTransition.vue 与 ArrowTransition.vue采用clip-path多边形配合maskIn/maskOut关键帧实现斜切与箭头形状的遮罩扫过效果而MultipleBlocksRevealTransition则通过 5 个子块各自的--d延迟变量依次为 0.1s、0.3s、0s、0.4s、0.2s制造错落的节奏感。颜色与参数通过 CSS 变量注入组件与页面之间通过 props 传递配色再由组件在onMounted时写入document.documentElement.style的 CSS 自定义属性。例如SlideTransition会把primaryColor/secondaryColor分别映射为--stage-transition-1-overlay-color-1/2SlideTransition.vueRectanglesRotateTransition则映射三块矩形的颜色以及--rectangle-rotate-duration、--rectangle-rotate-stagger、--rectangle-rotate-rotation等可调参数RectanglesRotateTransition.vue。这种组件内部只管 CSS 变量、具体值由外部注入的设计正是日志中所说的可扩展、灵活的机制的最初形态。StageTransitionGroup转场编排的核心枢纽如果说 7 个转场组件是演员那么StageTransitionGroup就是掌控全场节奏的导演。它是整个ui-transitions包对外最主要的组件承担三类职责统一接收全局配色参数、按注册表选择转场组件、在路由切换时触发完整转场生命周期。核心实现在 StageTransitionGroup.vue。Props API组件对外暴露的 propsStageTransitionGroup.vue包括primaryColor/secondaryColor/tertiaryColor一、二、三级主题色colors颜色数组供需要多色层的转场如bubble-wave-out使用zIndex转场遮罩的层叠顺序默认 100disableTransitions完全关闭转场直接next()放行导航usePageSpecificTransitions若为真且目标页面的meta.stageTransition.pageSpecificAvailable为真则跳过全局转场交给页面自行处理。转场注册表与参数类型组件内部维护了一个transitions注册表把注册名映射到组件与时长配置StageTransitionGroup.vueinterface TransitionOptions { component: TransitionComponent duration: number // 进入动画总时长 exitDuration?: number // 退出动画时长可选 nextDelay?: number // 导航发生时机可选默认取 duration / 3 } 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 }, })可以看到大部分转场进入动画时长约 2.7 秒multiple-blocks-reveal略长2.8 秒而扩散型的气泡转场最快1 秒。这一注册表设计让新增一种转场只需两步写一个组件、往注册表里加一项符合日志中可扩展、灵活的目标。七阶段生命周期钩子组件定义了一套完整的转场生命周期阶段StageTransitionGroup.vueexport type TransitionStage | before-enter // 动画即将开始 | enter-active // 进入动画进行中 | navigation // 导航时机由组件决定何时跳转 | after-enter // 进入动画完成 | before-leave // 退出动画开始前 | leave-active // 退出动画进行中 | after-leave // 整个转场周期结束配套的钩子系统允许外部通过addTransitionHook(hook)注册监听器返回一个移除函数triggerHooks(stage, data)会按注册顺序依次await执行所有钩子单个钩子出错只会被console.error捕获、不会阻断后续流程StageTransitionGroup.vue。转场的完整时序在triggerTransitionAsyncFn中编排StageTransitionGroup.vue关键设计点包括若转场名为none或未注册直接next()放行导航并快速 resolve导航时机默认取duration / 3即进入动画进行到约 1/3 时就触发路由跳转也可用nextDelay覆盖通过一个临时注册的navigation钩子确保只导航一次hasNavigated标志若转场进行中又收到新的导航请求会先快速走完上一场的before-leave→after-leave清理流程间隔 50ms 后再启动新转场进入阶段用setTimeout依次触发navigationnextDelay时、after-enterduration时、before-leaveduration 10ms、leave-activeduration 20ms、after-leaveduration exitDuration时finally块中还有一个兜底逻辑若duration * 2后仍未导航强制next()避免转场异常导致路由卡死。与 vue-router 的挂接组件在setup中通过useRouter()拿到路由实例并注册router.beforeEach守卫StageTransitionGroup.vue当disableTransitions为真或目标路由的meta.stageTransition不是对象时直接放行否则把全局 props 中的颜色、zIndex 等覆盖到该页面的stageTransition参数上再调用triggerTransition(stageTransition, next)拦截导航、先播动画再跳转。模板层也非常简洁StageTransitionGroup.vue渲染默认插槽即router-view当showTransition为真时再按activeTransitionName动态渲染对应的转场组件并注入stageTransition参数。definePage 宏页面级的转场声明日志中作者提到实验了unplugin-vue-router提供的definePage宏发现它非常适合当前场景于是决定沿用这条路。definePage允许在script setup中直接声明页面级的路由 meta从而把这个页面用哪种转场的配置内联到页面文件本身。ui-transitions的 playground 正是这一机制的完整示范。playground 的 Vite 配置vite.config.ts挂载了vue-router/vite插件指定root: playground、自动扫描.vue/.md扩展名的页面并生成类型化的路由声明文件入口 main.ts 直接使用vue-router/auto-routes生成的路由表并配合createWebHashHistory。每个演示页面只做两件事引入公共的Buttons导航组件、用definePage声明自己的转场。例如首页 index.vuescript setup langts import { definePage } from vue-router/experimental import Buttons from ../components/Buttons.vue definePage({ meta: { stageTransition: { name: slide, }, }, }) /script template Buttons / /template其余页面依次声明了slope-slidetransition-2.vue、arrowtransition-3.vue、multiple-blocks-revealtransition-4.vue、fantasy-fall带direction: down参数transition-5.vue、rectangles-rotatetransition-6.vue、bubble-wave-outtransition-7.vue。Buttons.vue则用RouterLink生成 1 到 7 的跳转按钮网格方便快速对比每种转场效果。全局配色注入playground 的根组件 App.vue 演示了StageTransitionGroup的标准用法外层包住router-view并通过useDark根据明暗主题注入不同的配色——亮色为#FFA1B3/#A1FFD7暗色为#FF5778/#57FFB7注释标注了该配色的来源链接。这种全局容器注入颜色 页面级声明转场名的分离式架构正是日志中可复用目标的具体体现。Netlify 部署playground 的发布模式日志中提到一个重要约定从这一天起所有包的 playground 都采用proj-airi${subDirectory}${packageName}的 Netlify 部署命名模式。ui-transitions对应的部署域名即proj-airi-packages-ui-transitions.netlify.app。仓库中的 netlify.toml 展示了完整的部署配置[build] base / command pnpm -F proj-airi/ui-transitions run build pnpm -F proj-airi/ui-transitions run play:build publish /packages/ui-transitions/playground/dist [build.environment] NODE_VERSION 24 NODE_OPTIONS --max-old-space-size4096 [[redirects]] from /* to /index.html status 200 force false几个值得注意的细节构建命令通过 pnpm-F过滤出proj-airi/ui-transitions包先执行包的build脚本该包是纯 Vue 源码分发package.json中 build 脚本为 No build step required再执行play:build构建 playground发布目录直接指向playground/dist——这正是 vite.config.ts 中把build.outDir显式设为playground/dist的原因NODE_VERSION 24与NODE_OPTIONS --max-old-space-size4096明确了当时 Netlify 构建环境的 Node 大版本与内存上限全量 200 重写到/index.html是典型的 SPA 路由回退fallback策略配合 hash 路由createWebHashHistory双保险保证刷新或直接访问子路径时不出现 404。文档站点与 /docs 反向代理日志同时记录了文档站点的发布官方文档站部署到了airi.build作者一度纠结于子路径方案airi.more.ai/docs并尝试为/docs做一个返回 200 的重定向代理与 CI/CD 管道搏斗了约十个 commit 仍未成功但日志末尾以 EDIT 标记确认终于学会了怎么做细节会在后续 DevLog 中分享。这段记录说明作者在部署链路CI/CD、重定向代理上确实投入了相当精力只是当天尚未形成可复用的方案。白天的技术调研Phi-4-mini 与 LLM 网关除转场动画外日志还记录了白天的一组技术调研这部分属于作者当天的研究笔记供了解其决策背景作者研究了 DeepSeek 团队此前一周开源的基础设施索引open-infra-index研究了字节跳动发布的 LLM 网关项目 AIBrix重点关注微软新发布的 Phi-4-mini 是否适合移植到 AIRI 使用。日志记录的好消息是 Phi-4-mini 支持 function calling意味着终于可以用预训练支持来构建 Agent。需要说明的是这部分内容属于当日日志作者的调研记录与个人判断并非仓库内的实现事实从源码看AIRI 目前的 Agent 能力建设分布在packages/core-agent、packages/provider-inference等包中转场动画与这些调研之间并没有直接代码关联故此处仅作背景陈述。实战集成把转场装进 AIRI 主站日志中把 stage transition 动画组件集成进 AIRI 网站主舞台的实战在仓库apps/stage-web中留有明确痕迹。首先在依赖层面apps/stage-web/package.json 声明了proj-airi/ui-transitions: workspace:^说明主站直接以 workspace 依赖方式消费该包。其次在入口组件 apps/stage-web/src/App.vue 中StageTransitionGroup被包裹在StartupOverlay内、包住整个RouterViewStageTransitionGroup :primary-colorprimaryColor :secondary-colorsecondaryColor :tertiary-colortertiaryColor :colorscolors :z-index100 :disable-transitionssettings.disableTransitions.value :use-page-specific-transitionssettings.usePageSpecificTransitions.value RouterView v-slot{ Component, route } Transition :nameactiveRouteTransitionName modeout-in div :keyroute.path :class[h-full w-full] ErrorBoundary titleSomething went wrong while rendering this page. error... component :isComponent / /ErrorBoundary /div /Transition /RouterView /StageTransitionGroup这里有几个与日志呼应的工程细节配色与主题系统联动primaryColor/secondaryColor/tertiaryColor并非写死的色值而是基于isDark与主题色相--chromatic-hue用color-mixoklch动态计算的apps/stage-web/src/App.vue四个颜色依次取色相偏移 0°、180°、60° 的组合colors数组还会补上页面底色暗色#121212/ 亮色#FFFFFF。这与 playground 中暗色 / 亮色两套配色的思路一脉相承但更贴合 AIRI 的动态主题能力设置项透传disableTransitions与usePageSpecificTransitions直接绑定到用户设置settings.disableTransitions、settings.usePageSpecificTransitions这正是日志中提到的模块配置 UI 与设置页面的一部分——用户可以在设置里开关转场动画普通页面过渡与舞台转场并行RouterView外层还套了一个基于to.meta.transition的Transition modeout-in其过渡名由router.beforeEach根据目标 / 来源路由的meta.transition与meta.transitionBack动态切换apps/stage-web/src/App.vue。也就是说AIRI 主站存在两层切换机制轻量的 VueTransition用于常规页面过渡重量级的StageTransitionGroup用于舞台感的转场演出。日志还如实记录了两个集成过程中的问题集成当天并不顺利作者发现并修复了此前动画组件设计中的几个 bug并且在手机端实测时发现动画在移动设备上被意外破坏桌面和平板正常计划次日修复。这提醒使用者全屏覆盖的转场动画对移动端视口与性能敏感上线前务必做多端验证。从日志到可复用包本文要点回顾回顾这篇 DevLog可以提炼出几条对 Vue 前端工程有直接借鉴价值的实践CSS 动画组件化的拆分方式把视觉表现CSS 关键帧 伪元素与编排逻辑注册表 生命周期钩子分离动画组件只负责按 CSS 变量渲染遮罩编排逻辑统一收敛在StageTransitionGroup新增转场的成本降到最低页面级转场声明通过definePage把转场名写进路由 meta页面自述想要什么转场全局容器负责执行配置内聚、职责清晰导航拦截与兜底router.beforeEach拦截 next()延迟调用 duration * 2兜底超时 hasNavigated防重入构成一套健壮的路由转场保障机制主题与转场联动配色由主题系统计算后注入 props、再由组件写为 CSS 变量保证转场与站点主题色天然一致部署约定proj-airi 子目录 包名的 Netlify 命名模式与 playground 统一构建发布流程让每个包的演示环境可独立、可复现。对于想要在自有 Vue 项目中复用的读者直接参考 packages/ui-transitions/playground 的目录结构即可根组件套StageTransitionGroup包住router-view各页面用definePage声明meta.stageTransition.name再按需覆盖颜色、方向direction、圆角borderRadius、时长duration、延迟delay与旋转角度rotation等参数——其中FantasyFallTransition与RectanglesRotateTransition还额外支持方向、圆角、旋转等精细参数是扩展性最好的两个组件见 FantasyFallTransition.vue 与 RectanglesRotateTransition.vue。这组组件完全独立于 AIRI 的业务模块按 README 的 MIT 许可即可放心引入自己的项目。赞分享人工智能AI AgentMCP 服务工具调用GUI 自动化语音数字人交互助手【免费下载链接】airi 自托管、归你拥有的 Grok 风格 AI 伴侣与 waifu / 赛博生命灵魂容器目标是接近 Neuro-sama 的高度支持实时语音聊天、Minecraft 和 Factorio 游玩支持 Web / macOS / Windows。项目地址https://gitcode.com/moeru-ai/airi点击查看免费下载相关推荐AIRI 开发日志解析把 yui540 的 CSS 动画移植成可复用的 Vue 舞台转场组件库AIRI 开发日志解析把 yui540 的 CSS 动画移植成可复用的 Vue 舞台转场组件库 本篇技术文章以 AIRI 项目 2025 03 06 的开发日AI 应用人工智能大模型数字人AI Agent语音前端后端桌面应用移动开发即时通讯3D渲染AIRI 舞台过渡动画开发日志深度解析把 yui540 的 CSS 艺术移植成可复用的 Vue 组件AIRI 舞台过渡动画开发日志深度解析把 yui540 的 CSS 艺术移植成可复用的 Vue 组件 本文基于 AIRI 项目的开发日志2025.03.06AI 应用人工智能大模型数字人AI Agent语音前端后端桌面应用移动开发即时通讯3D渲染零依赖4步走用OpenArk完成Windows反恶意软件检测与深度进程分析零依赖4步走用OpenArk完成Windows反恶意软件检测与深度进程分析 任务管理器里冒出一个你没见过名字的进程路径还指向某个临时目录应用列表里却找不到网络安全逆向工程桌面应用创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考