一人一 Agent 的场景隔离
每个语伴对应一个独立的 Dify 应用，拥有专属的 System Prompt、知识库和对话风格。校园语伴不会用职场语气回应，文化语伴自带跨文化知识背景——这比单一聊天机器人切换 "模式" 更可靠。
LinguaMate 语航者 AI 不止是一个语言练习工具——它是一套将 Dify Agent 能力、 场景化教学设计、轻量前端架构融合在一起的智能体语伴系统。
项目采用"展示层 → 交互层 → 智能体层"的三段式架构，每一层职责明确、可独立迭代。
每个语伴对应一个独立的 Dify 应用，拥有专属的 System Prompt、知识库和对话风格。校园语伴不会用职场语气回应，文化语伴自带跨文化知识背景——这比单一聊天机器人切换 "模式" 更可靠。
通过 sandbox 属性精确控制 Dify Agent 的浏览器权限：允许脚本执行与表单提交，同时限制弹窗和导航。用户数据不经过前端服务器中转，直接与 Dify 实例通信，降低数据泄露面。
index.html 承担产品叙事与价值传递，companion.html 承担语伴介绍与导流，companion-chat.html 承担语伴选择与对话交互。页面共享视觉语言但职责分离——介绍页负责说服，交互页负责直达练习，互不拖累加载性能。
基于 Vue 3 CDN 运行时 + 原生 CSS 变量体系，无需 Webpack/Vite 构建流程。整个项目就是一组 HTML 文件和一个 CSS 文件，可以直接部署到任何静态服务器或 CDN，首次内容绘制极快。
切换语伴时通过 Vue 的 key 绑定触发 iframe 销毁与重建，配合 loading placeholder 实现平滑的"退出-加载-进入"过渡。用户点击重新加载按钮时，同样的机制确保 Agent 会话干净重启。
每个语伴拥有独立的渐变色标识——校园蓝、生活橙、社交靛、职场灰、文化红——用户无需阅读文字即可通过颜色快速定位目标语伴。卡片动画采用交错入场序列，降低等待的感知时间。
每个语伴以可视化卡片呈现——头像、名称、场景描述、标签——用户无需阅读说明书就能理解"这个人可以陪我练什么"。点击卡片直接进入对话，中间没有多余的配置页面。
100vh 占满、隐藏滚动条、viewport-fit: cover 适配刘海屏——语伴页面在手机上就像一个独立的 App。桌面端则自动切换为双列网格布局，充分利用屏幕空间。
在线状态指示灯、加载 Spinner、过渡动画——每一个状态变化都有对应的视觉反馈。用户点击卡片后有 200ms 的选中态延迟，让大脑跟上界面的节奏。
5 个语伴覆盖核心场景，更多语伴标记为"即将上线"而非填充假数据。CSS 变量体系让颜色、圆角、阴影统一管理——未来扩展只需改几个变量值。