AI Chat Interview - Vue 3 + Nuxt 3 面试题

项目背景

这是一个简单的 AI 聊天应用。前任开发者为了赶进度，将所有逻辑都写在了一个文件中，虽然能运行，但存在交互问题和代码维护性问题。

你的任务是完成功能实现、修复 Bug，并对代码进行重构。

建议时间: 60 分钟

---

启动项目

安装依赖

npm install

启动开发服务器

npm run dev

访问: http://localhost:3000

---

你的任务

请按顺序完成以下 3 个任务，每完成一个任务后提交一次 Git Commit。

任务 1: 实现 Loading 加载状态

需求:

• 点击 "发送" 按钮后，按钮文字应该变为 "思考中..." 并且处于禁用状态
• AI 回复完成后，按钮恢复为 "发送" 并可点击
• 加载中时，用户不能重复发送消息

要求:

1. 创建一个响应式的 loading 状态变量
2. 在发送消息时设置 loading 为 true
3. 在 AI 回复完成后设置 loading 为 false
4. 按钮的文字和禁用状态根据 loading 变量动态变化

提示:

• 查看 app.vue 中的 TODO 注释
• 使用 Vue 3 的 ref() 创建响应式变量
• 模板中使用三元表达式显示不同文字

完成后:

git 提交代码

---

任务 2: 修复聊天框滚动异常 Bug

现象:

• 当发送消息或收到 AI 回复时，聊天框应该自动滚动到最底部
• 目前的 scrollToBottom 函数时灵时不灵，经常卡在倒数第二条消息

要求:

• 修复滚动逻辑，确保新消息出现后视图都能自动滚到底部

提示:

• Vue 的 DOM 更新不是同步的，考虑使用 nextTick
• 可以使用 watch 监听 messages 的变化

完成后:

git 提交代码

---

任务 3: 组件化重构

现象:

• app.vue 文件中，消息列表的渲染逻辑和主界面耦合太紧，代码结构混乱

要求:

1. 将单条消息的渲染逻辑提取为独立组件: components/ChatMessage.vue
2. 通过 props 传递消息数据
3. 加分项: 为组件 Props 添加 TypeScript 类型定义

提示:

• 参考 app.vue:89-101 的消息渲染部分
• 组件样式也需要一并迁移

完成后:

git 提交代码

---

提交代码

完成所有任务后:

1. 创建一个新分支用于你的修改

git 提交 PR

2. 确保所有任务的 commit 都已提交

3. 推送分支到远程仓库

4. 在 gitea 上创建 Pull Request (PR)

   • PR 标题: 完成 AI Chat 面试任务
   • PR 描述中简要说明你完成的 3 个任务

---

注意事项

• 本项目不依赖真实后端，所有接口均为模拟 (Mock)
• 不需要关注 UI 美观度，重点考察 Vue 3 响应式原理、DOM 更新机制和代码组织能力
• 可以参考 Nuxt 3 官方文档 和 Vue 3 官方文档
• 每个任务完成后必须提交一次 commit，commit message 需要清晰描述改动内容

---

验收标准

完成所有任务后，请确保:

1. 项目能正常运行 (npm run dev)
2. 所有功能正常工作
3. 代码结构清晰，易于维护
4. Git 提交历史清晰，至少包含 3 个独立的 commit（每个任务一个）
5. 成功创建 Pull Request