AI Chat App — Galilieo

公开范围

这是一项非公开商业项目。以下内容只整理我个人参与的工作类型、已经确认的工程判断和验证边界，不公开公司名称、源码、接口、业务数据、内部截图、分支信息或未发布规划。

private: true 在本站只表示源码与产品细节不公开，不是页面访问控制。

项目概览

2026 年 6 月起，我参与一款跨平台 AI 产品的前端与移动端开发。工作从页面维护和真机问题排查，逐步扩展到媒体生成、聊天语音、跨路由草稿恢复、Ionic 缓存页面生命周期、配置缓存、多语言与交付检查。

这段经历让我面对的通常不是一个孤立组件，而是一条跨页面、跨平台或跨异步阶段的链路。很多问题只有先确认状态由谁持有、页面何时真正可见、请求和结果如何关联，才适合开始改代码。

工作范围

维护 Ionic、Vue 3 与 Capacitor 组成的 Android / iOS 混合应用；
将移动端已有的 AI 图片、视频业务规则迁移到 Vue Web 页面；
处理异步生成任务、媒体预览、历史记录和提示词复用；
处理缓存页面、系统返回手势、跨路由草稿和移动端 App 生命周期；
完成响应式、多语言、生产构建、定向测试与 Git 范围检查。

代表性案例

01 / 跨端迁移：复用业务规则，而不是复制原生页面

问题。 移动端已有图片与视频生成能力，但原实现依赖 Ionic、Capacitor 和原生插件，Web 项目使用 Vue 3、Vue Router、Pinia、Vue CLI 与 Webpack，无法直接复制页面与生命周期代码。

判断。 可以迁移的是配置、模板、参考图、任务状态和结果复用等业务规则；原生保存、分享、Bridge 与 Ionic 生命周期不属于 Web 端能力。图片和视频的配置、参考图数量、请求参数、并发数量与预览方式也不同，不适合强行共用一套表单状态。

行动。 在 Web 端建立统一入口以及图片、视频和历史页面，接入参考图、提示词辅助、模板选择、任务创建与轮询、结果预览、历史查看和提示词复用。共享通用编辑与预览组件，同时让图片和视频工作区分别维护各自的表单和任务边界。

结果与边界。 页面结构、定向检查、生产构建、多语言预渲染和响应式调整已完成。完整图片与视频生成、动态价格、余额不足和不同浏览器媒体行为仍需要真实账号与后端环境继续联调，因此没有把“构建通过”写成完整业务链路已经验证。

02 / 异步任务：生成过程不是一个组件内的 Loading

问题。 图片和视频生成都需要经历“提交参数—创建任务—持续查询状态—取得媒体结果”。如果只在组件里保存一个 loading，页面隐藏、网络中断、用户切换或旧响应晚到时，任务状态很容易失真。

判断。 任务状态需要独立于单个按钮，统一处理创建、轮询、失败、恢复和清理；旧页面实例和旧请求不能覆盖用户当前看到的任务。

行动。 将任务创建与状态查询集中管理，区分生成失败和轮询中断，处理页面隐藏后的暂停、恢复后的继续查询、用户切换后的清理，以及旧请求响应丢弃。生成结果再交给图片缩放、视频预览和历史记录处理。

结果与边界。 页面已能稳定表达等待、失败、中断和完成等不同状态，代码通过构建与定向检查。长时间任务、服务异常和轮询恢复仍保留为真实环境验证项。

03 / 跨路由状态：返回后恢复的是同一份草稿

问题。 用户从角色创建页进入 AI 图片页时，原页面没有持续挂载；直接跳转会丢失名称、标签和文案，返回后也可能把旧结果写入新的草稿。

判断。 不能用全局长期状态粗暴保存所有表单，也不能假设返回时原组件仍在。草稿需要按用户隔离，并用一次性令牌确认“返回结果”和“当前草稿”确实属于同一次流程。

行动。 离开前保存角色草稿并生成一次性令牌；图片生成完成后保存用户选中的结果；返回时同时校验用户与令牌，再恢复原表单，并把图片回填到对应封面与头像位置。

结果与边界。 跨路由恢复、用户隔离和旧结果保护已完成代码与构建验证。图片回填后的最终角色创建仍需要真实后端链路继续确认。

04 / Ionic 缓存页：首帧问题要找到真正参与转场的页面

问题。 在 iOS 边缘侧滑返回时，缓存的内容页第一帧会短暂出现卡片拼接和头部闪黑；媒体预览返回后，提示词已经回填，页面却仍停留在之前的滚动位置。

判断。 Ionic 中仍留在 DOM 的页面不等于已经可见，路由 watcher 也可能晚于系统交互式返回的首个可见帧。真正参与返回动画的是外层路由页面，而不是视觉上最终出现的叶子组件。

行动。 将媒体页收敛为真实 Router 返回栈；等待缓存页面移除隐藏状态后再瞬时定位；通过真实 DOM 祖先链找到进入转场的外层页面，在框架开始交互式返回前同步校准内容，并让头部只读取一份页面模式状态。

结果与边界。 相关场景通过生产构建、运行态探针、独立只读检查和 iPhone 真机验证。后续整体回归仍需留意取消侧滑、快速往返和 Android WebView 差异。

05 / 聊天语音：会话权限、消息资格和播放生命周期是三层边界

问题。 一个语音按钮同时受到会话是否开放、消息是否存在可朗读对白、签名与购买限制、音频缓存以及 App 进入后台等因素影响。把这些判断都放在按钮显示条件里，会留下绕过 UI 的无效请求和后台继续播放等问题。

判断。 会话开关决定功能是否开放；消息内容规则决定当前消息是否展示入口；请求层仍要校验消息、文本和重复操作。角色稳定标识、业务消息标识和音频元素的运行时身份也不能互相替代。

行动。 严格读取会话级开关，提取对白并把旁白作为语境；纯旁白隐藏入口，流式文本完成后再估算时长；购买动作复用既有弹窗；播放器使用真实音频元素处理互斥，并通过 Capacitor App 生命周期在切后台或锁屏时停止播放。

结果与边界。 定向测试、生产构建和 iOS 真机场景验证通过，包括对白识别、开场消息、播放互斥和后台中断。不同系统版本、签名过期和真实付费限制账号仍需继续回归。

06 / 配置与权益：静态模板、动态额度和用户余额不能混在一起

问题。 页面反复切换时会重复加载模板配置；生成后的动态额度可能被延迟响应覆盖。签到与订阅页面中，“是否为会员”和“属于哪个会员档位”也曾被混成一个布尔判断。

判断。 静态模板适合会话复用，动态额度需要生成后校准；缓存必须按用户、语言和页面隔离。权益显示应先确认权威数据源，再由多个入口共同消费同一套规则。

行动。 减少没有业务职责的嵌套路由容器；用 Promise 复用进行中的配置请求；只允许动态额度字段后台更新，并保护已经发生的本地扣减。同时把会员商品与每日权益的映射集中维护，避免多个页面分别写死数值。

结果与边界。 生产构建、缓存边界与资源引用检查已完成。最终奖励仍应以后端实际返回为权威来源；多会员状态和双平台真机矩阵保留为后续验证项。

形成的方法

先画链路。 AI 媒体问题按“输入—请求—任务—状态—结果—展示”逐层确认，不从最后一张错误图片直接猜前端根因。
先找状态所有者。 页面缓存、跨路由草稿、会话开关和播放器互斥分别由不同层负责，不能用一个全局布尔值替代。
区分业务身份与运行时身份。 角色、消息、任务和音频元素服务于不同生命周期，缺少其中一种标识时不能拿另一种勉强代替。
迁移规则，不复制平台实现。 跨端迁移保留业务语义，同时让 Web、Android 与 iOS 使用各自稳定的能力。
验证结果分层记录。 构建、定向测试、运行态探针和真机验证分别证明不同事情；未覆盖场景单独列出。